Last active
August 29, 2015 14:03
-
-
Save keenwon/e43f27f549d12b5d4fde to your computer and use it in GitHub Desktop.
Javascript 横向不间断滚动效果
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="broadcast-box" id="broadcast_box"> | |
<ul class="broadcast-detail" id="broadcast_detail"> | |
<li>年会还剩两天就要来了,你准备好中大奖了么?</li> | |
<li>最后两天!再不报销本季度的钱再也拿不回来了你家里人造么?</li> | |
<li>星际2电竞娱乐化RPG地图入选“线上冠军赛</li> | |
</ul> | |
</div> | |
<script type="text/javascript"> | |
var broadcast_div = document.getElementById('broadcast_div'); | |
if (broadcast_div) { | |
var broadcast_ul = document.getElementById('broadcast_ul'), | |
broadcast_li = broadcast_ul.getElementsByTagName('li'), | |
//broadcast_width = broadcast_li[0].offsetWidth, | |
marquee = function () { | |
broadcast_div.scrollLeft += 2; | |
if (broadcast_div.scrollLeft % broadcast_ul.getElementsByTagName('li')[0].offsetWidth <= 1) { | |
broadcast_ul.appendChild(broadcast_ul.getElementsByTagName('li')[0]); | |
broadcast_div.scrollLeft = 0; | |
} | |
}, | |
broadcast_speed = 100, | |
broadcast_timer = null, | |
clientWidth = 0; | |
for (var i = 0, j = broadcast_li.length; i < j; i++) { | |
clientWidth += broadcast_li[i].clientWidth; | |
} | |
if (clientWidth > broadcast_div.clientWidth) { | |
broadcast_ul.innerHTML += broadcast_ul.innerHTML; | |
broadcast_timer = setInterval(marquee, broadcast_speed); | |
broadcast_div.onmouseover = function () { | |
clearInterval(broadcast_timer); | |
}; | |
broadcast_div.onmouseout = function () { | |
broadcast_timer = setInterval(marquee, broadcast_speed); | |
}; | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment