js整频滚动展示效果（函数节流鼠标滚轮事件）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<link href="reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#d1{ width:100%; height:850px; background:#069;overflow:hidden;}
#d2{ width:100%; height:850px; background:#933;overflow:hidden;}
#d3{ width:100%; height:850px; background:#060;overflow:hidden;}
#d4{ position:fixed; top:50%; right:0;}
#d4 a{ display:block; width:100px; height:100px;}
#d4 .hover{ background:#063;}
.duoyu{ width:100%; height:500px;}
</style>
<body>
<div id="d4">
<ul>
<li class="hover"><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
</ul>
</div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div class="duoyu"></div><!--底部要加留底，否则在滚到最后一个已经到底了的时候位置永远到不了设置的滚动高度，就会一直执行死循环-->
<script src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function(){
var num=0,timer,num_max=2,dheight=850,//num_max是滚动个数减1;dheight是每个滚动元素的高度；
nid=$("#d4 li"),
d3=document.getElementById("d3"),
d2=document.getElementById("d2"),
d1=document.getElementById("d1");
function getScrollTop(e){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
return document.documentElement.scrollTop;
}
else if(document.body.scrollTop){
return document.body.scrollTop;
}
else{return scrollTop}//滚到最上方的是就是自己设置的scrollTop变量
}
function setScrollTop(x){
if(document.documentElement&&document.documentElement.scrollTop){
document.documentElement.scrollTop=x;
}
else if(document.body.scrollTop){
document.body.scrollTop=x;
}
else{window.scrollTo(0,x)}//滚到最上方时时没有上面2个属性的只有window.scrollTo(0,x)
} function throttle(method,context){//函数节流，method是要执行的函数，context是作用域函数
clearTimeout(method.tId);//先清除之前设置的定时器，定时器ID存储在函数的tId属性中
method.tId=setTimeout(function(){method.call(context)},100)//使用call（）来确保方法在适当的环境运行，如果没第2个参数就在全局执行
} function gun(e){
e=e||window.event;
var top=getScrollTop();
num=Math.ceil((top+10)/dheight)-1;
//留空10个像素防止零界点和滚动事件冲突；
nid.eq(num).addClass("hover").siblings().removeClass();
console.log(num);
}
window.onscroll=function(e){
throttle(gun);
}; nid.click(function(){//我很懒~！这里和下面的class切换用了JQ,不用也可以的
$(this).addClass("hover").siblings().removeClass();
num=nid.index($("#d4 li.hover"));
//console.log(num);
//(document.documentElement.scrollTop!=null)?scrollTOPl=document.documentElement.scrollTop:scrollTOPl=document.body.scrollTop;
settimer(num*dheight);
})
//$("a").index($("a.hover"))
function settimer(num){
clearInterval(timer);
timer=setInterval(function(){
var newss=getScrollTop();
var speed=(num-newss)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//如果newss等于0，（num-newss）/8那么speed也一直等于0，因为去整数了
if(newss==num){clearInterval(timer);
console.log(speed);
if(document.addEventListener){//重新添加事件监听
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
}
else{
console.log(speed);
//if(speed==0){speed=num*dheight/8};
setScrollTop(newss+speed);
}
},30)}; function scrollFunc(e){
e=e || window.event;
if(e.preventDefault) {
// Firefox
e.preventDefault();
} else{
// IE
window.event.returnValue = false;
}
if(document.removeEventListener){//去除事件监听，让程序不能连续执行，要先执行完再添加事件监听
document.removeEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=function(){return false};//使他等于NULL居然无效，不知道什么原因 if(e.wheelDelta){//IE/Opera/Chrome
if(e.wheelDelta<0){
//alert("向下")
if(num<num_max){
num++;
nid.eq(num).addClass("hover").siblings().removeClass();}
settimer(num*dheight);//要放到外面要不没有绑定到滚轮的事件监听
}
else{
//alert("向上")
if(num>0){
num--;
nid.eq(num).addClass("hover").siblings().removeClass();}
settimer(num*dheight);
}
}else if(e.detail){//Firefox
if(e.detail>0){
//alert("向下")
if(num<num_max){
num++;
nid.eq(num).addClass("hover").siblings().removeClass();}
settimer(num*dheight);
}
else{
//alert("向上")
if(num>0){
num--;
nid.eq(num).addClass("hover").siblings().removeClass();}
settimer(num*dheight);
}
}
}
/*注册鼠标滚轮事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
})
</script>
</body>
</html>
js整频滚动展示效果（函数节流鼠标滚轮事件）的更多相关文章
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- js鼠标滚轮事件兼容
JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...
- JS鼠标滚轮事件解析
一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...
- JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
- js中的鼠标滚轮事件
## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...
- JS在项目中用到的AOP, 以及函数节流， 防抖, 事件总线
1. 项目中在绑定事件的时候总想在触发前,或者触发后做一些统一的判断或逻辑,在c#后端代码里,可以用Attribute, filter等标签特性实现AOP的效果,可是js中没有这种用法,归根到本质还是 ...
- js文本公告滚动展示，图片轮播....
1.引入文件 <link rel="stylesheet" href="/css/liMarquee.css"> <script src=&q ...
- js实现侧边栏信息展示效果
目前的网页都右侧边栏,有的是在左侧,类似于导航栏,如一些购物商城,还有一些是在网页的右下角,一般是提示客服信息和微信/QQ等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...
- JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）
onmousewheel (FireFox不支持此事件) // IE/Opera/Chrome/Safari document.body.onmousewheel = function(event) ...
随机推荐
- HDU 5895 Mathematician QSC
矩阵快速幂,欧拉定理. $g(n)$递推式:$g(n)=5g(n-1)+5g(n-2)-g(n-3)$,可以构造矩阵快速求递$n$项,指数很大,可以利用欧拉定理降幂. #pragma comment( ...
- Ubuntu 14.04 配置FTP
配置Ubuntu 14.04的FTP服务,通过Windows远程访问Ubuntu 14.04的同时,可以实现windows和Ubuntu之间的文件交换传输.在多用户环境下,每一个用户都可以通过自己的帐 ...
- <hdu - 3999> The order of a Tree 水题 之 二叉搜索的数的先序输出
这里是杭电hdu上的链接:http://acm.hdu.edu.cn/showproblem.php?pid=3999 Problem Description: As we know,the sha ...
- spark MLLib的基础统计部分学习
参考学习链接:http://www.itnose.net/detail/6269425.html 机器学习相关算法,建议初学者去看看斯坦福的机器学习课程视频:http://open.163.com/s ...
- something funny
something funny. #include <stdio.h> #include <windows.h> #define N 50 HANDLE hConsole; v ...
- C#拾遗（二、函数）
1. 参数数组.C#的特色,允许函数参数的最后指定一个参数数组,可以使用个数不定的参数调用,用params关键字定义 static double SumVals(params double[] val ...
- CreateProcess函数诡异的表现
场景:程序A使用CreateProcess函数去启动另一个程序(.exe)文件,在绝大部分情况下是可以成功启动的,但是在某些电脑上无效. 因为这“某些电脑”实在不好找,终于有一天借到一台这样的电脑. ...
- MySQL的备份和恢复
MySQL的备份和恢复 备份数据:mysqldump –uroot –p123456 dbname table [option] > dbname.sql mysqldump常用参数option ...
- html中 iframe子页面 与父页面之间的方法调用 ;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jqgrid参数
jqGrid参数 名称 类型 描述 默认值 可修改 url string 获取数据的地址 datatype string 从服务器端返回的数据类型,默认xml.可选类型:xml,local,json, ...