js鼠标滚轮放大缩小图片

复制代码
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'));
    var marRight = parseInt($('#WebVideoImg').css('marginTop'));
 
    var e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    myimage.style.width = Math.max(mydivWidth, Math.min(2400, myimage.width + (32 * delta))) + "px";
    myimage.style.height = Math.max(mydivHeight, Math.min(1350, myimage.height + (18 * delta))) + "px";
    //
    if(delta >0 && height< 1350){
        //var left = document.getElementById("WebVideoImg").style.marginLeft;
        document.getElementById("WebVideoImg").style.marginLeft = (marLeft-16)+"px";
        document.getElementById("WebVideoImg").style.marginTop =(marRight-9)+"px";
//        document.getElementById("WebVideo").style.marginLeft = (marLeft-16)+"px";
//        document.getElementById("WebVideo").style.marginTop =(marRight-9)+"px";
    }else if(delta<0 && height > mydivHeight){
        document.getElementById("WebVideoImg").style.marginLeft = (marLeft+16)+"px";
        document.getElementById("WebVideoImg").style.marginTop =(marRight+9)+"px";
//        document.getElementById("WebVideo").style.marginLeft = (marLeft+16)+"px";
//        document.getElementById("WebVideo").style.marginTop =(marRight+9)+"px";
    }
    return false;
 
}
复制代码

 

posted @   谁有大饼  阅读(528)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示