zoukankan      html  css  js  c++  java

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

     伴随着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);
});

    题来了：
    当滚动条滚动时，蓝色块会抖动，尤其在ie9和chrome下比较明显。
    感兴趣的朋友可以试试写写哈O(∩_∩)O
  • 相关阅读:
    PE格式详细讲解2 系统篇02|解密系列
    结构体与共用体06 零基础入门学习C语言58
    PE格式详细讲解3 系统篇03|解密系列
    我的学习路
    结构体与共用体07 零基础入门学习C语言59
    PE格式详细讲解2 系统篇02|解密系列
    PE格式详细讲解3 系统篇03|解密系列
    Windows Azure 社区新闻综述（#61 版）
    Django 现可在 Windows Azure 上使用
    Windows Azure Active Directory正式发布：已提供了超过 2650 亿个身份验证和服务了290万个组织!
  • 原文地址：https://www.cnblogs.com/kuikui/p/2979794.html
Copyright © 2011-2022 走看看