jQuery 实现公告无缝滚动
HTML
<div
id="hotTopic">
<div
class="wrap">
<ul
id="talking">
<li><a
href="#">世界经典音乐剧《妈妈咪呀》1</a></li>
<li><a
href="#">阿童木</a></li>
<li><a
href="#">圣斗士</a></li>
<li><a
href="#">喜羊羊与灰太狼</a></li>
<li><a
href="#">地球超人</a></li>
<li><a
href="#">变形金刚</a></li>
<li><a
href="#">迪士尼</a></li>
</ul>
<ul
id="scroll"></ul>
</div>
</div>
JS
<script
type="text/javascript"
src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
var
speed=30;
var
$tab=$("#hotTopic");
var
$tab1=$("#talking");
var
$tab2=$("#scroll");
$tab2.html($tab1.html());
function
Marquee(){
if($tab2[0].offsetWidth-$tab[0].scrollLeft<=0)
$tab[0].scrollLeft-=$tab1[0].offsetWidth;
else{
$tab[0].scrollLeft++;
}
}
var
MyMar=setInterval(Marquee,speed);
$tab.hover(function(){
clearInterval(MyMar);
},function(){
MyMar=setInterval(Marquee,speed)
})
})
</script>
css
#hotTopic{width:445px;*width:422px;
height:20px; overflow:hidden;float:left;border:1px solid #3e6388;
margin-top:-2px;*margin-top:-1px;_margin-top:0px;}
.wrap{float:
left;width:100000px;}
#talking,#scroll{float:left;}
#talking
li,#scroll li{height:20px; color:#e9bb19;padding-left:10px;float:left;
line-height:20px;}
#talking li a,#scroll li a{color:#e9bb19;
font-family:"宋体";}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
