js文字無縫滾動

css:

.sds_zjmd{width: 420px;height: 168px;border:1px solid #AB1E2E;margin: 0 auto;margin-top: 30px;}
.sds_right_p4{font-size:30px;line-height:40px;color: #AE3137;padding-top: 10px;text-align: center}
.sds_right_p5{margin-left: 26px;margin-top: 10px;height: 93px;overflow: hidden;}
.sds_right_p5 li{font-size:22px;line-height:29px;color: #393939;margin-bottom: 3px;height: 29px}
.sds_right_p5 li span{color: #AE3137;}

html:

<div class="sds_zjmd">
	<p class="sds_right_p4">中獎名單</p>
	<ul id="div" class="sds_right_p5">
		<li>恭喜<span>878739***5</span>獲得 <span>100積分</span></li>
		<li>恭喜<span>878739***5</span>獲得 <span>200積分</span></li>
		<li>恭喜<span>878739***5</span>獲得 <span>300積分</span></li>
		<li>恭喜<span>878739***5</span>獲得 <span>400積分</span></li>
		<li>恭喜<span>878739***5</span>獲得 <span>500積分</span></li>
		<li>恭喜<span>878739***5</span>獲得 <span>600積分</span></li>
	</ul>
</div>

js:

<script type="text/javascript">
		<!--文字滾動-->
        var area = document.getElementById('div');
        var iliHeight = 29;//單行滾動的高度
        var speed = 50;//滾動的速度
        var time;
        var delay= 0;
        area.scrollTop=0;
        area.innerHTML+=area.innerHTML;//克隆一份一樣的內容
        function startScroll()
        {
            time=setInterval("scrollUp()",speed);
            area.scrollTop++;
        }

        function scrollUp()
        {
            if(area.scrollTop % iliHeight==0)
            {
                clearInterval(time);
                setTimeout(startScroll,delay);
            }else{
                area.scrollTop++;
                if(area.scrollTop >= area.scrollHeight/2){
                    area.scrollTop =0;
                }
            }
        }
        setTimeout(startScroll,delay)
	</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章