鼠标滚轮已毕图片的推广减少,slidedoor滑动门特效

 slidedoor滑动门特效

关键点,鼠标的职位是不动的,其余地方的压缩是跟据鼠标左边的宽度与总增幅的壁纸来总结的
数值方向是根据鼠标距离上面低度与总中度的比率来测算的

图片 1

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>滚轮控制成分放大缩短</title>
<style type=”text/css”>
#img{ position: absolute; top: 100px; left: 200px; }
</style>
</head>
<body>
<img id=”img” src=”images/img01.jpg” alt=””/>
</body>
<script type=”text/javascript”
src=”mouseWheel.js”></script>
<script type=”text/javascript”>
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”;
});
</script>
</html>

exportWidth:揭露门的宽度 width

imagesWidth:单张图片的幅度width

每道门每一遍偏移量 translate=imagesWidth-exportWidth;

目前鼠标hover图片时,偏移后的left值应为当前图片images[i].style.left与每道门的偏移量之差

小心:当前鼠标hover图片此前时,应该让每道门进行复位

统计公式: images[i].style.left=images[i].style.left-translate

图片 2

源码下载 请点击 http://pan.baidu.com/s/1mhIOt0O