活动页和题来了（滚动抖动）

最新推荐文章于 2024-11-08 14:35:14 发布

weixin_33978044

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量73

点赞数

文章标签： javascript ViewUI

伴随着html5和css3的成熟，页面展现的越来越绚丽越吸引人，尤其体现在各大网站的专题活动上。

现在写了一个简略的框框。

实现思想：
当滚动条滚动时，滚动到底部切换到下一屏，滚动到顶部时切换到上一屏。
点击按钮时滚动到对应的屏。

代码简略：

1、滚动条滚动方向，-1向下，1向上，注意：如用ie，请用ie9以上的浏览器看效果。

document.addEventListener(mousewheel,function(e){
    e = e || window.event;
    if(!isFirefox){
        direct = e.wheelDelta>0?-1:1;
    }
    else{
        direct = e.detail<0?-1:1;
    }
},false);

2、滚动到那一屏

$(document).scroll(function(){
    rollH = $(this).scrollTop();
    if(islock){
        if((rollH===docH-winH) && (direct === 1 )){
            num++;
            if(num>5){
                num = 5;
                return;
            }
            if(!((num===5)||(num===0))){
                islock = false;
            }
            running(num);
        }
        else if((rollH ===0)&&(direct === -1)){
            num--;
            if(num<0){
                num = 0;
                return;
            }
            if(!((num===5)||(num===0))){
                islock = false;
            }
            running(num);
        }
    }
});

3、切换滚动，在切换那一时刻，将滚动条隐藏，结束后再显示。除了第一屏外，其他的屏都是距离顶端有1px距离。

var islock = true;
test.animate({"left":"0px","top":"0px"},500,function(){
    $(document).scrollTop(0);
    setTimeout(function(){
        islock=true;
        $(document).scrollTop(1);
        $("body").removeClass("bodyon");
    },500);
});

