首页 > 网络编程 > JavaScript > 网页特效 > 链接特效 > 友情链接上下间隙循环滚动

友情链接横向文字上下间隙循环滚动JS效果

2012-12-25 15:49:39 作者：

友情链接文字上下间隙循环滚动JS效果，仿qq频道上下单行多条滚动js效果代码，可用于新闻，友情链接上下间隙滚动,非常实用，需要了解的朋友可以参考下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>仿qq频道上下单行多条滚动js效果代码，可用于新闻，友情链接上下间隙滚动</title> 
<style/> 
#nav { 
MARGIN: 7px auto 0px; HEIGHT: 117px 
} 
#nav #hotnews { 
BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 89px 
} 
#Scroll { 
CLEAR: both; BORDER-RIGHT: #cdc9ca 1px solid; BORDER-TOP: #cdc9ca 1px solid; PADDING-LEFT: 100px; FONT-SIZE: 12px; BACKGROUND: url(//img.jbzj.com/file_images/article/201212/flscroll/n_scroll.gif) no-repeat 18px 7px; MARGIN: 0px auto; BORDER-LEFT: #cdc9ca 1px solid; WIDTH: 808px; COLOR: #c2130e; LINE-HEIGHT: 27px; BORDER-BOTTOM: #cdc9ca 1px solid; HEIGHT: 27px; TEXT-ALIGN: left 
} 
#Scroll A { 
PADDING-RIGHT: 20px; PADDING-LEFT: 10px; BACKGROUND: url(//img.jbzj.com/file_images/article/201212/flscroll/n_bar.gif)) no-repeat 0px 0px; COLOR: #000; MARGIN-RIGHT: 5px; TEXT-DECORATION: none 
} 
#Scroll A.s_end { 
PADDING-RIGHT: 0px; MARGIN-LEFT: 8px 
} 
</style> 
</head> 
<body> 
<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> 
<div id="Scroll"> 
<div id="ScrollMe" style="overflow: hidden; height: 27px;"> 
<a href="#" target="_blank">瓮安涉案女孩系溺亡</a> 
<a href="#" target="_blank">体彩中心突发人命案</a> 
<a href="#" target="_blank">A股上半年全球最差</a> 
<a href="#" target="_blank">上海数字电视免费开播</a> 
<a class="s_end" href="#" target="_blank">五月份乘用车销量探底</a> 
<br> 
<a href="#" target="_blank">塔罗占卜王菲会复出</a> 
<a href="#" target="_blank">七月精彩运势全攻略</a> 
<a href="#" target="_blank">高考试题及历年分数线</a> 
<a href="#" target="_blank">暗黑3视频图片全欣赏</a> 
<a class="s_end" href="#" target="_blank">爱墙留言祈福地震灾区</a> 
<br> 
<a href="#" target="_blank">瓮安涉案女孩系溺亡</a> 
<a href="#" target="_blank">体彩中心突发人命案</a> 
<a href="#" target="_blank">A股上半年全球最差</a> 
<a href="#" target="_blank">上海数字电视免费开播</a> 
<a class="s_end" href="#" target="_blank">五月份乘用车销量探底</a> 
<br> 
<a href="#" target="_blank">塔罗占卜王菲会复出</a> 
<a href="#" target="_blank">七月精彩运势全攻略</a> 
<a href="#" target="_blank">高考试题及历年分数线</a> 
<a href="#" target="_blank">暗黑3视频图片全欣赏</a> 
<a class="s_end" href="#" target="_blank">爱墙留言祈福地震灾区</a> 
<br> 
</div> 
</div> 
 
<script>new srcMarquee("ScrollMe",0,1,808,27,3,1000,1000,27)</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

友情链接横向文字上下间隙循环滚动JS效果

您可能感兴趣的文章: