<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚轮控制图片大小</title>
<style>
#img{
position: absolute;
left: 100px;
top:100px;
}
</style>
</head>
<body>
<img id="img" src="img/1.jpg" alt="">
</body>
<script src="js/mouseWheel.js"></script>
<script>
// 获取元素
var img=document.getElementById('img');
mouseWheel(img,function(event,down){
// 获取宽高的初始值
var oldWidth=this.offsetWidth;
var oldHeight=this.offsetHeight;
// alert(oldWidth+oldHeight);
// 获取左侧和上侧的偏移量初始值
var oldLeft=this.offsetLeft;
var oldTop=this.offsetTop;
// alert(oldWidth+oldHeight);
// 获取鼠标的坐标点,以此点为缩放中心
var x=event.clientX;
var y=event.clientY;
// alert(x+y);
// 计算鼠标的坐标位置,在图片中的比例
var scaleX=(x-oldLeft)/oldWidth;
var scaleY=(y-oldTop)/oldHeight;
/*
鼠标坐标点-初始的偏移量=鼠标坐标在元素内的位置
鼠标坐标在元素内的距离/初始的元素宽高=鼠标位置在图片中的比例
*/
if (down) {
// 当滚轮向下滑动时,让宽度+10
this.width=oldWidth+10;
// 限制最大宽度
if (this.width>800) {
this.width=800;
}
}else{
// 当滚轮向上滑动时,让宽度-10
this.width=oldWidth-10;
// 限制最小宽度
if (this.width<300) {
this.width=300;
}
}
// 获取图片大小的变化量
var imgChangeWidth=this.offsetWidth-oldWidth;
var imgChangeHeight=this.offsetHeight-oldHeight;
// 初始偏移量-（鼠标在图片中的比例*图片大小的变化值）
var l=oldLeft-(scaleX*imgChangeWidth);
var t=oldTop-(scaleY*imgChangeHeight);
console.log("左侧的值:"+l);
console.log("右侧的值:"+t);
this.style.left=l+"px";
this.style.top=t+"px";
});
</script>
</html>
js部分
/*
@author Henry Zhang
@date 2016-008-02
@version 01(版本)
*/
function mouseWheel(obj,fn){
// 获取是不是ff浏览器
var ff=navigator.userAgent.indexOf("Firefox");
// 判断浏览器类型
if (ff!=-1) {
// 为box添加滚轮事件
obj.addEventListener('DOMMouseScroll',wheel,false);
}else{
obj.onmousewheel=wheel;
}
// 简化上一段函数代码
function wheel(event){
var event=event||window.event;
var down=true;
if (event.detail) {
down=event.detail>0;
}else{
down=event.wheelDelta<0;
}
console.log(down);
fn.apply(obj,[event,down]);
/*
注释:fn是作为参数来接受传进来的函数
apply()是一种方法,可以将外界需要用到的参数附加给fn方法
*/
return false;
}
}
网友评论