美文网首页
DOM- scroll家族及减速动画七

DOM- scroll家族及减速动画七

作者: charlotte2018 | 来源:发表于2017-11-14 16:58 被阅读42次

    缓动动画(完整封装)

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button>运动到200</button>
<button>运动到400</button>
<div></div>

<script>

    var　btn = document.getElementsByTagName("button");
    var　div = document.getElementsByTagName("div")[0];


    btn[0].onclick = function () {
        animate(div,200);
    }

    btn[1].onclick = function () {
        animate(div,400);
    }

    //缓动动画封装
    function animate(ele,target) {
        //要用定时器，先清定时器
        //一个萝卜一个坑儿，一个元素对应一个定时器
        clearInterval(ele.timer);
        //定义定时器
        ele.timer = setInterval(function () {
            //获取步长
            //步长应该是越来越小的，缓动的算法。
            var step = (target-ele.offsetLeft)/10;
            //对步长进行二次加工(大于0向上取整,小于0项下取整)
            step = step>0?Math.ceil(step):Math.floor(step);
            //动画原理： 目标位置 = 当前位置 + 步长
            ele.style.left = ele.offsetLeft + step + "px";
            //检测缓动动画有没有停止
            console.log(1);
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                //处理小数赋值
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },30);
    }
</script>

</body>
</html>

    筋斗云

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: rgba(0, 0, 0, 0.8);
        }
        .box {
            width: 800px;
            height: 42px;
            background: #fff url("images/wifi.png") right center no-repeat;
            margin: 200px auto;
            border-radius: 8px;
            position: relative;
        }
        ul {
            list-style: none;
            position: relative;
        }
        li {
            float: left;
            width: 83px;
            heit: 42px;
            text-align: center;
            font: 500 16px/42px "simsun";
            cursor: pointer;
        }
        span {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url("images/cloud.gif") no-repeat;
        }
    </style>
    <script>
        window.onload = function () {
            //需求1：鼠标放到哪个li上面，span对应移动到该li上。移开后，回到原位置。
            //需求2：鼠标点击那个li记录该li标签，移开的时候span回到该记录的li标签上。
            //步骤：
            //1.老三步
            //2.计数器


            //需求1：鼠标放到哪个li上面，span对应移动到该li上。移开后，回到原位置。
            //1.老三步
            var liArr = document.getElementsByTagName("li");
            var liWidth = liArr[0].offsetWidth;
            var span = document.getElementsByTagName("span")[0];
            //计数器
            var count = 0;


            //for循环绑定事件
            for(var i=0;i<liArr.length;i++){
                //自定义属性，然后绑定index属性为索引值
                liArr[i].index = i;
                //鼠标进入事件
                liArr[i].onmouseover = function () {
                    //让span运动到该li的索引值位置
                    //图片运动需要封装的方法
                    animate(span,this.index*liWidth);
                }
                //鼠标移开
                liArr[i].onmouseout = function () {
                    //让span运动到该li的索引值位置
                    //图片运动需要封装的方法
                    animate(span,count*liWidth);
                }
                //点击事件，记录功能
                liArr[i].onclick = function () {
                    //需要一个计数器，每次点击以后把所以只记录下来
                    //因为onmouseout事件要用到这个计数器，所以应该是一个全局变量
                    count = this.index;
                    animate(span,count*liWidth);
                }

            }

            //缓动动画封装
            function animate(ele,target) {
                clearInterval(ele.timer);
                ele.timer = setInterval(function () {
                    var step = (target-ele.offsetLeft)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    ele.style.left = ele.offsetLeft + step + "px";
                    console.log(1);
                    if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
                        ele.style.left = target + "px";
                        clearInterval(ele.timer);
                    }
                },18);
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <span></span>
        <ul>
            <li>首页新闻</li>
            <li>活动策划</li>
            <li>师资力量</li>
            <li>企业文化</li>
            <li>招聘信息</li>
            <li>公司简介</li>
            <li>上海校区</li>
            <li>广州校区</li>
        </ul>
    </div>
</body>
</html>

    scroll家族中的scrollWidth和scrollHeight

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            border: 10px solid #000;
        }
    </style>
</head>
<body>

<div class="box">
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。

