weistar

浏览: 520042 次
性别:
来自: 武汉

最近访客更多访客>>

jink_xiaowei

bajiou

shineway001

torchcsj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Mouse Scroll Event Up/Down Example in JavaScript

博客分类：

JAVASCRIPT

javascript

文章源自：http://viralpatel.net/blogs/javascript-mouse-scroll-event-down-example/

Mouse Scroll Event Up/Down Example in JavaScript

The other day I was working on an App that required Google Map like functionality where Mouse Scroll event on an object triggered some action in JavaScript.

Handling Mouse Wheel in JavaScript is quite simple. Most of the browsers support Mouse Scroll Event in one or other way. Mozilla provides window.addEventListener method that can be used to hook a handler for mouse scroll event. Internet Explorer and Opera on the other hand provides document.onmousewheel handler to hook the mouse event.

Source Code

Let us see an example for catching mouse scroll wheel event in JavaScript. In our example we will have a small DIV that moves up and down on scroll of mouse wheel. Following is the source code of our example:

<html>
<head>
<title>Mouse Scroll Wheel example in JavaScript - ViralPatel.net</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()
{
    //adding the event listerner for Mozilla
    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;
 
    //calculating the next position of the object
    currPos=parseInt(currPos)-(delta*10);
 
    //moving the position of the object
    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>

分享到：

Sum HTML Textbox Values using jQuery / J ... | Changing Form Input (Textbox) Style on F ...

2013-05-28 11:42
浏览 2401
评论(0)
分类:Web前端
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Mouse Scroll Event Up/Down Example in JavaScript

Mouse Scroll Event Up/Down Example in JavaScript

Source Code

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Mouse Scroll Event Up/Down Example in JavaScript

Mouse Scroll Event Up/Down Example in JavaScript

Source Code

评论

发表评论

相关推荐

javascript arguments(转)

使用 RequireJS 优化 Web 应用前端

JavaScript冒泡型/捕获型事件、阻止冒泡和默认行为

JavaScript1.6数组新特性和JQuery的几个工具方法

JavaScript实现yield代码分析

Javascript模块化编程（三）：模块化编程实战，试用SeaJS

Javascript模块化编程（二）：模块化编程实战

JavaScript模块化编程（一）：模块原型和理论概念详解

sea.js教程

不依赖浏览器控制台的JavaScript断点调试方法

超实用的JavaScript技巧及最佳实践

关于查找中文文本的正则表达式

javascript夜间模式

JavaScript 的性能优化：加载和执行

如何忘却jQuery，开始使用JavaScript原生API

javascript —— 位操作符应用

DIV模拟的自定义滚动条

轻松弄清JavaScript中的offset、scroll、client

JavaScript异步编程助手：Promise模式

Javascript继承

最近访客更多访客>>