非常好用的JS滚动代码

<script>
    function srcMarquee() {
 this.ID = document.getElementById(arguments[0]);
 if (!this.ID) {
  this.ID = -1;
  return
 }
 this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.Correct = this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
 this.Step = 1;
 this.Timer = 30;
 this.DirectionArray = {
  "top": 0,
  "bottom": 1,
  "left": 2,
  "right": 3
 };
 if (typeof arguments[1] == "number") this.Direction = arguments[1];
 if (typeof arguments[2] == "number") this.Step = arguments[2];
 if (typeof arguments[3] == "number") this.Width = arguments[3];
 if (typeof arguments[4] == "number") this.Height = arguments[4];
 if (typeof arguments[5] == "number") this.Timer = arguments[5];
 if (typeof arguments[6] == "number") this.DelayTime = arguments[6];
 if (typeof arguments[7] == "number") this.WaitTime = arguments[7];
 if (typeof arguments[8] == "number") this.ScrollStep = arguments[8];
 
 this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
 this.ID.noWrap = true;
 this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1);
 if (arguments.length >= 7) this.Start()
}
srcMarquee.prototype.Start = function() {
 if (this.ID == -1) return;
 if (this.WaitTime < 800) this.WaitTime = 800;
 if (this.Timer < 20) this.Timer = 20;
 if (this.Width == 0) this.Width = parseInt(this.ID.style.width);
 if (this.Height == 0) this.Height = parseInt(this.ID.style.height);
 if (typeof this.Direction == "string") this.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()];
 this.HalfWidth = Math.round(this.Width / 2);
 this.BakStep = this.Step;
 this.ID.style.width = this.Width;
 this.ID.style.height = this.Height;
 if (typeof this.ScrollStep != "number") this.ScrollStep = this.Direction > 1 ? this.Width: this.Height;
 var msobj = this;
 var timer = this.Timer;
 var delaytime = this.DelayTime;
 var waittime = this.WaitTime;
 msobj.StartID = function() {
  msobj.Scroll()
 }
 msobj.Continue = function() {
  if (msobj.MouseOver == 1) {
   setTimeout(msobj.Continue, delaytime)
  } else {
   clearInterval(msobj.TimerID);
   msobj.CTL = msobj.Stop = 0;
   msobj.TimerID = setInterval(msobj.StartID, timer)
  }
 }
 msobj.Pause = function() {
  msobj.Stop = 1;
  clearInterval(msobj.TimerID);
  setTimeout(msobj.Continue, delaytime)
 }
 msobj.Begin = function() {
  msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth: msobj.ID.scrollHeight;
  if ((msobj.Direction <= 1 && msobj.ClientScroll < msobj.Height) || (msobj.Direction > 1 && msobj.ClientScroll < msobj.Width)) return;
  msobj.ID.innerHTML += msobj.ID.innerHTML;
  msobj.TimerID = setInterval(msobj.StartID, timer);
  if (msobj.ScrollStep < 0) return;
  msobj.ID.onmousemove = function(event) {
   if (msobj.ScrollStep == 0 && msobj.Direction > 1) {
    var event = event || window.event;
    if (window.event) {
     if (msobj.IsNotOpera) {
      msobj.EventLeft = event.srcElement.id == msobj.ID.id ? event.offsetX - msobj.ID.scrollLeft: event.srcElement.offsetLeft - msobj.ID.scrollLeft + event.offsetX
     } else {
      msobj.ScrollStep = null;
      return
     }
    } else {
     msobj.EventLeft = event.layerX - msobj.ID.scrollLeft
    }
    msobj.Direction = msobj.EventLeft > msobj.HalfWidth ? 3 : 2;
    msobj.AbsCenter = Math.abs(msobj.HalfWidth - msobj.EventLeft);
    msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep * 2) / msobj.HalfWidth)
   }
  }
  msobj.ID.onmouseover = function() {
   if (msobj.ScrollStep == 0) return;
   msobj.MouseOver = 1;
   clearInterval(msobj.TimerID)
  }
  msobj.ID.onmouseout = function() {
   if (msobj.ScrollStep == 0) {
    if (msobj.Step == 0) msobj.Step = 1;
    return
   }
   msobj.MouseOver = 0;
   if (msobj.Stop == 0) {
    clearInterval(msobj.TimerID);
    msobj.TimerID = setInterval(msobj.StartID, timer)
   }
  }
 }
 setTimeout(msobj.Begin, waittime)
}
srcMarquee.prototype.Scroll = function() {
 switch (this.Direction) {
 case 0:
  this.CTL += this.Step;
  if (this.CTL >= this.ScrollStep && this.DelayTime > 0) {
   this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL;
   this.Pause();
   return
  } else {
   if (this.ID.scrollTop >= this.ClientScroll) {
    this.ID.scrollTop -= this.ClientScroll
   }
   this.ID.scrollTop += this.Step
  }
  break;
 case 1:
  this.CTL += this.Step;
  if (this.CTL >= this.ScrollStep && this.DelayTime > 0) {
   this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL;
   this.Pause();
   return
  } else {
   if (this.ID.scrollTop <= 0) {
    this.ID.scrollTop += this.ClientScroll
   }
   this.ID.scrollTop -= this.Step
  }
  break;
 case 2:
  this.CTL += this.Step;
  if (this.CTL >= this.ScrollStep && this.DelayTime > 0) {
   this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL;
   this.Pause();
   return
  } else {
   if (this.ID.scrollLeft >= this.ClientScroll) {
    this.ID.scrollLeft -= this.ClientScroll
   }
   this.ID.scrollLeft += this.Step
  }
  break;
 case 3:
  this.CTL += this.Step;
  if (this.CTL >= this.ScrollStep && this.DelayTime > 0) {
   this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL;
   this.Pause();
   return
  } else {
   if (this.ID.scrollLeft <= 0) {
    this.ID.scrollLeft += this.ClientScroll
   }
   this.ID.scrollLeft -= this.Step
  }
  break
 }
}
</script>
<style>
    #Scroll{clear:both;margin:0 auto ;width:808px;height:27px;line-height:27px;border:1px
    solid #CDC9CA;text-align:left;color:#C2130E;background:url( http://mat1.qq.com/news/images/pub/2007/n_scroll.gif)
    no-repeat 18px 7px;padding-left:100px;font-size:12px;}
 #Scroll a{text-decoration:none;color:#000;margin-right:5px;background:url( http://mat1.qq.com/news/images/pub/2007/n_bar.gif)
    no-repeat 0 0;padding-left:10px;padding-right:20px;}
 #Scroll a.s_end{padding-right:0;margin-left:8px;}
