点击放大图片、滚动缩放图片（无插件，自己写的）

最新推荐文章于 2024-04-26 14:18:06 发布

_Chris

最新推荐文章于 2024-04-26 14:18:06 发布

阅读量1.9k

点赞数

分类专栏：插件示例 JS

本文链接：https://blog.csdn.net/rj532029887/article/details/45026461

版权

JS 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

插件示例

13 篇文章 0 订阅

订阅专栏

<body>

<div style="position:absolute;display:none;top:0;left:0;width:100%;background-color:#676767;" id="cts">
<div style="position:absolute;top:0;right:0;">
<img src="~/Image/Practice/close_1.png" class="imgRoll" id="CloseBig"/>
</div>
<div style="margin:0 auto;text-align:center;vertical-align:middle;" id="imgVer">
<img src="/images/1.jpg" style="width:800px;height:auto;" onmousewheel="return bigimg(this)"/>
<img src="" id="block"/>//利用空图片实现上下左右居中
</div>
</div>

function bigimg(i) {
var zoom = parseInt(i.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom > 0)
i.style.zoom = zoom + '%';
return false;
}

$(function(){

$("#smallIMG").click(function () {
$("#cts").css("display", "block");
})
$("#CloseBig").click(function () {
$("#cts").css("display", "none");
})

$("#cts").css("height", document.body.clientHeight + "px");
$("#imgVer").css("height", document.body.clientHeight + "px");

})

</script>

</body>