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

信息滚动条

时间:2016-06-08 15:51:20      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

HTML样式

<div id="recoder_con">
    <div id="recoder_ul1"></div>
    <div id="recoder_ul2"></div>
</div>

父元素样式

.recoder-con{
    display: inline-block;
    width: 584px;     //指定宽度
    height: 280px;    //指定高度
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
}

JS引用

 function  prizeScroll(listNum) {
                var speed = 65,
                    wap = document.getElementById("recoder_con"),
                    ul1 = document.getElementById("recoder_ul1"),
                    ul2 = document.getElementById("recoder_ul2");

                ul2.innerHTML = ul1.innerHTML;
                var leftHeight;

                if (listNum > 4) {
                    leftHeight = 0;
                } else if (listNum == 4) {
                    leftHeight = 33;
                }

                function Marquee2() {
                    if (ul2.offsetTop - wap.scrollTop <= leftHeight) {
                        wap.scrollTop -= ul1.offsetHeight;
                    } else {
                        wap.scrollTop++;
                    }
                }
                var MyMar2 = setInterval(function () {
                    Marquee2();
                }, speed);
                
            },

  其中 : 参数 listNum为数据长度

  

  

信息滚动条

标签:

原文地址:http://www.cnblogs.com/qinglingyue/p/5570078.html

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