您的位置:首页 > Web前端 > JavaScript

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

2018-01-17 14:46 686 查看

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;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js