js鼠标滚动图片等比例缩放代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js鼠标滚动图片等比例缩放代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js鼠标滚动图片等比例缩放代码</title>
<style type="text/css">
img{
	position: absolute;
	left:400px;
	top: 100px;
}
</style>

<script type="text/javascript" src="wheel.js"></script>
<script type="text/javascript">
window.onload=function (){
	var oImg=document.getElementsByTagName("img")[0];

	fnWheel(oImg,function (down,oEvent){

		var oldWidth=this.offsetWidth;
		var oldHeight=this.offsetHeight;
		var oldLeft=this.offsetLeft;
		var oldTop=this.offsetTop;

		var scaleX=(oEvent.clientX-oldLeft)/oldWidth;//比例
		var scaleY=(oEvent.clientY-oldTop)/oldHeight;

		if (down){
			this.style.width=this.offsetWidth*0.9+"px";
			this.style.height=this.offsetHeight*0.9+"px";
		}
		else{
			this.style.width=this.offsetWidth*1.1+"px";
			this.style.height=this.offsetHeight*1.1+"px";
		}

		var newWidth=this.offsetWidth;
		var newHeight=this.offsetHeight;

		this.style.left=oldLeft-scaleX*(newWidth-oldWidth)+"px";
		this.style.top=oldTop-scaleY*(newHeight-oldHeight)+"px";
	});
}	
</script>
</head>
<body>
<img src="img/mi.jpg" alt="">
</body>
</html>

JS代码(wheel.js):

function fnWheel(obj,fncc){
	obj.onmousewheel = fn;
	if(obj.addEventListener){
	obj.addEventListener('DOMMouseScroll',fn,false);
}
function fn(ev){
	var oEvent = ev || window.event;
	var down = true;
	if(oEvent.detail){
	down = oEvent.detail>0}
else{
	down = oEvent.wheelDelta<0}
if(fncc){
	fncc.call(this,down,oEvent);
}
if(oEvent.preventDefault){
	oEvent.preventDefault();
}
return false;
}
}

附件:下载该文件资源,减少时间成本(增值服务)