JS 滚轮事件 滚屏效果

浏览器差异:firefox滚轮事件是DOMMouseScroll,其他浏览器使用的是mousewheel

firefox事件的event对象使用detail值表示滚轮反向,(-3)表示向上,(3)表示向下。

其他浏览器使用wheelDelta值表示表示滚轮方向,(120)表示向上, (-120)表示向下。

监听事件,删除监听事件:IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener。

有Kissy版本和Jquery版本 (不过Jquery的动画有些卡.....)

<!DOCTYPE html>
<html>
<head>
<meta chartset="utf-8"/>
<title></title>
<style type="text/css">
*{padding: 0px; margin: 0px;}
.box{width: 100%;}
.box1,.box3,.box5{background: #ccc;}
.box2,.box4,.box6{background: #cca;}
</style>
</head>
<body>
<div id="dd">
   <div class="box box1"></div>
   <div class="box box2"></div>
   <div class="box box3"></div>
   <div class="box box4"></div>
   <div class="box box5"></div>
   <div class="box box6"></div>
</div>
<!-- <script src="http://g.tbcdn.cn/kissy/k/1.4.4/seed-min.js"></script> -->
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">
// 不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持);
// 判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
//addachEvent[应用IE浏览器],addEventListener[应用非IE浏览器];事件侦听方法,参数【事件,函数,是否冒泡】

</script>
<script type="text/javascript">
// Jquery
$(function(){
   var isruning=false,//上锁,判断是否在滚动
       nowxh=0;//当前屏数索引
   var sc_height=$(window).height();//每一屏的高度
   $(‘.box‘).css(‘height‘,$(window).height()+‘px‘);
   var length=$(‘.box‘).length;//一共的屏数

// 滚动函数
var scrollFunc=function(e){
   e=e || window.event;
   if(!isruning){
      isruning=true,dir=e.wheelDelta ? e.wheelDelta :e.detail;      
      if(dir>0){//IE/Opera/Chrome 
         if(nowxh>0) nowxh-=1;
         else nowxh=0;

}else{
         if(nowxh<(length-1)) nowxh+=1;
         else nowxh=length-1;
      }
      
      $("html,body").stop().animate(
         {scrollTop:nowxh*sc_height},
         ‘esea‘,
         function(){isruning=false});

e.preventDefault();
   }

/*注册事件*/ 
if(document.addEventListener){ 
    document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

});
</script>
<script type="text/javascript">
// kissy版
// KISSY.use("node,event",function(S,Node,Event){
// var $=S.all;
// var isruning=false,//上锁,判断是否
//     nowxh=0;
// var sc_height=$(window).height();
// $(‘.box‘).css(‘height‘,$(window).height()+‘px‘);
// var length=$(‘.box‘).length;
// // var events="mousewheel";
// Event.on(document, "mousewheel",function(e){
//    if(!isruning){
//       isruning=true,dir=e.deltaY;
//       if(dir>0){
//          if(nowxh>0)
//          nowxh-=1;
//          else
//          nowxh=0;
//       }else{
//          if(nowxh<(length-1))
//          nowxh+=1;
//          else
//          nowxh=length-1;
//       }
//       $(window).animate({"scrollTop":nowxh*sc_height},0.5,"ease",function(){isruning=false});
//       // showitemI(nowxh);
//    }
//    e.preventDefault();
// });

// });
</script>
</body>

</html>

参考文章:js中鼠标滚轮事件详 http://www.cnblogs.com/walkingp/archive/2010/02/03/1662872.html

【Js】鼠标滚轮事件http://www.cnblogs.com/iisoc/archive/2013/01/25/ic-.html

时间: 2024-08-14 09:48:17

JS 滚轮事件 滚屏效果的相关文章

js实现双击滚屏效果

<body onDblClick="s=setInterval('scrollBy(0,2)',50)" onMousedown="clearInterval(s)" >

FineReport中如何实现自动滚屏效果

对于一些特殊的模板,可能为了展示的更加丰富.全面会在一个页面放置很多图表.表格等内容.由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况.这样我们就需要用到JS滚屏效果来解决,这里主要介绍在FineReport中的具体制作方法. 添加加载结束事件 点击菜单模板>模板web属性>分页预览设置,选择"为该模板单独设置",添加一个"加载结束"后事件,如下图所示: JS代码如下: //从页面加载结束后延迟2000MS执行事件(滚动) setTimeout

js滚轮换切屏

由于全项目不是自己写的,只是帮别人写js滚轮代码,而且别人项目也还未上线,所以只贴出自己写的那段部分代码, 效果:鼠标滚轮滚动时,网頁屏幕一屏一屏的上下切换 (以下代码在本地电脑的IE,chrome与FireFox这三个浏览器已经测试并且已经成功) var sum=0; var oTxt=document.getElementById("txt"); var scrollFunc=function(e){ var direct=0; var men = $(".menu_m&

JS滚轮事件(mousewheel/DOMMouseScroll)了解

已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事件的方法(dispatchEvent). 显然,适当的温习,翻阅以前的东西,或者自己空余时间处理相关的东西还是有必要的.其实,细想,东西记不住是自己自身原因,在折腾的时候就没有想方设法牢记(而不是通过反复使用记住).比方说getBoundingClientRect就是

JS滚轮事件(mousewheel/DOMMouseScroll)了解 (转载)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3175 一.学无止境.温故知新 //zxx: 本段与技术无关,一些很个人的吐槽,可以跳过已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记得现代浏览器下触发DOM自定义事

js 滚轮事件 滚轮焦点图(轮播图)

利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" /> <meta name="viewport" content=

jquery实现自动滚屏效果,适用用公告新闻等滚屏

从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</title> <style ty

js滚轮事件需要注意的兼容性问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div { width: 300px; height: 300px; background: red; } </style> <script> function addEven

编程练习--模拟安装程序时的信息滚屏效果

第一次安装Discuz时,有一个数据库的安装过程,看到会自动滚屏显示的信息,感觉非常好奇,由于当时主要从事后端程序的开发,对前端这些神奇的效果,也只能是欣赏一下子. 现在突然想到要自己来实现这个效果,作为今天的编程练习,实属对当时那个效果的怀念. 先上一个朴素无奇的静态效果图: 点这里查看动态的在线演示效果:http://sandbox.runjs.cn/show/jvl11v0d 核心代码: function install(){ if(message.length>0){ var text