zoukankan html css js c++ java

(4)关于整屏滚动的一些想法

一，其中元素的尺寸大小

　　　　html结构：

　　　　　　　　<html>

　　　　　　　　　　　　<body>

　　　　　　　　　　　　　　　　<ul>

　　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　　</body>

　　　　　　　　</html>

　　　　　css中，关于关于整屏滚动百分比尺寸，很重要的一点：

　　　　　　　　　　　　html,body,ul,ul li{100%;

　　　　　　　　　　　　　　　　　　　　　 height:100%;}

　　　　　　其中，html,body,ul,ul li这四个点，一个都不能少，少了一个，整个页面就没效果了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            list-style:none;
        }
        html,body,ul,ul li{
            width:100%;
            height:100%;
        
        }
        ol{
        
            position:fixed;
            right:20px;
            top:50%;
            list-style:none;
            margin-top:-42px;

        }

        ol li{
            width:10px;
            height:10px;
            border:1px black solid;
            border-radius:10px;
            margin-top:5px;
            
            
            cursor: pointer;
            
        }
        .current{
            background:white;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

</body>
<script type="text/javascript">
    
        var ul = document.getElementsByTagName('ul')[0];
        var ulLis=ul.getElementsByTagName('li');
        var ol=document.getElementsByTagName('ol')[0];
        var olLis=ol.getElementsByTagName('li');


        var colorArr=['red','green','blue','pink','#565656']

        //赋予颜色

                for(var i=0;i<olLis.length;i++){
                    ulLis[i].style.background=colorArr[i];
                    ulLis[i].index=i;
                    olLis[i].index=i;
                };

                function Animation(target){
                    this.timer = setInterval(function(){
                        var leader=window.pageYOffset;
                        var step=(target-leader)/10;
                        step=step>0?Math.ceil(step):Math.floor(step);
                        leader+=step;
                        window.scrollTo(0,leader);
                        if(leader==target){
                            clearInterval(window.timer);
                        };
                    },30)
                };

                    




                    for(var i=0;i<olLis.length;i++){
                            olLis[i].onmouseover=function(){
                                 clearInterval(window.timer);//这里每触发一次鼠标事件，便必须清除上一次的定时器。这样，才不会使这一次的事件和上一次的事件发生冲突。
                                for(var i=0;i<olLis.length;i++){
                                    olLis[i].className='';

                                };
                                olLis[this.index].className='current';

                                var target = ulLis[this.index].offsetTop;

                                Animation(target);                            }
                        };
                    
                    function change(obj){
                        for( var i=0;i<olLis.length;i++){
                            olLis[i].className='';
                            olLis[obj].className='current';
                        }
                    };










                    function mouseWheel(event){
                        clearInterval(window.timer);
                        var index = event.target.index;//taeget.index是指ul中li，而li的index是要在前面赋予的。并不是自带的属性。
                        var length=ulLis.length;
                        wheelDelta = event.detail;

                        console.log(wheelDelta);
                        if(index === length-1){
                            target=ulLis[index-1].offsetTop;
                            wheelDelta<0?Animation(target):null;
                            console.log(index);
                            wheelDelta<0?change(index-1):null;
                            

                        }
                        else if(index === 0){
                            target=ulLis[index+1].offsetTop;
                            wheelDelta<0?null:Animation(target);
                            wheelDelta<0?null:    change(index+1);
                            console.log(index);
                        

                        }
                        else if(index>0||index<length-1){
                            target_01=ulLis[index-1].offsetTop;
                            target_02=ulLis[index+1].offsetTop;
                            wheelDelta>0?change(index+1):change(index-1);
                            wheelDelta>0?Animation(target_02):Animation(target_01);
                            console.log(index);


                        }
                    }

                    ul.addEventListener('DOMMouseScroll',mouseWheel,false);

</script>
    

</html>

上面是firefox版。其中DOMMouseScroll是只有火狐才有的api,是鼠标滚轮滑动。

查看全文

相关阅读:
Ajax
对于本地上关联了远程的git上的项目，删除现有的关联，然后关联新创建的git项目
 UNI-APP_uni-simple-router的快速上手(路由，nui路由拦截)
js之观察者模式和发布订阅模式区别
 Vue CLI 3.0脚手架如何在本地配置mock数据
 es6解构赋值和扩展运算符
 js Array数组详细操作方法及解析合集
 list排序
 java常用的object数据处理
 java 读写 txt 文件

原文地址：https://www.cnblogs.com/koutuzai/p/6691170.html