实现jquery双击图片放大

第一步准备一个放大的div容器

第二步点击事件

第三步

function Big(obj) {
imgShow("#outerdiv", "#innerdiv", "#bigimg", obj);
}

function imgShow(outerdiv, innerdiv, bigimg, _this) {
var src = _this.src;//获取当前点击的pimg元素中的src属性
$(bigimg).attr("src", src);//设置#bigimg元素的src属性

/*获取当前点击图片的真实大小，并显示弹出层及大图*/
$("<img/>").attr("src", src).load(function () {
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
var realWidth = this.width;//获取图片真实宽度
var realHeight = this.height;//获取图片真实高度
var imgWidth, imgHeight;
var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

if (realHeight > windowH * scale) {//判断图片高度
imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
imgWidth = windowW * scale;//再对宽度进行缩放
}
} else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
} else {//如果图片真实高度和宽度都符合要求，高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放

var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
$(innerdiv).css({ "top": h, "left": w });//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
});

$(outerdiv).click(function () {//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}

实现jquery双击图片放大相关推荐

jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
php中图片放大,jquery实现图片放大缩小特效
和大家分享一个最近用到的jquery实现图片的放大缩小的特效.具体效果是鼠标移动到图片上,图片自动缩到左上角,右下角出现文字说明,鼠标移走后图片恢复,文字被图片遮挡.非常不错的一个图片特效功能.贴一下 ...
用Jquey实现双击图片放大和触摸放大的功能。
最近有个新的需求,就是双击图片会显示原图. 个人的思路是先让图片按百分比显示,在通过jquery 的dblcliock()方法来实现双击触发的思路. 这个是H5的代码: <div class=& ...
jquery实现图片放大效果
好久没更新了,先来一发关于jquery图片放大缩小的代码直接上代码前端页面: <tr><td height="30" align="right&qu ...
jquery 实现图片放大
文章目录一.html.Jquery代码如下二.效果 2.1.初始化加载的页面 2.2.鼠标放到图片上时(即 `hover` 事件 ), 图片放大为1.4倍 2.3.鼠标点击(即 `click` 事 ...
html5 点击图片预览放大,jQuery超实用图片放大预览特效插件
大自然的自述过去,我这儿有新鲜的空气,清澈的河流,雄伟的高山,一望无际的草原,郁郁葱葱的森林.天空中,小鸟在自由自在的飞翔:水里,小鱼在快活的游来游去:森林里,动物们快乐地嬉戏,人类辛勤的种植.一切 ...
图片放大显示的jQuery插件
从网上下载了一个jquery的图片放大显示插件,效果如下前台代码调用: 先引入js <script type="text/javascript" src="../ ...
Android 高仿微信朋友圈动态，支持双击手势放大并滑动查看图片。
转载请注明出处: http://blog.csdn.net/sk719887916/article/details/40348873 作者skay: 最近参与了开发一款旅行APP,其中包含实时聊天和动 ...
JQuery，图片的放大和缩小
JQuery支持图片放大.缩小: 一.JQuery支持图片放大.缩小: 今天在"懒人之家"看到JQuery支持图片放大和缩小这个效果,顿时觉得非常神奇,就学习一下的. 二.下载源码 ...

实现jquery双击图片放大

实现jquery双击图片放大相关推荐

最新文章

热门文章