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

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值