首页 > 其他 > 详细

文字轮播,无缝滚动

时间:2020-10-10 15:17:45      阅读:19      评论:0      收藏:0      [点我收藏+]
    <script type="text/javascript">
        //文字轮播一
        (function() {
            var l1 =document.getElementById("ccup_left");
            var l2 = document.getElementById("ccup_left_copy");
            var box = document.getElementById("demo-list_left");
              autoScroll();
                    function autoScroll() {
                        console.log(l1);
                        if (l1.offsetHeight > box.offsetHeight) {
                            l2.innerHTML = l1.innerHTML;//克隆list1的数据,使得list2和list1的数据一样
                            scrollMove = setInterval(scrollup, 30);//数值越大,滚动速度越慢
                            box.onmouseover = function () {
                                clearInterval(scrollMove)
                            }
                        }
                    }
                    function scrollup() {
                        //滚动条距离顶部的值恰好等于list1的高度时,达到滚动临界点,此时将让scrollTop=0,让list1回到初始位置,实现无缝滚动
                        if (box.scrollTop >= l1.offsetHeight) {
                            box.scrollTop = 0;
                        } else {
                            box.scrollTop++;
                        }
                    }
                    //鼠标离开时,滚动继续
                    box.onmouseout = function () {
                        scrollMove = setInterval(scrollup, 30);
                    }
        })();
    </script>
<div id="demo-list_left" class="demo-list ">
                            <div id="ccup_left" class="ccup_left">
                                <div class="item_txt">16号楼首层**装验收记录</div>
                                <div class="item_txt">18号楼28*收记录<*/div>
                                <div class="item_txt">19号楼15**记录</div>
                                <div class="item_txt">20号楼20层**录</div>
                                <div class="item_txt">21号楼11层**录</div>
                                <div class="item_txt">22号楼02层**记录</div>
                                <div class="item_txt">23号楼202层**收记录</div>
                                <div class="item_txt">24号楼14层*记录</div>
                                <div class="item_txt">25号楼13层*记录</div>
                                <div class="item_txt">26号楼17层*</div>
                                <div class="item_txt">27号楼03层*录</div>
                                <div class="item_txt">28号楼05层*收记录</div>
                                <div class="item_txt">29楼06层*记录</div>
                                <div class="item_txt">30号楼78层*记录</div>
                                <div class="item_txt">31号楼58层*记录</div>
                                <div class="item_txt">32号楼46层*记录</div>
                                <div class="item_txt">33号楼12层*记录</div>
                                <div class="item_txt">34号楼11层*记录</div>
                            </div>
                            <div id="ccup_left_copy" class="ccup_left_copy">
                            </div>
                        </div>
                    
.demo-list {
    width: 100%;
    position: relative;
    height: 160px;
    overflow: hidden;
}

 

文字轮播,无缝滚动

原文:https://www.cnblogs.com/njccqx/p/13792309.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!