</div>
<script>

    var div = document.getElementsByTagName("div")[0];
    //scrollWidth和scrollHeight不包括border和margin
    //scrollWidth = width + padding;
    // 不包括 border和margin;


    //高度有一个特点：如果文字超出了盒子，高度为超出盒子的内容的高。不超出是盒子本身高度
    //IE8以下，不包括IE8为盒子本身内容的多少。
    console.log(div.scrollWidth);
    console.log(div.scrollHeight);

</script>

</body>
</html>

    scrollTop的兼容问题

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style>
        body {
            height: 5000px;
        }
    </style>
</head>
<body>

<script>


    window.onscroll = function () {
        //没有dtd约束的dtd就是这个<!DOCTYPE html>
//        document.title = document.body.scrollTop;
        //有dtd约束的
//        document.title = document.documentElement.scrollTop;

        //兼容写法
//        document.title = document.body.scrollTop || document.documentElement.scrollTop;
//        document.title = document.body.scrollTop + document.documentElement.scrollTop;
//            document.title = window.pageYOffset;
//        alert(window.pageYOffset);
//        document.title = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
    }
</script>


</body>
</html>

    scroll()的封装

    <html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
            width: 5000px;
        }
    </style>
</head>
<body>


    <script>

        //需求：封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop
        //需求：封装一个兼容的scroll().返回值是json，用scroll().left获取scrollLeft

        window.onscroll = function () {
//        var json = scroll();
//        json.top;
            console.log(scroll().top);
            console.log(scroll().left);
        }



        function scroll(){
            //如果这个属性存在，那么返回值应该是0-无穷大
            //如果没有返回值是undefined；
            //只要判断不是undefined就可以调用此方法
            //练习使用此种封装
            if(window.pageYOffset !== undefined){
//                var json = {
//                    "top": window.pageYOffset,
//                    "left": window.pageXOffset
//                };
//                return json;
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
                //compatMode有dtd
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

            //简单封装（实际工作使用）
//            return {
//                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
//                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//            }
        }


    </script>
</body>
</html>

    12-固定导航栏

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;

        }

        #Q-nav1 {
            overflow: hidden;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

    <!--引入工具js-->
    <script src="my.js"></script>
    <script>
        window.onload = function () {
            //需求1：当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
            //需求2：当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed
            //步骤：
            //1.老三步。
            //2.判断 ，被卷曲的头部的大小
            //3.满足条件添加类，否则删除类


            //1.老三步。
            var topDiv = document.getElementById("top");
            var height = topDiv.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");

            window.onscroll = function () {
                //2.判断 ，被卷曲的头部的大小
                if(scroll().top > height){
                    //3.满足条件添加类，否则删除类
                    middle.className += " fixed";
                    //第二个盒子不占位置了，所以我们给第三个盒子一个上padding占位置，不出现盒子抖动问题
                    main.style.paddingTop = middle.offsetHeight+"px";
                }else{
                    middle.className = "";
                    //清零
                    main.style.paddingTop = 0;
                }
            }

        }
    </script>
</head>
<body>
    <div class="top" id="top">
        <img src="images/top.png" alt=""/>
    </div>
    <div id="Q-nav1">
        <img src="images/nav.png" alt=""/>
    </div>
    <div class="main" id="main">
        <img src="images/main.png" alt=""/>
    </div>
</body>
</html>

    my.js

    /**
 * Created by andy on 2015/12/8.
 */
function scroll() {  // 开始封装自己的scrollTop
    if(window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

//缓动动画封装
function animate(ele,target) {
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        var step = (target-ele.offsetLeft)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        ele.style.left = ele.offsetLeft + step + "px";
        console.log(1);
        if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
            ele.style.left = target + "px";
            clearInterval(ele.timer);
        }
    },18);
}

    两侧跟随的广告

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .img1 {
            position: absolute;
            top: 80px;
            left: 10px;
        }
        .img2 {
            position: absolute;
            top: 80px;
            right: 10px;
        }
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：屏幕滚动多少，两侧的图片联动向下移动等距离。
            //步骤：
            //1.老三步
            //2.获取被卷去的头部的值
            //3.移动两个盒子。（缓动移动）

            //1.老三步
            var imgArr = document.getElementsByTagName("img");

            window.onscroll = function () {
                //2.获取被卷去的头部的值
                var val = scroll().top;
                //3.移动两个盒子。（缓动移动）
                animate(imgArr[0],val+80);
                animate(imgArr[1],val+80);
            }

        }
    </script>

</head>
<body>
    <img class="img1" src="images/aside.jpg"/>
    <img class="img2" src="images/aside.jpg"/>
    <div>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
        水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>

    </div>
