和尚号秃驴的gravatar头像
和尚号秃驴 2017-08-14 18:22:38

jquery图片放大缩小特效

由于工作需要,展示图片的时候 总是会有放大或者缩小的需求,本人不擅长前端的内容,所以请我们的前端小伙伴写了一个图片放大的功能用于项目中,还是蛮好用的,留下备用 

<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"></script>
</head>
<body>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
		<img id="bigimg" style="border:5px solid #fff;" src="" />
	</div>
</div>
 
<ul id="imglist">
<li><img class="pimg" src="psb.jpg" width="50px" height="50px" /></li>

</ul>
<script>
$(function() {
	$(".pimg").click(function() {
		var _this = $(this);// 将当前的pimg元素作为_this传入函数
		imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
	});
});

function imgShow(outerdiv, innerdiv, bigimg, _this) {
	var src = _this.attr("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 = 1000;// 获取图片真实宽度
		var realHeight = 1000;// 获取图片真实高度
		var imgWidth, imgHeight;
		var scale = 1;// 缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放

		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");
	});
}
</script>
</body>
 
</html>

原图片信息

jquery图片放大缩小特效

点击效果

jquery图片放大缩小特效

gif动图


打赏

最代码最近下载分享源代码列表最近下载
最代码最近浏览分享源代码列表最近浏览
Wwz12345  LV6 2023年12月25日
lanana  LV1 2023年12月23日
端布ejkqwejkqw 2022年12月10日
暂无贡献等级
大家大大  LV1 2022年12月7日
Dominick  LV13 2022年11月14日
都是老虎啊  LV12 2022年8月17日
gggofnofnzj1 2022年7月31日
暂无贡献等级
kylinw  LV1 2022年7月9日
hehehesjp  LV1 2022年6月8日
Sotouch  LV13 2022年5月31日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友