码迷,mamicode.com
首页 > Web开发 > 详细

js滚轮换切屏

时间:2017-05-26 11:00:17      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:size   move   dev   ret   javascrip   pop   att   oat   切换   

因为全项目不是自己写的,仅仅是帮别人写js滚轮代码,并且别人项目也还未上线。所以仅仅贴出自己写的那段部分代码,

效果:鼠标滚轮滚动时。网頁屏幕一屏一屏的上下切换

(下面代码在本地电脑的IE,chrome与FireFox这三个浏览器已经測试而且已经成功)

    var sum=0;
    var oTxt=document.getElementById("txt");
    var scrollFunc=function(e){

    var direct=0;
    var men = $(".menu_m").find(".menu").find("li");
    men.each(function (j) {
            if($(this).attr("class")=="m_selected"){
                sum=j;
            }
    });
    e=e || window.event;
    if(e.wheelDelta){//IE/Opera/Chrome
        if(navigator.appName==‘Netscape‘){
            // Chorme滚一次有两次的效果,所以加0.5
            if(e.wheelDelta>0){
                
                sum=parseFloat(sum-0.5);
                
            }
            else{
                
                sum=parseFloat(sum)+0.5;

            }
        }else{
            if(e.wheelDelta>0)
                sum=parseFloat(sum-1);
            else
                sum=parseFloat(sum+1);
        }
    }else if(e.detail){//Firefox
		//firefox向上向下的值不和上面的一样,可打印出看看
        if(e.detail>0)
                sum=parseFloat(sum+1);
            else
                sum=parseFloat(sum-1);
    }
		//sum出来的。以下就是你想做的事情,我这里是写与当前项目有所以相关联的屏目跳转,但记的要加return false; 要不然,在google和ie中时会出现,滚多了
        var sizes= $(".menu_m").find(".menu").find("li").size();
        if(sum>=0&&parseFloat(sum)<=parseFloat(sizes)-1){
            men.each(function (j) {
                $(this).removeClass("m_selected")
             });
              $(".menu_m").find(".menu li:eq("+sum+")").find("span").click();
              return false;
          }


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

js滚轮换切屏

标签:size   move   dev   ret   javascrip   pop   att   oat   切换   

原文地址:http://www.cnblogs.com/mthoutai/p/6906771.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!