document.body.onmousewheel = function(event) {
    event = event || window.event;
    console.dir(event);	
};

document.body.addEventListener("DOMMouseScroll", function(event) {
    console.dir(event);	
});

/**
 * 简易的事件添加方法
 */
 
define(function(require, exports, module) {
    exports.addEvent = (function(window, undefined) {        
        var _eventCompat = function(event) {
            var type = event.type;
            if (type == 'DOMMouseScroll' || type == 'mousewheel') {
                event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
            }
            //alert(event.delta);
            if (event.srcElement && !event.target) {
                event.target = event.srcElement;    
            }
            if (!event.preventDefault && event.returnValue !== undefined) {
                event.preventDefault = function() {
                    event.returnValue = false;
                };
            }
            /* 
               ......其他一些兼容性处理 */
            return event;
        };
        if (window.addEventListener) {
            return function(el, type, fn, capture) {
                if (type === "mousewheel" && document.mozFullScreen !== undefined) {
                    type = "DOMMouseScroll";
                }
                el.addEventListener(type, function(event) {
                    fn.call(this, _eventCompat(event));
                }, capture || false);
            }
        } else if (window.attachEvent) {
            return function(el, type, fn, capture) {
                el.attachEvent("on" + type, function(event) {
                    event = event || window.event;
                    fn.call(el, _eventCompat(event));    
                });
            }
        }
        return function() {};    
    })(window);        
});

addEvent(dom, "mousewheel", function(event) {
    if (event.delta < 0) { alert("鼠标向上滚了！"); }
});

/**
 * 简易的列表左右滑动切换效果
 * 鼠标事件是关键，因此，一些数值写死在方法中，纯测试用
 */
 
define(function(require, exports, module) {
    var Event = require("/study/201304/addEvent.js");
    var _move = function(ele, to, from) {
        // 动画实现
        // ...
    };
    return {
        index: 0,
        visible: 4,
        init: function(box) {
            // box指滚动的列表容器
            var self = this
              , length = box.getElementsByTagName("li").length;
            Event.addEvent(box.parentNode, "mousewheel", function(event) {
                 if (event.delta > 0 && self.index > 0) {
                    // 往上滚
                    self.index--;
                 } else if (event.delta < 0 && self.index < length - self.visible) {
                     // 往下
                     self.index++;                     
                 } else {
                    return; 
                 }
                 _move(box, -1 * self.index * 140);    
             
                 event.preventDefault();
            });
        }
    };
});
 

var $ = function(id) {
    return document.getElementById(id);
};
seajs.use("/study/201304/slide.js", function(slide) {
    slide.init($("slideBox"));
});

相关文章

• 小tip: 子元素scroll父元素容器不跟随滚动JS实现 (0.531)
• 纯js无图片无外链CSS图片幻灯片播放插件 (0.354)
• DOM基础小测27期答疑文字版-窗体滚动二三事 (0.177)
• 来了来了，scrollend滚动停止事件也支持了 (0.177)
• jQuery - 鼠标经过(hover)事件的延时处理 (0.079)
• MooTools和jQuery库继承实现class切换对比 (0.079)
• js页面文字选中后分享到新浪微博实现 (0.079)
• HTML5终极备忘大全（图片版+文字版） (0.079)
• CSSOM视图模式(CSSOM View Module)相关整理 (0.079)
• CSS3 pointer-events:none应用举例及扩展 (0.079)
• IE6下z-index犯癫不起作用bug的初步研究 (RANDOM - 0.037)