现在的位置: 首页 > 综合 > 正文

连续不间断仿marquee滚动

2013年10月14日 ⁄ 综合 ⁄ 共 992字 ⁄ 字号 评论关闭

利用javascript+css+dom实现的仿marquee滚动功能,不过比marquee更完善,可以连续不间断的滚动

<div id="scroll_logo"style="OVERFLOW: hidden; HEIGHT: 50px">
<div id="scroll_logo1">
滚动内容
</div>
<div id="scroll_logo2"></div>
</div>

/*向上滚动*/
<script>
var speed=65
scroll_logo2.innerHTML=scroll_logo1.innerHTML
function Marquee3()
 {
  if(scroll_logo2.offsetTop-scroll_logo.scrollTop<=0)
  {
    scroll_logo.scrollTop-=scroll_logo1.offsetHeight
  }else{
    scroll_logo.scrollTop++
  }
}
var MyMar2=setInterval(Marquee3,speed)
scroll_logo.onmouseover=function() {clearInterval(MyMar2)}
scroll_logo.onmouseout=function() {MyMar2=setInterval(Marquee3,speed)}
</script>  

/*向左滚动*/
var speed=65
scroll_logo2.innerHTML=scroll_logo1.innerHTML
function Marquee3()
 {
  if(scroll_logo2.offsetWidth-scroll_logo.scrollLeft<=0)
  {
    scroll_logo.scrollLeft-=scroll_logo1.offsetWidth
  }else{
    scroll_logo.scrollLeft++
  }
}
var MyMar2=setInterval(Marquee3,speed)
scroll_logo.onmouseover=function() {clearInterval(MyMar2)}
scroll_logo.onmouseout=function() {MyMar2=setInterval(Marquee3,speed)}
</script>  

抱歉!评论已关闭.