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) ...
随机推荐
- IOS 加载网络图片2
//1. NSData dataWithContentsOfURL // [self.icon setImage:[UIImage imageWithData:[NSData dataWithCont ...
- iOS开发系列-UI基础-KVC
这些知识是UI初级学习的,目前我还在学习中,适合初学者看 KVC—Key Value Coding 也就是键值编码 是一种获取值和设置值的方式 当我们创建一个类文件,为这个类设置成员属性的时候: 创建 ...
- Python学习笔记——基础篇2【第三周】——计数器、有序字典、元组、单(双)向队列、深浅拷贝、函数、装饰器
目录 1.Python计数器Counter 2.Python有序字典OrderredDict 3.Python默认字典default 4.python可命名元组namedtuple 5.Python双 ...
- AutoCAD 2009及以上 32位&64位 官方原版下载地址
AutoCAD 2017 AutoCAD 2017 简体中文版 32位 http://trial2.autodesk.com/NET17SWDLD/2017/ACD/DLM/AutoCAD_2017_ ...
- DUIlib使用Fastreport--报表简单使用
fastreport是一个简单优秀的报表,fastreport更多是和delphi联合使用预览和打印数据的.我在开始使用duilib做项目时,打印和数据预览都是自己绘制的,这样不仅绘制麻烦费事费事,而 ...
- centos redis 安装
# wget http://download.redis.io/releases/redis-2.8.6.tar.gz # tar xzf redis-2.8.6.tar.gz # cd redis- ...
- mx51 IPU 透明处理
Freescale MX51平台的透明处理根据bpp(bits_per_pixel)不同,处理方式有所不同. 透明处理涉及到两个图层的合并,这个合并操作是MX51 IPU的DP(Display pro ...
- iPhone doesn’t support any of GongShangJ.app’s architectures. You can add iPhone’s armv7s architectu
iPhone doesn't support any of GongShangJ.app's architectures. You can add iPhone's armv7s architectu
- drupal7 sql接口笔记
1.查询: execute() ->fetch():从结果集中取出一行作为一个对象 execute() ->fetchField():获取单个值 execute() ->fetchA ...
- Crazy-Links
1. 数据模型 2. Admin Formset RED is customized class |- object |- AdminForm |- InlineAdminForm |- BaseFo ...