Html 横向广告滚动字幕

html:

<div class="adv">
	<img src="/static/img/user_order.png" id="icon-adv">
	<div id="demo" style="overflow:hidden;width:100%;">
		<table border="0" align="center">
			<tr>
				<td id="marquePic1"><pre class="adv-text">加粉神器值得你拥有!得粉丝者,得微信天下!!!</pre></td> 
				<td id="marquePic2"></td> 
			</tr>
		</table>
	</div>
</div>

js:

<script type="text/javascript">
	var speed=50;
	marquePic2.innerHTML=marquePic1.innerHTML;
	function Marquee(){   
	 	if(demo.scrollLeft>=marquePic1.scrollWidth){
		    demo.scrollLeft=0;
		} else{
		   demo.scrollLeft++;
		}
	  }
	  var MyMar=setInterval(Marquee,speed)
	  demo.onmouseover=function() { clearInterval(MyMar);  }
	  demo.onmouseout=function() { MyMar=setInterval(Marquee,speed);
	}
</script> 

css:

@adv-text-width:400px;这个主要是控制广告文字的宽度,这个必须要大于屏幕的宽度才会出现滚动,否则不会滚动.

.adv {
    background-color: #77DDDD;
    font-size: 12px;
    padding: 5px;
    color: #fff;
    position: relative;
    height: 30px;
}
 #icon-adv {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
}
#demo {
    position: absolute;
    top: 0;
    left: 30px;
}
<pre name="code" class="css">.adv-text{
    color: #fff;
    line-height: 30px;
    border-radius:0px;
    padding:0; 
    margin:0; 
    width:@adv-text-width;
    border:none;
    background:transparent;
}

参考:http://blog.163.com/liu_hai_feng@126/blog/static/43580500201391125235463/