首页 > web前端开发 > Javascript开发 > 关于用javascript做一个滚动小动画
2012
12-24

关于用javascript做一个滚动小动画

源代码如下:
<div class=”margee_up”>
<ul class=”details”>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
</ul>
<!–more–>
<ul class=”details”>
<ul class=”details”>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
<li>14:00岑**青岛-石家 硬卧下2张</li>
</ul>
</ul>
<div class=”cls”></div>
</div>
脚本如下

&lt;script&gt;
var speed22=50
details22.innerHTML=details11.innerHTML
function Marquee22(){
if(details22.offsetTop-Margee_up.scrollTop&lt;=0)
Margee_up.scrollTop-=details11.offsetHeight
else{
Margee_up.scrollTop++
}
}
var MyMar22=setInterval(Marquee22,speed22)
Margee_up.onmouseover=function() {clearInterval(MyMar22)}
Margee_up.onmouseout=function() {MyMar22=setInterval(Marquee22,speed22)}
&lt;/script&gt;

css 如下
.margee_up {width:235px;margin:0 auto; margin-top:10px; height:206px;overflow:hidden;}
#main #ticketdetail ul.details {
font-size: 16px;
color: #FFF;
}
#main #ticketdetail ul.details li{
height:26px;
line-height:26px;
}
#main #ticketdetail ul.details a {
color: #FFF;
}

做好之后就可以由下像上滚动了 如果要改为向左 向右 直接可以修改 if里面的条件句!!

最后编辑:
作者:zhoumeng
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!