码迷,mamicode.com
首页 > 其他好文 > 详细

li无缝滚动

时间:2018-12-22 11:50:03      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:int   nbsp   htm   font   hidden   auto   black   interval   eth   

<style>
            * {
                margin: 0px;
                padding: 0px;
            }

            .wrapp {
                height: 400px;
                border: 1px solid red;
                width: 200px;
                overflow: hidden;
                margin: 200px auto;
                text-align: center;
            }

            li {
                list-style: none;
                color: black;
                font-size: 26px;
                margin-bottom: 10px;
            }
        </style>
<body>
        <div class=‘wrapp‘>
            <div class=‘list‘>
                <ul>
                    <li>数据一</li>
                    <li>数据二</li>
                    <li>数据三</li>
                    <li>数据四</li>
                    <li>数据五</li>
                    <li>数据六</li>
                    <li>数据七</li>
                    <li>数据八</li>
                    <li>数据九</li>
                    <li>数据十</li>
                </ul>
            </div>
            <div class=‘listClone‘></div>
        </div>
    </body>
<script src=‘js/jquery-1.8.3.min.js‘></script>
    <script>
        var wrapp=document.getElementsByClassName(wrapp)[0];
        var list=document.getElementsByClassName(list)[0];
        var listClone=document.getElementsByClassName(listClone)[0];
        listClone.innerHTML=list.innerHTML;
        var time=6;
        var listRoolGo=setInterval(listRool,time)
        function listRool() {
            if (listClone.offsetHeight-wrapp.scrollTop<=0) {
                wrapp.scrollTop-=list.offsetHeight;
            } else {
                wrapp.scrollTop++
            }
        }
    </script>

 

li无缝滚动

标签:int   nbsp   htm   font   hidden   auto   black   interval   eth   

原文地址:https://www.cnblogs.com/chenchenhao/p/10159926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!