</style>
<div id="Scroll">
    <div id="ScrollMe" style="overflow:hidden;height:27px;">
        <a href=" http://news.qq.com/a/20071013/000467.htm" target="_blank">
            美女嫁给毁容士官(图)
        </a>
        <a href=" http://sports.qq.com/a/20071014/000074.htm" target="_blank">
            火箭加入科比争夺战
        </a>
        <a href=" http://stock1.finance.qq.com/a/20071012/000163.htm" target="_blank">
            股市惊现三重博弈
        </a>
        <a href=" http://tech.qq.com/a/20071014/000004.htm" class="s_end" target="_blank">
            我国月球车2013年登月
        </a>
        <a href=" http://auto.qq.com/a/20071012/000078.htm" target="_blank">
            东京车展概念车全接触
        </a>
        <br/>
        <a href=" http://astro.lady.qq.com/a/20071010/000014.htm" target="_blank">
            你是情场上哪种选手
        </a>
        <a href=" http://lady.qq.com/a/20071011/000003.htm" target="_blank">
            娶了丑女的帅哥明星们
        </a>
        <a href=" http://edu.qq.com/a/20071009/000112.htm" target="_blank">
            吐血收藏网络美女全集
        </a>
        <a href=" http://games.qq.com/a/20071011/000290.htm" target="_blank">
            废墟中的奇幻美女(图)
        </a>
        <a href=" http://comic.qq.com/a/20071009/000015.htm" class="s_end" target="_blank">
            十大儿时经典动漫对白
        </a>
        <br/>
    </div>
</div>
<div id="Scroll">
    <div id="ScrollTo" style="overflow:hidden;height:27px;">
        <a href=" http://news.qq.com/a/20071013/000467.htm" target="_blank">
            美女嫁给毁容士官(图)
        </a>
        <a href=" http://sports.qq.com/a/20071014/000074.htm" target="_blank">
            火箭加入科比争夺战
        </a>
        <a href=" http://stock1.finance.qq.com/a/20071012/000163.htm" target="_blank">
            股市惊现三重博弈
        </a>
        <a href=" http://tech.qq.com/a/20071014/000004.htm" class="s_end" target="_blank">
            我国月球车2013年登月
        </a>
        <a href=" http://auto.qq.com/a/20071012/000078.htm" target="_blank">
            东京车展概念车全接触
        </a>
        <br/>
        <a href=" http://astro.lady.qq.com/a/20071010/000014.htm" target="_blank">
            你是情场上哪种选手
        </a>
        <a href=" http://lady.qq.com/a/20071011/000003.htm" target="_blank">
            娶了丑女的帅哥明星们
        </a>
        <a href=" http://edu.qq.com/a/20071009/000112.htm" target="_blank">
            吐血收藏网络美女全集
        </a>
        <a href=" http://games.qq.com/a/20071011/000290.htm" target="_blank">
            废墟中的奇幻美女(图)
        </a>
        <a href=" http://comic.qq.com/a/20071009/000015.htm" class="s_end" target="_blank">
            十大儿时经典动漫对白
        </a>
        <br/>
    </div>
</div>
<script>
    new srcMarquee("ScrollMe", 0, 1, 808, 27, 30, 3000, 3000, 27);
 new srcMarquee("ScrollTo", 0, 1, 808, 27, 30, 3000, 3000, 27)
 
</script>

转载于:https://www.cnblogs.com/hznet/archive/2009/05/13/1805287.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值