js 捕捉滚轮的滚动
滚动方向区分为正负：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//去掉默认的contextmenu事件，否则会和右键事件同时出现。
document.oncontextmenu = function(e){
e.preventDefault();
};
document.getElementById("test").onmousedown = function(e){
if(e.button ==2){
alert("你点了右键");
}else if(e.button ==0){
alert("你点了左键");
}else if(e.button ==1){
alert("你点了滚轮");
}
}
}
</script>
</head>
<body>
<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
var scrollFunc=function(e){
ee=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>
<div style="width: 400px;height:400px;margin:auto;border:1px solid pink" id="test"></div>
</body>
</html>
js 捕捉滚轮的滚动的更多相关文章
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- JS鼠标滚轮事件解析
一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- js点击左右滚动+默认自动滚动类
js点击左右滚动+默认自动滚动类 点击下载
- js 实现单行文本滚动效果
js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
随机推荐
- 关于Python类属性与实例属性的讨论
标题名字有点长. 之所以想写这个文章是因为碰巧看到网上一篇关于Pyhon中类属性及实例属性区别的帖子.因为我之前也被这个问题困扰过,今天碰巧看到了这篇帖子,发现帖子的作者只是描述了现象,然后对原因的解 ...
- 手工利用Chrome浏览器“Javascript控制台”
1.打开Chrome浏览器,输入网址:http://forum.csdn.net/SList/HTMLCSS/ 2.按下“Ctrl+Shift+J”打开“Javascript控制台”工具 3.动态引用 ...
- iOS UI基础-6.0 UIActionSheet的使用
UIActionSheet是在iOS弹出的选择按钮项,可以添加多项,并为每项添加点击事件. 使用 1.需要实现UIActionSheetDelegate 协议 @interface NJWisdom ...
- MVC备忘笔记
1.增加样式 @Html.EditorFor(model => model.AssociationName, new { @class="inputtext input-220&quo ...
- 提高php代码质量的36个技巧的摘录
17.不要直接使用 $_SESSION 变量 简单例子: $_SESSION['username'] = $username; $username = $_SESSION['username']; ...
- Sa身份登陆SQL SERVER失败的解决方案
经常使用windows身份登陆,久而久之,基本不动怎么用SQL SERVER身份验证登陆,所以趁着有空,就解决一下一些问题~~ 解决方案: 第一步:打开SSMS,先使用windows身份登陆,右击服 ...
- JSON实例（单对象）
实例一: using System; using System.Web.Script.Serialization; namespace JSonDemo { //实体类 public class Pe ...
- 文本按列导入excel
打开excel,选择数据选项卡,自文本选项.
- npm 查看全局安装过的包
查看全局安装的包 npm list -g --depth 0 非全局安装的包 npm list --depth 0 如果不加参数 --depth 0会显示安装的包以及相关的依赖包,会显示的很详细.
- 20145329 《网络对抗技术》Web安全基础实践
实践的目标 理解常用网络攻击技术的基本原理.Webgoat实践下相关实验:SQL注入攻击.XSS攻击.CSRF攻击. 实验后回答问题 (1)SQL注入攻击原理,如何防御 攻击原理 SQL注入即是指we ...