关于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;

}


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页