js实例——两种方式实现滚动条

作者: blank的小粉er | 来源:发表于2017-07-20 10:48 被阅读0次

实现滚动条自动滚动效果的两种方法
jQuery实现点击空白处隐藏弹出框
js实例——两种方式实现滚动条
滚动条控制操作
H5学习从0到1-H5的布局（10）
iOS OC与JS交互（一）-- UIWebView
Spring(bean)
Hybird调研
iOS原生与js交互总结
小程序学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:800px;
            height:40px;
            border:3px solid #333;
        }
        .inner{
            height:40px;
            width:0%;
            background:#369;
        }


        .inner2{
            -webkit-transition:all 3s linear;
            -moz-transition:all 3s linear;
            -ms-transition:all 3s linear;
            -o-transition:all 3s linear;
            transition:all 3s linear;
        }

    </style>
</head>
<body>
    <h1>滚动条</h1>
    <hr>


    <div class="box">
        <div class="inner" id="inner"></div>
    </div>
    <button onclick="scrollBar()">开始</button>
    <script>
        //进度变量
        var m = 0;

        //进度条开始
        function scrollBar(){
            //判断是否结束
            if (m >= 100) {
                return;
            }

            m ++;
            document.getElementById('inner').style.width = m+'%';

            //定时
            setTimeout(scrollBar, 100);
        }

    </script>



    <br>
    <br>
    <br>
    <br>
    <br>
    <br>




    <div class="box">
        <div class="inner inner2" id="inner2"></div>
    </div>
    <button onclick="transitionBar()">开 始</button>
    <script>

        function transitionBar(){

            document.getElementById('inner2').style.width = "100%";
        }
    </script>
</body>
</html>