zoukankan      html  css  js  c++  java
  • 文字轮播,无缝滚动

        <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 {
         100%;
        position: relative;
        height: 160px;
        overflow: hidden;
    }
  • 相关阅读:
    Pocket Cube
    善意的投票(最大流)
    清明梦超能力者黄YY(idx数组)
    Inside Triangle
    孤岛营救问题(BFS+状压DP)
    餐巾计划问题(费用流)
    Lunch Time(费用流变型题,以时间为费用)
    71. Simplify Path
    70. Climbing Stairs
    69. Sqrt(x)
  • 原文地址:https://www.cnblogs.com/njccqx/p/13792309.html
Copyright © 2011-2022 走看看