首頁 > 開發者 > JavaScript
<br /><!doctype html><br /><html lang="zh-ch"><br /> <head><br /> <meta charset="utf-8" /><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <title>mousewheel的事件綁定 by 司徒正美</title></p><p> <mce:script type="text/javascript"><!--<br /> window.onload = function(){<br /> var eventSupported = function( eventName,el ) {<br /> el = el || document.createElement("div");<br /> eventName = "on" + eventName;<br /> var isSupported = (eventName in el);<br /> if (el.setAttribute && !isSupported ) {<br /> el.setAttribute(eventName, "return;");<br /> isSupported = typeof el[eventName] === "function";<br /> }<br /> el = null;<br /> return isSupported;<br /> };</p><p> var addEvent = function(obj,type,callback){<br /> if ( obj.addEventListener ) {<br /> obj.addEventListener( type, callback, false );<br /> } else if ( obj.attachEvent ) {<br /> obj.attachEvent( "on" + type, callback );<br /> }<br /> }<br /> var type = eventSupported("mousewheel") ? "mousewheel":"DOMMouseScroll";<br /> //注意IE下window沒有滾輪事件<br /> var wheel = function(obj,callback){<br /> addEvent(obj, type,function(event){<br /> event = event || window.event;<br /> var delta = 0;<br /> if (event.wheelDelta) {<br /> delta = event.wheelDelta/120;<br /> //opera 9x系列的滾動方向與IE保持一致，10後修正<br /> if(window.opera && window.opera.version() < 10)<br /> delta = -delta;<br /> } else if (event.detail) {<br /> delta = -event.detail/3;<br /> }<br /> //由於事件對象的原有屬性是唯讀，我們只能通過添加一個私人屬性delta來解決相容問題<br /> event.delta = Math.round(delta); //修正safari的浮點 bug<br /> callback.call(obj,event);<br /> });<br /> }<br /> var counterDelta = 0;<br /> wheel(document.getElementById("delta"),function(e){<br /> counterDelta += e.delta<br /> this.innerHTML = counterDelta + ": " + ( e.delta < 0 ? '向下滾' : '向上滾' );<br /> });<br /> }</p><p>// --></mce:script><br /> <mce:style type="text/css"><!--<br /> body {<br /> padding:20px 100px;<br /> }<br /> a{<br /> color:#FFDEAD;<br /> }<br /> #delta {<br /> padding:10px;<br /> width: 100px;<br /> height: 100px;<br /> background:#4DC2F2;<br /> color:#FF8C00;<br /> font-weight:bolder;<br /> }</p><p>--></mce:style><style type="text/css" mce_bogus="1"> body {<br /> padding:20px 100px;<br /> }<br /> a{<br /> color:#FFDEAD;<br /> }<br /> #delta {<br /> padding:10px;<br /> width: 100px;<br /> height: 100px;<br /> background:#4DC2F2;<br /> color:#FF8C00;<br /> font-weight:bolder;<br /> }<br /> </style></p><p> </head><br /> <body><br /> <h1><a href="http://www.cnblogs.com/rubylouvre/" mce_href="http://www.cnblogs.com/rubylouvre/">mousewheel的事件綁定</a></h1><br /> <div id="delta" ><br /> by<br /> </div></p><p> </body><br /></html><br />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
