关于用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>
脚本如下
<script>
var speed22=50
details22.innerHTML=details11.innerHTML
function Marquee22(){
if(details22.offsetTop-Margee_up.scrollTop<=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)}
</script>
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里面的条件句!!
上一篇