js实现鼠标放在图片上放大居中，鼠标滚轮实现图片缩放，解决鼠标移入移出闪动问题，支持多种浏览器。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片放大</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
#gray{
background : black;
opacity : 0.55;
filter : alpha(opacity=55);
position : absolute;
top : 0px;
left : 0px;
}
</style>
</head>
<body>
<div align="center">
<img id="originImg" src="a.jpg" width='300px' onmouseover='showBigPic(this)' onmousewheel="return false;" onmouseout='closeBigPic()'/><br>
<img id="originImg2" src="b.png" width='300px' onmouseover='showBigPic(this)' onmousewheel="return false;" onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
<img src="b.png" width='300px' onmouseover='showBigPic(this)' onmouseout='closeBigPic()'/><br>
</div>
<div id="sdqinfo_show_div" style="z-index:999;pointer-events: none;">
</div>
</body>
<script type="text/javascript">
var myimage =document.getElementById("originImg");
var myimage2 =document.getElementById("originImg2");
var scrollFunc=function(e){
e=e||window.event;
if (e&&e.preventDefault){
e.preventDefault();
e.stopPropagation();
}else{
e.returnvalue=false;
return false;
}
}
//IE阻止下拉滚动条
//onmousewheel="return false;"
//火狐阻止下拉滚动条
$('#originImg').bind('DOMMouseScroll', function(e){ scrollFunc(e); });
$('#originImg2').bind('DOMMouseScroll', function(e){ scrollFunc(e); });
if (myimage.addEventListener) {
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}else{// IE 6/7/8
myimage.attachEvent("onmousewheel", MouseWheelHandler);
}
if (myimage2.addEventListener) {
myimage2.addEventListener("mousewheel", MouseWheelHandler, false);
myimage2.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}else{
myimage2.attachEvent("onmousewheel", MouseWheelHandler);
}
function MouseWheelHandler(e) {
var myimage = document.getElementById("WebVideoImg");
var width = myimage.width;
var height = myimage.height;
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if(delta >0 && height< 600){
var imgobj = document.getElementById("WebVideoImg");
imgobj.style.width = (imgobj.width*1.05)+"px";
imgobj.style.height = (imgobj.height*1.05)+"px";
imgobj.style.top = (winh-imgobj.height)/2+'px';
imgobj.style.left= (winw-imgobj.width)/2+'px';
}else if(delta<0 && height>200){
var imgobj = document.getElementById("WebVideoImg");
imgobj.style.width = (imgobj.width*0.95)+"px";
imgobj.style.height = (imgobj.height*0.95)+"px";
imgobj.style.top = (winh-imgobj.height)/2+'px';
imgobj.style.left= (winw-imgobj.width)/2+'px';
}
return false;
}
function showBigPic(pic){
//获取图片的宽和高
minw = pic.width;
minh = pic.height;
//获取屏幕的宽和高
winw = document.documentElement.clientWidth;
winh = document.documentElement.clientHeight;
//创建大图
oimg = document.createElement("img");
oimg.id='WebVideoImg';
oimg.src = pic.src;
oimg.width=minw*2;
oimg.height=minh*2;
oimg.style.border='5px solid #000';
oimg.style.position = 'absolute';
oimg.style.top = (winh-minh*2)/2+'px';
oimg.style.left= (winw-minw*2)/2+'px';
document.getElementById('sdqinfo_show_div').appendChild(oimg);
//document.body.appendChild(oimg);
}
function closeBigPic(){
//document.body.removeChild(oimg);
document.getElementById('sdqinfo_show_div').removeChild(oimg);
}
//设置图片的位置来适应窗口的大小
window.onresize=function(){
winh = document.documentElement.clientHeight;
winw = document.documentElement.clientWidth;
gdiv.style.width = winw + 'px';
gdiv.style.height = winh + 'px';
//更改图片的位置
oimg.style.top = (winh-minh*2)/2 + 'px';
oimg.style.left = (winw-minw*2)/2 + 'px';
}
</script>
</html>
版权声明：本文为yangymy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。