html中的横向广告滚动字幕

来源：互联网发布：mac好用的软件推荐编辑：程序博客网时间：2024/05/17 23:02

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/

0 0