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:"宋体";}
