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) ...
随机推荐
- CodeForces 687C The Values You Can Make
$dp$,背包. $f[i][j][s]$表示前$i$个物品,凑出$j$价格的情况下,能否凑出$s$价格,$f[i][j][s]=1$表示能,否则不能. 转移很简单:如果$f[i][j][s]=1$, ...
- 回文质数 Prime Palindromes
题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,000 ...
- 关于IIS和.NET 4.0的问题总结（转）
注册asp.net 4.0 到iis 如果没有按照正常的先装iis后装.net的顺序,可以使用此命令重新注册一下 运行->cmd Microsoft Windows [版本 6.1.7601 ...
- .Net 生成二维码【超简易，仅供学习】
1,首先下载DotNetBarcode.dll文件 下载地址: http://dl.downyi.com/dotnetbarcode_dll.rar 2,调用方式 string path = @&qu ...
- 更新BLUZ
bluez的编译安装依赖好些软件,下面记录下,可能比较简陋. configure: error: GLib >= 2.28 is required解决方法:一般glib会被安装,主要是一些开发文 ...
- CVE-2015-5122 简要分析(2016.4)
CVE-2015-5122 简要分析 背景 最近在学习Flash漏洞的分析,其与IE漏洞的分析还是有诸多的不同(不便)之处,折腾了一阵子终于克服了没有符号表.Flash的超时定时器等问题.所以找到了去 ...
- 表格单元格td设置宽度无效的解决办法 .
http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...
- clone()方法、深复制和浅复制
clone方法 Java中没有明确提供指针的概念和用法,而实质上没个new语句返回的都是一个指针的引用,只不过在大部分情况下开发人员不需要关心如何去操作这个指针而已. 在实际编程中,经常会遇到从某个已 ...
- VMWARE player 如何让 win2012 guest os 支持HYPER-V
在 vm player 下安装了 win2012 r2, 但是启用 hyper-v的时候,提示不支持, 这时候要修改 Open the file Location for this Virtual M ...
- Python读取ini配置文件
db_config.ini [baseconf] host=127.0.0.1 port=3306 user=root password=root db_name=evaluting_sys [con ...