Html
    Css
    Js

    
                        
#outerbox {
	width:100%;
	height:100%;
	display:none;
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.6);
	z-index:9;
}
#innerbox {
	position:absolute;
	z-index:99;
}
#innerbox #bigimg {
	cursor:grab;
	border:5px solid #ffffff;
	border-radius:10px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

jquery点击图片放大预览,且鼠标滚轮缩放

更新时间:2021-05-08 17:15:12

web端页面点击图片预览图片,显示图片原始大小,滑动鼠标滚轮可放大或缩小图片;
当前放大的最大值无上限,缩小的最小值为原始比例的0.5,放大的最大值比例和缩小的最小值比例可自行设置;
再次点击图片或其它区域都可隐藏弹窗

0