</body>
</html>

    返回头部小火箭

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: fixed;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
            border: 1px solid #000;
        }
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
            //难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。
            //      技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
            //步骤：
            //1.老三步
            var img = document.getElementsByTagName("img")[0];
            window.onscroll = function () {
                //被卷去的距离大于200显示小火箭，否则隐藏
                //2.显示隐藏小火箭
                if(scroll().top>1000){
                    img.style.display = "block";
                }else{
                    img.style.display = "none";
                }
                //每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
                leader = scroll().top;
            }
            //3.缓动跳转到页面最顶端（利用我们的缓动动画）
            var timer = null;
            var target = 0; //目标位置
            var leader = 0; //显示区域自身的位置
            img.onclick = function () {
                //技术点：window.scrollTo(0,0);
                //要用定时器，先清定时器
                clearInterval(timer);
                timer = setInterval(function () {
                    //获取步长
                    var step = (target-leader)/10;
                    //二次处理步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader +step;
                    //显示区域移动
                    window.scrollTo(0,leader);
                    //清除定时器
                    if(leader === 0){
                        clearInterval(timer);
                    }
                },25);
            }
        }
    </script>

</head>
<body>
    <img src="images/Top.jpg"/>
    <div>
        我是最顶端.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
      
    </div>
</body>
</html>

    楼层跳跃

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            height: 100%;
        }
        ul {
            list-style: none;
            height: 100%;
        }
        ul li {
            height: 100%;
        }
        ol {
            list-style: none;
            position: fixed;
            top: 80px;
            left: 50px;
        }
        ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            margin-top: -1px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li>鞋子区域</li>
        <li>袜子区域</li>
        <li>裤子区域</li>
        <li>裙子区域</li>
        <li>帽子区域</li>
    </ul>
    <ol>
        <li>鞋子</li>
        <li>袜子</li>
        <li>裤子</li>
        <li>裙子</li>
        <li>帽子</li>
    </ol>

    <script src="animate.js"></script>
    <script>
        //需求：点击ol中的li，屏幕滑动到对应的ul中的li的范围。
        //思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动。
        //步骤：
        //0.获取元素
        //1.指定ul和ol中的li的背景色，对应的li背景色相同
        //2.老三步。(获取元素并绑定事件)
        //3.利用缓动动画原理实现屏幕滑动
        //4.用scroll事件模拟盒子距离最顶端的距离。

        //0.获取元素
        var ul = document.getElementsByTagName("ul")[0];
        var ol = document.getElementsByTagName("ol")[0];
        var ulLiArr = ul.children;
        var olLiArr = ol.children;
        var target = 0;var leader = 0;var timer = null;
        //1.指定ul和ol中的li的背景色，对应的li背景色相同
        //设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素
        var arrColor = ["pink","blue","yellow","orange","green"];
        //利用for循环给两个数组的元素上色
        for(var i=0;i<arrColor.length;i++){
            //上色
            ulLiArr[i].style.backgroundColor = arrColor[i];
            olLiArr[i].style.backgroundColor = arrColor[i];


            //属性绑定索引值
            olLiArr[i].index = i;
            //2.老三步。(并绑定事件)循环绑定，为每一个li绑定点击事件
            olLiArr[i].onclick = function () {
                //***获取目标位置
                    //获取索引值。
                target = ulLiArr[this.index].offsetTop;

                //要用定时器，先清除定时器
                clearInterval(timer);
                //3.利用缓动动画原理实现屏幕滑动
                timer = setInterval(function () {
                    //(1).获取步长
                    var step = (target-leader)/10;
                    //(2).二次处理步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    //(3).屏幕滑动
                    leader = leader + step;
                    window.scrollTo(0,leader);
                    //(4).清除定时器
                    if(Math.abs(target-leader)<=Math.abs(step)){
                        window.scrollTo(0,target);
                        clearInterval(timer);
                    }
                },25);
            }
        }

        //4.用scroll事件模拟盒子距离最顶端的距离。
        window.onscroll = function () {
            //每次屏幕滑动，把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
            leader = scroll().top;
        }

    </script>


</body>
</html>

    相关文章

      网友评论

          本文标题：DOM- scroll家族及减速动画七

          本文链接：https://www.haomeiwen.com/subject/pujfvxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|DOM- scroll家族及减速动画七|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！