每天10个前端知识点：运动框架应用篇(中)

今天更新两篇，请叫我高产汪！
(,,• ₃ •,,)感觉天天在给自己打广告。

---

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

---

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

本次内容：运动时钟、返回顶部、无缝滚动、无缝幻灯片、带进度条的无缝幻灯片

---

5. 运动时钟

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #box {
        margin: 20px auto;
        width: 185px;
        height: 35px;
        line-height: 35px;
        overflow: hidden;
    }
    #box ul li {
        float: left;
        position: relative;
        list-style: none;
        width: 23px;
        height: 35px;
    }
    #box ul li img {
        position: absolute;
    }
</style>

    <div id="box">
        <ul>
            <li>![](img/num.png)</li>
            <li>![](img/num.png)</li>
            <li>:</li>
            <li>![](img/num.png)</li>
            <li>![](img/num.png)</li>
            <li>:</li>
            <li>![](img/num.png)</li>
            <li>![](img/num.png)</li>
        </ul>
    </div>

<script type="text/javascript" src='move.js'></script>
<script>
    function toDou(num) {
        return num < 10 ? '0' + num : '' + num;
    }

    window.onload = function() {
        var oBox = document.body.children[0];
        var oUl = oBox.children[0];
        var aImg = oUl.getElementsByTagName('img');

        clock();
        setInterval(clock, 1000);

        function clock() {
            var oDate = new Date();
            var iH = oDate.getHours();
            var iM = oDate.getMinutes();
            var iS = oDate.getSeconds();

            var str = toDou(iH) + toDou(iM) + toDou(iS);

            for(var i = 0; i < aImg.length; i++) {
                // aImg[i].style.top = - str.charAt(i) * 35 + 'px';
                move(aImg[i], {top: - str.charAt(i) * 35}, {duration: 500});
            }
        }
    }
</script>

效果示例

move框架应用 - 动态时钟

6. 返回顶部

此例因为涉及documentElement，move.js中没有相关判断，所以用move.js原理写了一个

<style>
    body {
        height: 3000px;
        background: linear-gradient(red,blue);
    }
    input {
        position: fixed;
        right: 20px;
        bottom: 20px;
        display: none;
    }
</style>

    <input type="button" value="返回顶部" id="btn1" />

<script>
    window.onload = function() {
        var oBtn = document.getElementById('btn1');

        var timer = null;
        // 添加滚动事件
        var bSin = false;
        window.onscroll = function() {
            if (bSin) {
                clearInterval(timer);
            }
            bSin = true;
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollT > 0) {
                // 按钮出来
                oBtn.style.display = 'block';
            } else {
                oBtn.style.display = 'none';
            }
        };

        // 按钮事件
        oBtn.onclick = function() {
            // 先关后开
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            clearInterval(timer);
            var count = Math.floor(1000/30);
            var dis = 0 - scrollT;
            var n = 0;
            timer = setInterval(function(){
                bSin = false;
                n++;
                var a = 1-n/count;
                var cur = scrollT + dis*(1-Math.pow(a,3));
                document.documentElement.scrollTop = document.body.scrollTop = cur;
                if (n == count) {
                    clearInterval(timer);
                }
            },30);
        };
    };
</script>

效果示例

move框架应用 - 返回顶部

7. 无缝滚动

此例资源为4张不重复图片，宽度为相应宽度*4

1. ul里的内容复制一份达到无缝的目的，再计算ul宽度

2. 模%求得余数

• 往左走(left负数)
  W = oUl.offsetWidth / 2;
  left -= 5;
  left = left % W;
• 往右走(left正数)
  W = oUl.offsetWidht / 2;
  left += 5;
  left = (left % W - W) % W;

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #box {
        width: 1280px;
        height: 220px;
        border: 1px solid #000;
        position: relative;
        margin: 100px auto;
        overflow: hidden;
    }
    #box ul {
        position: absolute;
        left: 0;
        top: 0;
    }
    #box ul li {
        float: left;
        padding: 10px;
        list-style: none;
        width: 300px;
        height: 200px;
    }
    #box ul li img {
        width: 100%;
        height: 100%;
    }
    #box span {
        z-index: 2;
        position: absolute;
        top: 0;
        width: 640px;
        height: 220px;
    }
    #left {
        left: 0;
    }
    #right {
        right: 0;
    }
</style>

    <div id="box">
        <ul>
            <li>![](img/slide1.jpg)</li>
            <li>![](img/slide2.jpg)</li>
            <li>![](img/slide3.jpg)</li>
            <li>![](img/slide4.jpg)</li>
        </ul>
        <span id="left"></span>
        <span id="right"></span>
    </div>

<script>
    window.onload = function() {
        var oBox = document.getElementById('box');
        var oUl = oBox.children[0];
        var oL = oBox.children[1];
        var oR = oBox.children[2];
        var aLi = oUl.children;

        // 内容复制一份达到无缝的目的
        oUl.innerHTML += oUl.innerHTML;

        // 重新计算ul宽度
        oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

        var timer = null;
        oL.onmouseover = function() {
            toLeft();
        };
        oR.onmouseover = function() {
            toRight();
        };

        var left = 0;
        var W = oUl.offsetWidth/2;

        toRight();  // 默认向右滚动

        function toRight() {
            clearInterval(timer);
            timer = setInterval(function(){
                left += 5;
                oUl.style.left = (left%W-W)%W + 'px';
            },30);
        }

        function toLeft() {
            clearInterval(timer);
            timer = setInterval(function(){
                left -= 5;
                oUl.style.left = (left%W-W)%W + 'px';
            },30);
        }
    };
</script>

效果示例

move框架应用 - 带进度条的无缝幻灯片

---

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故