无缝纵向滚动代码—兼容IE, FF, Opera等浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>

<div id="demo" style="overflow:hidden;height:140px;width:500px; border:1px solid #dde5bc;" >
  <a href="#">111</a><br>
  <a href="#">222</a><br>
  <a href="#">333</a><br>
  <a href="#">444</a><br>
  <a href="#">555</a><br>
  <a href="#">666</a><br>
  <a href="#">777</a><br>
   <a href="#">777</a><br>
</div>
<script type="text/javascript">
function Marquee(content, speed){
 this.speed = speed || 40; //default value
 this.content = content;
 this.content.innerHTML += this.content.innerHTML;
 this.content.scrollTop = 0;
 this.threadScroll = null;
}
Marquee.prototype= {
 start: function(){
   if(parseInt(this.content.scrollTop) >= (parseInt(this.content.scrollHeight) / 2) )
   this.content.scrollTop = 0;
  this.content.scrollTop++;
 },
 stop: function(){
  if (this.threadScroll != null){
   clearInterval(this.threadScroll);
   threadScroll = null;
  }
 },
 autoScroll: function(){
  var self = this;
  this.threadScroll = setInterval(function(){self.start()}, this.speed);
  this.content .onmousemove = function(){self.stop()};
  this.content .onmouseout = function(){self.autoScroll()};
 }
}

new Marquee(document.getElementById("demo")).autoScroll();
</script>
</body>
</html>

posted on 2009-07-21 17:13  fany_WEB前端  阅读(286)  评论(0)    收藏  举报

导航