鼠标滚轮实现图片的缩放

今天是7月的最后一天了，不得不说，我定下的七月份剩余几天的计划是完不成了，一则工作确实紧了些，再则没能处理好生活、工作和学习的节奏，这才是人生最大的课题吧，不过也还好，至少自己还在坚持着，其实真的越来越感觉到自己的不足，可昂扬的斗志却是越来越低沉的迹象，内心里总有个声音在蛊惑自己：别整那些刻意的东西，做给谁看啊，而且刻意的记录的时间完全可以拿来学更多的东西，可最终我还在这个蛊惑前坚持着：确实可以腾出更多的时间来，也没人会在意在做什么，可是，同样，我不需要走那么快，而且只要知道自己在意就好了，我需要的就是这样一步一步走下去，这条路，才刚刚开始。

“滚轮滑动操作图片缩放”这个功能是我在网上无意中发现的，实际在想的过程中没有想到它的实用点在哪，不过还觉得蛮酷的就学习了下，这里也来记录下：

功能介绍：

将鼠标放在图片上，滚轮向上滑动，则图片不断变大，滚轮向下滑动，则图片不断减小

功能拆解分析：

1、第一个要关注的，就是获取滚轮事件的监听，能够获取到滚轮是在上滑还是下滑；

2、随着事件发生的不同，图片不断增加或者减少；

实例分析：

[html] view plaincopyprint?

1. <img id="img" src="run.gif" alt="跑" />  

这样我们先在html中放置一个图片，并对它进行样式上的设置

[css] view plaincopyprint?

1. <style type="text/css">  
2. * { margin:0; padding:0; }  
3. body { width:100%; height:100%; overflow:auto; }  
4. #img { display:block; width:20%; margin:20px auto; cursor:-webkit-zoom-in; cursor:-moz-zoom-in; border:4px solid #ccc; border-radius:4px; }  
5. </style>  

给图片加边框，是为了更好的观察增大减小的幅度，再有个比较经典的地方就是cursor，这个应该有很多种样式，合理的这个应用会加分很多啊，然后我们来实现功能

[javascript] view plaincopyprint?

1. window.onload = function(){  
2.         var img = document.getElementById("img");  
3.         if(img.addEventListener){  
4.             //ie9,chrome,safari,opera  
5.             img.addEventListener("mousewheel",change,true);  
6.             //firefox  
7.             img.addEventListener("DOMMouseScroll",change,false);  
8.         }  
9.         else{  
10.             //ie 6/7/8  
11.             img.attachEvent("onmousewheel",change);  
12.         }  

首先就是加监听，前面在记录中曾经提到过，一方面是兼容性中的addEventListener和attachEvent不同的方法，另一方面是传递的参数，这个是比较容易出现问题的地方

1、首先在第一个参数中addEventListener中是单纯的事件名称，像mousewheel，而attachEvent中的第一个参数则是事件,像onmousewheel；

2、addEventListener中存在三个参数，第三个是个boolean值，而且必须写，false表示支持浏览器事件的冒泡功能（由里向外），true则表示浏览器事件的捕获功能（由外向里）【这个地方还没有理解透，啥不同呢，回头再分析吧】

3、兼容性，当时的楼主很全面的兼容了五大浏览器，让我这后来人占了好大便宜，赚到了

监听实现了之后，我们就要根据不同的事件作出不同的回应，这个就该写在我们的方法change()中了

[javascript] view plaincopyprint?

1. function change(e){  
2.             var e = window.event||e;  
3.             var oper = Math.max(-1, Math.min(1,(e.wheelDelta || -e.detail)));//wheelDelta和detail  
4.             img.style.width = Math.max(50, Math.min(800,img.width + (30*oper)))+"px";  
5.             return false;  
6.         }  

这个方法中，首先学到的是Math.max()和Math.min()两个方法,然后就是逻辑和兼容了

1、Math.max(a,b,c,d)参数可以取多个，取若干值中最大值，当然min就是对应的取最小值嘛；

2、e.wheelDelta||-e.detail,这个又是兼容性的表现了，貌似只有Firefox中使用detail，其他的都是wheelDelta，两者的意义都一样的，都有两个值，但是两个值是不同的detail只能取+/- 3，而wheelDelta则只能取+/- 120，但同样的是整数表示向上，负数表示向下；

3、剩余的逻辑就不说了，已经写的很简单明了了

转载自：http://blog.csdn.net/marSmile_tbo/article/details/38326297