鼠标滚轮事务向上/向下的JavaScript示例(转载)

　　有一天，我正在上的利用，需要像谷歌地图功用，鼠标在对象上的Scroll事务引发一些JavaScript动做。

　　在JavaScript中处置鼠标滚轮很简单。大大都阅读器撑持鼠标滚动事务中的一个或其他体例。Mozilla供给window.addEventListener办法可用于挂钩鼠标滚动事务的处置法式。另一方面，Internet Explorer和Opera供给document.onmousewheel挂钩鼠标事务的处置法式。

　　源代码

　　让我们看到一个例子，在JavaScript中捕获鼠标滚轮事务。在我们的例子中，我们将有一个div块，挪动鼠标滚轮上下。以下是我们的例子的源代码：

　　html

　　head

　　title站长百科———Javascript教程/title

　　style

　　#scroll {

　　width: 250px;

　　height: 50px;

　　border: 2px solid black;

　　background-color: lightyellow;

　　top: 100px;

　　left: 50px;

　　position:absolute;

　　/style

　　script language="javascript"

　　window.onload = function()

　　//加进Mozilla的事务listerner

　　if(window.addEventListener)

　　document.addEventListener('DOMMouseScroll', moveObject, false);

　　//for IE/OPERA etc

　　document.onmousewheel = moveObject;

　　function moveObject(event)

　　var delta = 0;

　　if (!event) event = window.event;

　　// normalize the delta

　　if (event.wheelDelta) {

　　// IE and Opera

　　delta = event.wheelDelta / 60;

　　} else if (event.detail) {

　　// W3C

　　delta = -event.detail / 2;

　　var currPos=document.getElementById('scroll').offsetTop;

　　//计算对象的下一个位置

　　currPos=parseInt(currPos)-(delta*10);

　　//挪动对象的位置

　　document.getElementById('scroll').style.top = currPos+"px";

　　document.getElementById('scroll').innerHTML = event.wheelDelta + ":" + event.detail;

　　/script

　　/head

　　body

　　Scroll mouse wheel to move this DIV up and down.

　　div id="scroll"Dancing Div/div

　　/body

　　/html原文地址：