软件开发培训班 >> 编程开发 >> JavaScript

浅谈 Mousewheel 事件

　　本文标签：Mousewheel,事件

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Mousewheel Event in JavaScript</title> 
<style> 
body { 
padding:5px 10px; 
} 
.box { 
width:300px; 
height:150px; 
padding:10px; 
border:1px solid #999; 
background:#999; 
margin-bottom:20px; 
} 
.result strong { 
color:#f00; 
} 
</style> 
</head> 
<body> 
<h1>Mousewheel Event in JavaScript</h1> 
<ol> 
<li>IE6, IE7, IE8, Opera 10+, Safari 5+ support mousewheel.</li> 
<li>Firefox 3.5+ support DOMMouseScroll.</li> 
<li>IE6, IE7, IE8, Opera 10+, Safari 5+ support event.wheelDelta. </li> 
<li>Firefox 3.5+, Opera 10+ support event.detail.</li> 
<li>The event.wheelDelta value is a multiple of 120. </li> 
<li>The event.detail value is a multiple of 3.</li> 
</ol> 
<div id="J_Box01" class=box>Mousewheel Event: mousewheel</div> 
<div id="J_Box02" class=box>Mousewheel Event: DOMMouseScroll </div> 
<p id="J_Result" class="result"></P> 
<p>Related Articles: http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/</P> 
<script> 
(function(){ 
var addEvent = (function(){ 
if (window.addEventListener) { 
return function(el, sType, fn, capture) { 
el.addEventListener(sType, fn, (capture)); 
}; 
} else if (window.attachEvent) { 
return function(el, sType, fn, capture) { 
el.attachEvent("on" + sType, fn); 
}; 
} else { 
return function(){}; 
} 
})(), 
elBox01 = document.getElementById(J_Box01), 
elBox02 = document.getElementById(J_Box02), 
elResult = document.getElementById(J_Result);

// IE6/IE7/IE8/Opera 10+/Safari5+ 
addEvent(elBox01, mousewheel, function(event){ 
event = window.event || event ; 
elResult.innerHTML = This browser support <strong>mousewheel</strong> event!
 event.wheelDelt: <strong> + (event.wheelDelta ? event.wheelDelta : 0) + </strong>
event.detail: <strong> + (event.detail ? event.detail : 0) + </strong>; 
}, false); 
// Firefox 3.5+ 
addEvent(elBox02, DOMMouseScroll, function(event){ 
event = window.event || event ; 
elResult.innerHTML = This browser support <strong>DOMMouseScroll</strong> event!
 event.wheelDelt: <strong> + (event.wheelDelta ? event.wheelDelta : 0) + </strong>
event.detail: <strong> + (event.detail ? event.detail : 0) + </strong>; 
}, false); 
})(); 
</script> 
</body> 
</html>

网速总是太慢？路由器可不为你背这个锅！	中美半导体巨头，重磅和解！
游戏玩家的痛苦面具：为什么有钱也抢不到显卡？	相机光圈（Av）和快门优先（Tv），分别适合什么场景，怎么选择？

技术文章快速查找

JavaScript中的Navigator浏览器对象

js使用函数绑定技术改变事件处理程序的作用域

解决css和js的{}与smarty定界符冲突问题的两种方法

移动节点的jquery代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建