代码改变世界

记录鼠标滚轮事件

2010-02-05 00:36  BlueDream  阅读(632)  评论(0)    收藏  举报

刚巧睡觉前看到了sohighthesky同学的文章.正好最近也要用到滚轮事件.就顺便也看下记录下.

主要是滚轮鼠标的兼容性:

1. 绑定滚轮事件. 这次只有FF浏览器特殊用DOMMouseScroll 其余浏览器使用onmousewheel. 代码可以写为:

Event.addEvent(o, isFF? 'DOMMouseScroll' : 'mousewheel', ZOom);

2. 控制滚轮数值大小和方向. 仅有FF使用 detail 其它的都用wheelDelta. detail每次滚动的值为加减3 而wheelDelta为加减120. 且两者加减针对的方向正好相反.

event.data = event.wheelDelta || -event.detail*40;

代码比较仓促,仅用做记录:

<!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>
  <title> ImageZoom </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <img src="3.jpg" id="photo"/>
  <script>
    /*!
        ImageZoom
    */
    var ImageZoom = function() {
        var Event = {}, ua = navigator.userAgent, isIE = /msie/i.test(ua), isFF = /firefox/i.test(ua);
        var zoom = 100, min = 50, o = document.getElementById('photo'), w = o.offsetWidth, h = o.offsetHeight;
        Event.addEvent = function(obj, type, fn) { window.addEventListener ? obj.addEventListener(type, fn, false) : obj.attachEvent('on'+type, fn); };
        Event.format = function(event) {
            if(isIE) event.preventDefault = function() { event.returnValue = false };
            event.data = event.wheelDelta || -event.detail*40;
            return event;
        }
        function ZOom(event) {
            var e = Event.format(event);
            zoom += e.data / 12;
            if(zoom > min) {
                if(isIE) {
                    o.style.zoom = zoom + '%';
                } else {
                    o.style.width = w * zoom / 100 + 'px';
                    o.style.height = h * zoom / 100 + 'px';
                }
                e.preventDefault();
            }
        }
        return {
            init: function() {
                Event.addEvent(o, isFF? 'DOMMouseScroll' : 'mousewheel', ZOom);
            }
        }
    }();

    ImageZoom.init();
  </script>
 </body>
</html>