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) ...
随机推荐
- 【Java】ArrayList 的 toArray() 方法抛出 ClassCastException 异常
第一次用这个方法,结果冒出个莫名其妙的异常来: String[] names = (String[]) mTags.toArray(); 结果会抛出 java.lang.ClassCastExcept ...
- hdu 5207 BestCoder Round #38 ($) Greatest Greatest Common Divisor
#include<stdio.h> #include<string.h> #include<math.h> ]; ]; int main() { int sb; s ...
- ios开发之简单实现loading动画效果
最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...
- Gentoo网络管理方法总结
OpenRC/netifrc Netifrc is a collection of modules created to configure and manage network interfaces ...
- Django之模型管理器filter处理问题
今天上班第一天,恭祝所有朋友新年快乐!! 最近在github上发现一个还不错的基于Django的开源博客项目,不过也许是版本原因,其中代码存在着些许问题,今天主要记录下其中的模型处理方法的部分. 这段 ...
- CNN计算过程
- 关于手动关闭BootStrap模态框
在网上找手动关闭BootStrap模态框的解决方法,说是(需要引用bootstrap.js等): $("#myModal").modal('hide'); 但是我发现我的只能关闭 ...
- tabBar 选中默认蓝色 ，取消选中（自定义）
- (void)viewDidLoad { [super viewDidLoad]; // [self _initSubViewControllers]; // [self _custom ...
- iOS 如何随意的穿插跳跃，push来pop去
OS 如何随意的穿插跳跃,push来pop去 主题思想:如A.B.C.D 四个视图控制器 想要在 A push B 后, B 在push 到 D ,然后从 D pop 到 C ,在从 C pop 的A ...
- OvS: data structure analysis
hmap usage: in include/openvswitch/shash.h, we have: at first glance, it is a hmap encapsulated in s ...