js实现图片放大居中，滚轮缩放，支持多种浏览器

最新推荐文章于 2024-08-21 23:57:05 发布

yangymy

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量2.3k

点赞数 1

分类专栏： javascript 文章标签： js 图片缩放滚轮

本文链接：https://blog.csdn.net/yangymy/article/details/86539714

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>