滚轮控制元素放大缩小
#img{ position: absolute; top: 100px; left: 200px; }
var img = document.querySelector("#img");
mouseWheel(img, function (event,down){
var oldWidth = this.offsetWidth; //宽高初始值
var oldHeight = this.offsetHeight;
var oldLeft = this.offsetLeft; //偏移量初始值
var oldTop = this.offsetTop;
var x = event.clientX; //鼠标坐标
var y = event.clientY;
//鼠标坐标的位置在图片中的比例
var scaleX = (x - oldLeft) / oldWidth;
var scaleY = (y - oldTop) / oldHeight;
//(鼠标坐标 - 元素初始偏移量 = 鼠标坐标在元素体内的距离)/ 元素初始宽高
if(down){
this.width = oldWidth + 10; //滚轮向下滚宽度+10
if (this.width > 800){
this.width = 800;
}
}else{
this.width = oldWidth - 10; //滚轮向上滚宽度-10
if (this.width < 300){
this.width = 300;
}
}
//获取图片大小的变化量
var imgChangeWidth = this.offsetWidth - oldWidth;
var imgChangeHeight = this.offsetHeight - oldHeight;
//鼠标在图片中的比例 * 图片大小的变化量 = left/top的变化量
var l = oldLeft - (scaleX * imgChangeWidth);
var t = oldTop - (scaleY * imgChangeHeight);
this.style.left = l + "px";
this.style.top = t + "px";
});