javascript - 做了一个fullpage,但是在滚动位置方面有点不理解,请前辈们赐教
高洛峰
高洛峰 2017-04-11 10:31:39
[JavaScript讨论组]



      
      
      DEMO
    


    

1

2

3

var eventUtil={
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent('on'+type,handler);
        }else{
            element['on'+type]=handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type]=null;
        }
    }
}
window.onload=function(){
    var oDelta=document.getElementById('Delta');
    var op=oDelta.getElementsByTagName("p");
    var timer=null;
    var num=0;
    eventUtil.addHandler(oDelta,'mousewheel',fullpage);
    function fullpage(){
        var e=e||window.event;
        var down=null;
        if(e.wheelDelta){
            down=e.wheelDelta;//IE,Chrome
        }else{
            down=-e.detail;//FF
        }
        counter(down);
    }
    function counter(count){
        if(count>0){
            //向上滚动
            num--;
            if(num<-2){
                num=0;
            }
            op[0].style.marginTop=100*num+"vh";
        }else{
            //向下滚动
            num++;
            if(num>2){
                num=0;
            }
            op[0].style.marginTop=-100*num+"vh";
        }
    }
}

我想做一个当我向下滑到第三个就转到第一个,但是在第一个的时候不可向上滑的效果需要怎么做?就是1-2-3-1-2-3 3-2-1-stop的效果?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
PHPz

向上滚动的时候,marginTop那里也应该是负值,所以将你的counter函数改成下面这样应该就是你想要的效果,不知道我理解得对不对

function counter(count){
        if(count>0){
            //向上滚动
            if(num===0){
                return;
            }
            num--;
        }else{
            //向下滚动
            if(num>=2){
                num=-1;
            }
            num++;
        }
        op[0].style.marginTop=-100*num+"vh";
    }
迷茫

弄个内部的slide页面呗

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号