使用JS实现鼠标滚轮事件
网站需要实现鼠标滚轮滚一下,页面向下滑向下一个锚点,由于前面有个一样式必须用jQuery1.3.2,而好多滚轮事件都使用了更高版本的jQuery,于是就从网上找了找
<script type="text/javascript">
var sel_index = -1
var sel_max = $(".billboard-hero").length - 1;
function handle(delta) {
var s = delta + ": ";
if (delta < 0) {
sel_index++;
s += "您在向下滚……";
s += sel_index;
if (sel_index >= sel_max) sel_index = sel_max;
}
else {
sel_index--;
s += "您在向上滚……";
s += sel_index;
if (sel_index <= -1) sel_index = -1;
}
location.href = "#" + $(".billboard-hero")[sel_index].id;
}
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta)
handle(delta);
} window.addEventListener ? window.addEventListener("DOMMouseScroll", this.wheel, false) : null; document.onmousewheel = this.wheel;
</script>
其实和网上的差不多,主要是发现在Chrome和360急速模式下鼠标滚轮滚一下,会触发两次,所以需要
window.addEventListener ? window.addEventListener("DOMMouseScroll", this.wheel, false) : null;
不过本人水平有限,不明其中觉厉...
使用JS实现鼠标滚轮事件的更多相关文章
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- js整频滚动展示效果(函数节流鼠标滚轮事件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS鼠标滚轮事件解析
一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...
- js鼠标滚轮事件
不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...
- JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
- js鼠标滚轮事件兼容
JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...
- js中的鼠标滚轮事件
## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- VC 鼠标滚轮事件控制绘图的问题
问题描述: 在MFC中绘制数据曲线,通过鼠标滚轮来进行放大缩小操作.在使用滚轮事件时,发现如果数据量较大,会出现卡顿. 解决方案: 鼠标滚轮事件会进行重复绘图,考虑在鼠标滚轮结束之后再重绘: 在鼠标滚 ...
随机推荐
- linux中配置maven环境
一 . 下载maven http://maven.apache.org/download.cgi 二. 将maven解压到你的工具文件夹下 如我是解压到: /home/urc/tool下 三. ...
- Oracle--SQL Developer创建连接及使用
安装好Oracle之后,有几种方式可以来管理Oracle中的数据库,首先就是登陆网页版的界面:https://localhost:1158/em,这种方式管理的东西太多,使用起来有点不方便,第二种方式 ...
- linux shell突然显示-bash-4.1#的解决方法
老沙昨天还登录这个linux服务器,并且命令行好好的,今天突然在linux shell中不显示路径了,显示为-bash-4.1#. 以下是老沙的解决方案 vim ~/.bash_profile 如果没 ...
- mysql查询语句举例
1. 基础数据表 学生成绩表(stuscore): 姓名:name 课程:subject 分数:score 学号:stuid 张三 数学 89 1 张三 语文 80 1 张三 英语 70 1 李四 数 ...
- [GIF] Colors in GIF Loop Coder
In this lesson we cover the different methods for defining and animating colors in GIF Loop Coder. f ...
- Cocos2d-x实现粒子效果的三种方式
在Cocos2d-x中,实现粒子效果可以有三种方法. Normal 0 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·'"〈&l ...
- 动作-CCActionInterval之CCAnimation&CCAnimate
动画简单实例 v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#def ...
- 关于android应用--内存的优化
以下内容为转载自网上,然后自己加工贴合到一块的: 原文地址:http://www.cnblogs.com/frydsh/archive/2012/12/09/2810601.html http://w ...
- Android中的普通对话框、单选对话框、多选对话框、带Icon的对话框、以及自定义Adapter和自定义View对话框详解
对话框就是一个AlertDialog,但是一个简单的AlertDialog,我们却可以将它玩出许多花样来,下面我们就来一起总结一下AlertDialog的用法.看看各位童鞋在平时的工作中否都用到了Al ...
- 安卓开发中使用Genymotion模拟器
在安卓开发中,运行和调试自己所写的安卓程序需要用到模拟器 在一般情况下 是直接在这创建一个模拟器,但是这种自带的模拟器运行效率不佳,而且启动时间漫长 所以,我们可以换一款安卓模拟器 Genymotio ...