<!doctype html> <html lang="zh-ch"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>mousewheel的事件绑定 by 司徒正美</title> <mce:script type="text/javascript"><!-- window.onload = function(){ var eventSupported = function( eventName,el ) { el = el || document.createElement("div"); eventName = "on" + eventName; var isSupported = (eventName in el); if (el.setAttribute && !isSupported ) { el.setAttribute(eventName, "return;"); isSupported = typeof el[eventName] === "function"; } el = null; return isSupported; }; var addEvent = function(obj,type,callback){ if ( obj.addEventListener ) { obj.addEventListener( type, callback, false ); } else if ( obj.attachEvent ) { obj.attachEvent( "on" + type, callback ); } } var type = eventSupported("mousewheel") ? "mousewheel":"DOMMouseScroll"; //注意IE下window没有滚轮事件 var wheel = function(obj,callback){ addEvent(obj, type,function(event){ event = event || window.event; var delta = 0; if (event.wheelDelta) { delta = event.wheelDelta/120; //opera 9x系列的滚动方向与IE保持一致，10后修正 if(window.opera && window.opera.version() < 10) delta = -delta; } else if (event.detail) { delta = -event.detail/3; } //由于事件对象的原有属性是只读，我们只能通过添加一个私有属性delta来解决兼容问题 event.delta = Math.round(delta); //修正safari的浮点 bug callback.call(obj,event); }); } var counterDelta = 0; wheel(document.getElementById("delta"),function(e){ counterDelta += e.delta this.innerHTML = counterDelta + ": " + ( e.delta < 0 ? '向下滚' : '向上滚' ); }); } // --></mce:script> <mce:style type="text/css"><!-- body { padding:20px 100px; } a{ color:#FFDEAD; } #delta { padding:10px; width: 100px; height: 100px; background:#4DC2F2; color:#FF8C00; font-weight:bolder; } --></mce:style><style type="text/css" mce_bogus="1"> body { padding:20px 100px; } a{ color:#FFDEAD; } #delta { padding:10px; width: 100px; height: 100px; background:#4DC2F2; color:#FF8C00; font-weight:bolder; } </style> </head> <body> <h1><a href="http://www.cnblogs.com/rubylouvre/" mce_href="http://www.cnblogs.com/rubylouvre/">mousewheel的事件绑定</a></h1> <div id="delta" > by </div> </body> </html>
博客园 © 2004-2025 浙公网安备 33010602011771号 浙ICP备2021040463号-3
浙公网安备 33010602011771号