HTML
<div id= "Hottopic" >
<div class= "wrap" >
<ul id= "Talking" >
<li><a href= "#" > World Classic Musicals "Mamma Mia" 1</a></li>
<li><a href= "#" > Astro </a></li>
<li><a href= "#" > Holy Warriors </a></li>
<li><a href= "#" > Pleasant goat and grey Wolf </a></li>
<li><a href= "#" > Earth Superman </a></li>
<li><a href= "#" > Transformers </a></li>
<li><a href= "#" > Disney </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 $tab 1=$ ("#talking");
var $tab 2=$ ("#scroll");
$tab 2.html ($tab 1.html ());
function Marquee () {
if ($tab 2[0].offsetwidth-$tab [0].scrollleft<=0)
$tab [0].scrollleft-= $tab 1[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;p adding-left:10px;float:left; line-height:20px;}
#talking Li A, #scroll Li A{color: #e9bb19; font-family: "The song Body";}
Original Blog