图片放大查看

最新推荐文章于 2024-06-10 08:29:57 发布

八百逗逼奔北坡♂

最新推荐文章于 2024-06-10 08:29:57 发布

阅读量540

点赞数

本文介绍了一个用于网页中图片放大显示的JavaScript插件实现细节。该插件能够获取并显示图片的真实尺寸，同时根据浏览器窗口大小自动调整图片尺寸，确保良好的视觉体验。通过淡入淡出效果展示和隐藏图片，提供了用户友好的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片放大查看

   function imgShow(outerdiv, innerdiv, bigimg, aa) {
            //var src = aa.attr("src");//获取当前点击的pimg元素中的src属性
            var src = aa.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的top和left属性
		$(innerdiv).css({"top":h, "left":w});
		// 淡入显示#outerdiv及.pimg
		$(outerdiv).fadeIn("fast");
	});
	$(outerdiv).click(function() {
		//再次点击淡出消失弹出层
		$(this).fadeOut("fast");
	});
}

大图显示区域

<div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.1); z-index: 30; width: 100%; height: 100%; display: none;">
		<div id="innerdiv" style="width:600px;">
			<img id="bigimg" class="bigimg" style="border: 1px solid #48C9B1;width:100%;height:100%;" />
		</div>
	</div>

事件触发

<img class=\"pimg\" onclick=imgShow(\"#outerdiv\",\"#innerdiv\",\"#bigimg\",this); width="180px;"  >