文字滚动效果

效果图：

 

代码如下：

 

<style style="text/css">
.qimo8 { width: 730px; /*height:30px;*/ line-height: 30px; font-size: 14px; float:left; display:inline; overflow:hidden; }
.qimo8 .qimo {/*width:99999999px;*/ width:8000%; height:30px; }
.qimo8 .qimo div { float:left; }
.qimo8 .qimo ul { float:left; height:36px; overflow:hidden; zoom:1; }
.qimo8 .qimo ul li { float:left; line-height:30px; list-style:none; }
.qimo8 li a { margin-right:10px; color:#444444; }
.mod02_ul li.gundong { height:360px; float:left; }
.mod02_ul li.gundong a { height:30px; }
.da_qydj {widht:244px;margin-bottom:10px;margin-top:10px;}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.rdgz { font-size:14px; font-weight:bold; margin:0px 8px 0px 8px; padding-left:10px; }
</style>
<div id="demo" class="qimo8"> 
 <div class="qimo"> 
  <div id="demo1"> 
   <ul class="mod02_ul"> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
   </ul> 
  </div> 
  <div id="demo2"> 
   <ul class="mod02_ul"> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
    <li class="clearfix rdgz"><a href="javascript:;" onclick="void(0)" target="_blank" title="滚动测试">滚动测试</a></li> 
   </ul> 
  </div> 
 </div> 
</div>

<script type="text/javascript">
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=document.getElementById("demo1").innerHTML;
function Marquee(){
if(demo.scrollLeft-demo2.offsetWidth>=0){
 demo.scrollLeft-=demo1.offsetWidth;
}
else{
 demo.scrollLeft++;
}
}
var myvar=setInterval(Marquee,30);
demo.onmouseout=function (){myvar=setInterval(Marquee,30);}
demo.onmouseover=function(){clearInterval(myvar);}
</script>