<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>set image size</title>
<style>
*{
margin:0;
padding:0;
}
.zoomin{
cursor:url('images/Discaz.cur'),auto;
}
.zoomout{
cursor:url('images/11.cur'),auto;
}
</style>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script>
jQuery(function($){
var img,imgH,imgW,winH,winW,pre;
function loadImage(url, callback) {
img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
}
function runImageFunc(){
loadImage('images/001.jpg', setImage);
}
function setImage(){
imgH = img.height;
imgW = img.width;
pre = imgH / imgW;
winH = $(window).height();
winW = $(window).width();
if(imgH <= winH && imgW <= winW){
return;
}else{
winSize();
$('img').addClass('zoomin');
}
}
function winSize(){
var outH,outW;
if(winH < winW){
outH = winH;
outW = winH / pre;
if(outW > winW){
outW = winW;
outH = winW * pre;
}
$('img').width(outW);
$('img').height(outH);
}else{
outW = winW;
outH = winW * pre;
if(outH > winH){
outH = winH;
outW = winH / pre;
}
$('img').height(outH);
$('img').width(outW);
}
}
runImageFunc();
//window.onresize = runImageFunc;
$('img').toggle(
function(){
$('img').height(imgH);
$('img').width(imgW);
if($('img').hasClass('zoomin')){
$('img').removeClass('zoomin');
}
$('img').addClass('zoomout');
},
function(){
winH = $(window).height();
winW = $(window).width();
winSize();
if($('img').hasClass('zoomout')){
$('img').removeClass('zoomout');
}
$('img').addClass('zoomin');
}
);
});
</script>
</head>
<body>
<img src="images/001.jpg" alt="" />
</body>
</html>
分享到：
相关推荐
基于jquery封装的viewerjs的pc图片缩放、拖拽、旋转等、也可使用于移动端
工作需要，要在一个Form里面实现一个实时预览的picturebox图像，由于picturebox可能会遮挡到其后面的画面，所以要求picturebox可以由用户自行拖拽，类似于悬浮框。 原理说明 在网上兜了几圈之后，决定用三段代码...
类似于各大网站上的会员头像上传功能。 实现解决方案： 1.在前台生成本地图片的预览。 2.用js对图片进行缩放显示、打水印。 3.当用户选取图片当中的一部分时，记录选取框大小以及坐标。 4.当用户点击保存时，将...
· RAW格式图片浏览及转换，视频文件集成管理及预览 · 批量缩放，裁剪，自动翻转，直方图，像素取色，色轮 · 自动对比、自动颜色、色彩增强、亮度均衡 · IE、Maxthon、Firefox、Opera、Chrome图片信息查看 · ...
参加比赛的作品，开发周期一个月，使用了 Wafer2 框架，后台采用腾讯云提供的 Node.js SDK 接入对象存储 API ，前端核心代码实现了类似于图片编辑器的功能，支持图片和文字的移动、旋转、缩放、生成预览图以及编辑...
CustomGalleryLikeiPhone（3D相册）项目旨在开发一款类似于iPhone原生相册功能的3D效果自定义相册应用。该项目结合了前沿的3D渲染技术和用户友好的交互设计，为用户带来丰富而沉浸式的图片浏览体验。通过本项目，...
很久之前就在一个网站的截取相片的功能中看到这个效果，也叫图片裁剪、图片剪切（设置一下也可以做出放大镜等类似的效果）。 当时觉得很神奇，碍于水平有限，没做出来。 前些日子突然想做一个透镜效果，就突然想到了...
（3）软件界面任意组合，图片预览大小任意可调。（4）以幻灯片方式（特技效果）显示某一目录下所有图片文件。（5）放大、缩小及全屏显示图片。（6）设置墙纸功能。（7）打包生成html相册。（8）图象编辑功能，包括：...
3、支持同一文档多种版面格式打印（类似于Word中的节的功能）：对同一份文档，不同的页面可以设置不同的格式（纸张大小、纸张方向、页边距），只需要在新增一页时在NewPage方法中指定要使用的页面格式即可，使用非常...
6、图片显示时具有放大、缩小、全屏显示、实际大小、最适合大小显示功能，并能用鼠标移动图片进行查看。 7、可设定图片浏览权限（即浏览等级），只有具有相应权限的人才能浏览此图片。 8、屏蔽右键复制图片功能。 9...
它的功能类似于微信应用程序预览图片。 手指向左或向右拖动以预览每个图像。 两指拖动放大或缩小图像。安装npm install --save react-wx-images-viewer依赖版本 0.0.1 -> React ^15.5.4 版本^ 1.0.0-> React ^ ...
（3）软件界面任意组合，图片预览大小任意可调。 （4）以幻灯片方式（特技效果）显示某一目录下所有图片文件。 （5）放大、缩小及全屏显示图片。 （6）设置墙纸功能。 （7）打包生成html相册。 （8）图象...
您还可以预览图片，放大和缩小，保存操作集，运行调度程序，将 ReaConverter 集成到上下文菜单中，设置透明度颜色，更改界面语言等。 这个简单易用的应用程序运行在中等到高数量的系统资源上，包括一个带有快照的...
界面新颖美观，采用文字式导航条更有利于搜索引擎抓取页面信息，同时程序还支持原有的图片式菜单效果，后台可轻松切换使用，以上2类导航条菜单均支持模板切换时导航条自动变换颜色功能。 三二、增加商品批量购买...
7、支持同一文档多种版面格式打印（类似于Word中的节的功能）：对同一份文档，不同的页面可以设置不同的格式（纸张大小、纸张方向、页边 距），只需要在新增一页时在NewPage方法中指定要使用的页面格式即可，使用...
即控件不再绑定这两个对象的类型信息，而是做成了"可加载对象"，类似于"插件"，如果你不将控件面板上的对象拖放在Form上，那么它将不会编译你的应用程序(exe)，当然控件也就不具备Chart和OLE功能。另外，这两个对象...
vue-cli等环境，可直接执行下列命令，否则需先安装环境npm installnpm run dev技术栈主要基于Vue2，Element-ui（少部分使用），Vuex编辑器主要功能元素自由拖拽，放大，缩小，旋转可添加图片，文本，矩形，背景。...