关于js鼠标滚轮放大缩小图片案例

最新推荐文章于 2024-08-14 15:52:52 发布

wpz82864240

最新推荐文章于 2024-08-14 15:52:52 发布

阅读量1w

点赞数

文章标签： js

本文链接：https://blog.csdn.net/wpz82864240/article/details/79085084

版权

这段代码展示了如何使用JavaScript监听鼠标滚轮事件，动态调整图片的大小和位置。通过获取图片及其容器的尺寸，根据滚轮方向进行放大或缩小，并相应地调整图片的margin，以实现平滑的缩放效果。

摘要由CSDN通过智能技术生成

var myimage =document.getElementById("WebVideoImg");
if (myimage.addEventListener) {
    // IE9, Chrome, Safari, Opera
    myimage.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
function MouseWheelHandler(e) {
//WebVideo为外层DIV，WebDiveoImg为DIV内img标签
var myimage = document.getElementById("WebVideoImg");
    var mydivWidth = parseInt(document.getElementById("WebVideo").style.width);
    var mydivHeight = parseInt(document.getElementById("WebVideo").style.height);
    var height = myimage.height;
    //if(height === 1080) return;
    var marLeft = parseInt( $('#WebVideoImg').css('marginLeft'))