<!DOCTYPE html> <html> <head> <title>活动专题---www.cnblogs.com/kuikui</title> <meta charset="utf-8"> <script src="http://files0.cnitblog.com/kuikui/jquery.js"></script> <style> body{position: relative; height: 1000px;} .bodyon{overflow:hidden;} .mbtns{ position: absolute; left:0px; top:0px; width: 100%; height: 30px; line-height: 30px;text-align: center; z-index: 10; background: rgba(255,255,255,0.5);} .mbtns input{border:0px;} .mbtns .on{background:#F00;} .wrapper{height:1000px;overflow:hidden; width:960px; margin: 0px auto;} #test{position:relative;width:5000px;height:7000px;border:1px solid #000;margin:0px auto;overflow:hidden;} .mtest{position:absolute;left:0px;top:0px;width:960px;height:1000px;} .mtest1{background:#FF0000;left:0px;top:0px;z-index:1;} .mtest2{background:#00FF00;left:2000px;top:2000px;} .mtest3{background:#0000FF;left:0px;top:3000px;} .mtest4{background:#FFFF00;left:1000px;top:4000px;} .mtest5{background:#00FFFF;left:3000px;top:5000px;} .mtest6{background:#FF00FF;left:0px;top:6000px;} </style> </head> </html> <body> <div class="mbtns"> <input type="button" value="btn1" class="mbtn on"> <input type="button" value="btn2" class="mbtn"> <input type="button" value="btn3" class="mbtn"> <input type="button" value="btn4" class="mbtn"> <input type="button" value="btn5" class="mbtn"> <input type="button" value="btn6" class="mbtn"> </div> <div class="wrapper"> <div id="test"> <div class="mtest mtest1"></div> <div class="mtest mtest2"></div> <div class="mtest mtest3"></div> <div class="mtest mtest4"></div> <div class="mtest mtest5"></div> <div class="mtest mtest6"></div> </div> </div> <script> var num = 0; var direct = 0; var islock = true; var isFirefox = /firefox/ig.test(navigator.userAgent); var mousewheel = isFirefox?"DOMMouseScroll":"mousewheel"; var docH = $(document).height(); var winH = $(window).height(); var rollH = 0; var test = $("#test"); function running(num){ $("body").addClass("bodyon"); $(document).scrollTop(0); $(".mbtns input").removeClass("on").eq(num).addClass("on"); switch(num){ case 0: test.animate({"left":"0px","top":"0px"},500,function(){$(document).scrollTop(0);setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);}); break; case 1: test.animate({left:"-2000px",top:"-2000px"},500,function(){$(".mem7").addClass("mrun7");setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);}); break; case 2: test.animate({left:"0px",top:"-3000px"},500,function(){$(".mem8").addClass("mrun8");setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);}); break; case 3: test.animate({left:"-1000px",top:"-4000px"},500,function(){setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");$("body").removeClass("bodyon");},500);}); break; case 4: test.animate({left:"-3000px",top:"-5000px"},500,function(){setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);}); break; case 5: test.animate({left:"0px",top:"-6000px"},500,function(){setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);}); break; } } $(".mbtns input").click(function(){ islock = false; num = $(this).index(); running(num); }); document.addEventListener(mousewheel,function(e){ e = e || window.event; if(!isFirefox){ direct = e.wheelDelta>0?-1:1; } else{ direct = e.detail<0?-1:1; } },false); $(window).resize(function(){ docH = $(document).height(); winH = $(window).height(); }); $(document).scroll(function(){ rollH = $(this).scrollTop(); if(islock){ if((rollH===docH-winH) && (direct === 1 )){ num++; if(num>5){ num = 5; return; } if(!((num===5)||(num===0))){islock = false;} running(num); } else if((rollH ===0)&&(direct === -1)){ num--; if(num<0){ num = 0; return; } if(!((num===5)||(num===0))){islock = false;} running(num); } } }); </script> </body> </html>

运行代码

题来了：
当滚动条滚动时，蓝色块会抖动，尤其在ie9和chrome下比较明显。
感兴趣的朋友可以试试写写哈O(∩_∩)O

<!DOCTYPE html> <html> <head> <title>滚动抖动---www.cnblogs.com/kuikui</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://files0.cnitblog.com/kuikui/jquery.js"></script> <style> *{margin: 0px;padding: 0px;} body{position: relative; overflow-x:hidden;} .test{position: absolute; left: 50%; width: 2000px; height: 700px; margin-left: -1000px; overflow: hidden;} .test1{top:0px; background: #FF0000;} .test2{top:700px; background: #00FF00;} .main{ position: relative; width: 960px; height: 100%; margin: 0px auto; background: rgba(255,255,255,0.3);} .exmp{ position: absolute; width:100px; height: 100px;} .exmp1_1{left:50px; top:0px; border:2px solid #0000FF;} .exmp1_2{right: 50px; top:696px; border:2px solid #FFFF00;} .exmp2_1{left:50px; top:0px; border:2px solid #0000FF;} .exmp2_2{right: 50px; top:696px; border:2px solid #FFFF00;} </style> </head> <body> <div class="test test1"> <div class="main"> <div class="exmp exmp1_1"></div> <div class="exmp exmp1_2"></div> </div> </div> <div class="test test2"> <div class="main"> <div class="exmp exmp2_1"></div> <div class="exmp exmp2_2"></div> </div> </div> <script> var exmp1_1=$(".exmp1_1"),exmp1_2=$(".exmp1_2"); var exmp2_1=$(".exmp2_1"),exmp2_2=$(".exmp2_2"); $(document).scroll(function(){ var tmp = $(this).scrollTop(); if(tmp<800){ test1(tmp); } else if(tmp>800 && tmp <1600){ test2(tmp); } }); function test1(m){ exmp1_1.css("top",m+"px"); exmp1_2.css("top",(-m+686)+"px"); } function test2(m){ exmp2_1.css("top",(m-800)*2+"px"); exmp2_2.css("top",(-m+800+686)+"px"); } </script> </body> </html>

运行代码