js文字上下，左右滚动js效果,兼容性比较好

weiledream 2011-11-02

展开全文

上下滚动：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www./1999/xhtml">
<head>
<TITLE>文字上下滚动</TITLE>
<META http-equiv=Content-Type content="text/html;charset=utf-8">
<STYLE type=text/css media=screen>
*{margin:0;padding:0;font-size:12px;}
a{color:#333;text-decoration:none}
a:hover{color:#901d22;text-decoration:underline}
.clear{clear:both;font-size:0;line-height:0;height:0}
SPAN.darkred{font-size:14px;color:#933}
#search{border:1px solid #ccc;margin:0 auto;width:950px;margin-bottom:8px;height:29px}
#commend{width:720px;color:#fff}
#commend a{color:#333}
.scrollNews{padding-TOP:4px;position:relative}
#newscommend{padding-RIGHT:2px;font-weight:normal;overflow:hidden;width:602px;line-height:20px;height:20px}
.scrollNews div{LEFT:507px;position:absolute;}
.scrollNews a{CURSOR:pointer}
.scrollNews IMG{width:25px;height:8px;background:#000;}
</STYLE>
</head>
<body>
<div id="new_list" style="display:none;">
<h6><a href="#">宋山木的“温柔论”能成立吗？</a></h6>
<h6><a href="#">坐在中国最拥挤的火车上</a></h6>
<h6><a href="#">前卫美女拍比基尼婚纱照</a></h6>
<h6><a href="#">中南海保镖这么练出来的</a></h6>
<h6><a href="#">围观景区冬日人体彩绘秀</a></h6>
<h6><a href="#">贷款修路有尽为何缴费还贷不止？</a></h6>
<h6><a href="#">中国“元”级柴电潜艇堪称深海歼20</a></h6>
<h6><a href="#">辛酸中的感动：为那些骑摩返们</a></h6>
<h6><a href="#">高房价让多少未婚女孩当了小三？</a></h6>
<h6><a href="#">兽内衣模特大赛照！真有料</a></h6>
</div>
<div id=search>
<div id=commend>
<div class=scrollNews>
<H3 id=newscommend></H3>
<div style="TOP:3px"><a id="pre"><IMG src=""></a></div>
<div style="TOP:15px"><a id="next"><IMG src=""></a></div>
</div>
</div>
</div>
<SCRIPT type="text/javascript">
function scrollnews(){
var htext=document.getElementById("new_list").getElementsByTagName("h6");
var text_holder=document.getElementById("newscommend");
var oFrag=document.createDocumentFragment();
oFrag.innerHTML="";
for(var i=0;i<htext.length;i++){
oFrag.innerHTML+=htext[i].innerHTML+" ";
if((i>0&&i%2==1)||(i==htext.length-1&&i%2==0)){
oFrag.innerHTML+="<br/>";
}
}
text_holder.innerHTML=oFrag.innerHTML;
}
function ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll){
this.Speed=10;
this.Timeout=timeout;
this.stopscroll=false;
this.isSmoothScroll=isSmoothScroll;
this.LineHeight=20;
thisthis.NextButton=this.$(btnNext);
thisthis.PreviousButton=this.$(btnPrevious);
thisthis.ScrollContent=this.$(content);
this.ScrollContent.innerHTML+=this.ScrollContent.innerHTML;
if(this.PreviousButton){
thisthis.PreviousButton.onclick=this.GetFunction(this,"Previous");
thisthis.PreviousButton.onmouseover=this.GetFunction(this,"MouseOver");
thisthis.PreviousButton.onmouseout=this.GetFunction(this,"MouseOut");
}
if(this.NextButton){
thisthis.NextButton.onclick=this.GetFunction(this,"Next");
thisthis.NextButton.onmouseover=this.GetFunction(this,"MouseOver");
thisthis.NextButton.onmouseout=this.GetFunction(this,"MouseOut");
}
thisthis.ScrollContent.onmouseover=this.GetFunction(this,"MouseOver");
thisthis.ScrollContent.onmouseout=this.GetFunction(this,"MouseOut");
if(autoStart){
this.Start();
}
}
ScrollText.prototype={
$:function (element){
return document.getElementById(element);
},
Previous:function (){
this.stopscroll=true;
this.Scroll("up");
},
Next:function (){
this.stopscroll=true;
this.Scroll("down");
},
Start:function (){
if(this.isSmoothScroll){
this.AutoScrollTimer=setInterval(this.GetFunction(this,"SmoothScroll"),this.Timeout);
} else{
this.AutoScrollTimer=setInterval(this.GetFunction(this,"AutoScroll"),this.Timeout);
}
},
Stop:function (){
clearTimeout(this.AutoScrollTimer);
this.DelayTimerStop=0;
},
MouseOver:function (){
this.stopscroll=true;
},
MouseOut:function (){
this.stopscroll=false;
},
AutoScroll:function (){
if(this.stopscroll){
return;
}
this.ScrollContent.scrollTop++;
if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){
this.ScrollTimer=setTimeout(this.GetFunction(this,"AutoScroll"),this.Speed);
} else{
if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){
this.ScrollContent.scrollTop=0;
}
clearTimeout(this.ScrollTimer);
}
},
SmoothScroll:function (){
if(this.stopscroll){
return;
}
this.ScrollContent.scrollTop++;
if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){
this.ScrollContent.scrollTop=0;
}
},
Scroll:function (direction){
if(direction=="up"){
this.ScrollContent.scrollTop--;
} else{
this.ScrollContent.scrollTop++;
}
if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){
this.ScrollContent.scrollTop=0;
} else if(parseInt(this.ScrollContent.scrollTop)<=0){
this.ScrollContent.scrollTop=parseInt(this.ScrollContent.scrollHeight)/2;
}
if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){
this.ScrollTimer=setTimeout(this.GetFunction(this,"Scroll",direction),this.Speed);
}
},
GetFunction:function (variable,method,param){
return function (){
variable[method](param);
}
}
}
</SCRIPT>
<SCRIPT type="text/javascript">
scrollnews();
var scroll1=new ScrollText("newscommend","pre","next",true,2500,false);
</SCRIPT>
</body>
</HTML>

文字上下滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www./1999/xhtml">
<head>
<TITLE>文字上下滚动</TITLE>
<META http-equiv=Content-Type content="text/html;charset=utf-8">
<STYLE type=text/css media=screen>
*{margin:0;padding:0;font-size:12px;}
a{color:#333;text-decoration:none}
a:hover{color:#901d22;text-decoration:underline}
.clear{clear:both;font-size:0;line-height:0;height:0}
SPAN.darkred{font-size:14px;color:#933}
#search{border:1px solid #ccc;margin:0 auto;width:950px;margin-bottom:8px;height:29px}
#commend{width:720px;color:#fff}
#commend a{color:#333}
.scrollNews{padding-TOP:4px;position:relative}
#newscommend{padding-RIGHT:2px;font-weight:normal;overflow:hidden;width:602px;line-height:20px;height:20px}
.scrollNews div{LEFT:507px;position:absolute;}
.scrollNews a{CURSOR:pointer}
.scrollNews IMG{width:25px;height:8px;background:#000;}
</STYLE>
</head>
<body>
<div id="new_list" style="display:none;">
<h6><a href="#">宋山木的“温柔论”能成立吗？</a></h6>
<h6><a href="#">坐在中国最拥挤的火车上</a></h6>
<h6><a href="#">前卫美女拍比基尼婚纱照</a></h6>
<h6><a href="#">中南海保镖这么练出来的</a></h6>
<h6><a href="#">围观景区冬日人体彩绘秀</a></h6>
<h6><a href="#">贷款修路有尽为何缴费还贷不止？</a></h6>
<h6><a href="#">中国“元”级柴电潜艇堪称深海歼20</a></h6>
<h6><a href="#">辛酸中的感动：为那些骑摩返们</a></h6>
<h6><a href="#">高房价让多少未婚女孩当了小三？</a></h6>
<h6><a href="#">兽内衣模特大赛照！真有料</a></h6>
</div>
<div id=search>
<div id=commend>
    <div class=scrollNews>
      <H3 id=newscommend></H3>
      <div style="TOP:3px"><a id="pre"><IMG src=""></a></div>
      <div style="TOP:15px"><a id="next"><IMG src=""></a></div>
    </div>
</div>
</div>
<SCRIPT type="text/javascript">
function scrollnews(){
   var htext=document.getElementById("new_list").getElementsByTagName("h6");
   var text_holder=document.getElementById("newscommend");
   var oFrag=document.createDocumentFragment();
   oFrag.innerHTML="";
   for(var i=0;i<htext.length;i++){
    oFrag.innerHTML+=htext[i].innerHTML+"  ";
    if((i>0&&i%2==1)||(i==htext.length-1&&i%2==0)){
     oFrag.innerHTML+="<br/>";
    }
   }
   text_holder.innerHTML=oFrag.innerHTML;
  }

    if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){
     this.ScrollTimer=setTimeout(this.GetFunction(this,"Scroll",direction),this.Speed);
    }
   },
   GetFunction:function (variable,method,param){
    return function (){
     variable[method](param);
    }
   }
  }
</SCRIPT>
<SCRIPT type="text/javascript">
  scrollnews();
  var scroll1=new ScrollText("newscommend","pre","next",true,2500,false);
</SCRIPT>
</body>
</HTML>

左右滚动(修改:文字不够宽度时停止滚动)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实现文字无间隙滚动代码</title>
<style type="text/css">
body{font-size:12px;}
.sqBorder {width:938px;margin:0px auto;padding:10px;border:1px #91CD5A solid;background:#DAEEB5;}
.scroll_div {width:936px;margin:0 auto;overflow: hidden;white-space: nowrap;}
.scroll_div a:hover{color:#FF0000}
.scroll_div a{color:#000;margin-right:5px;}
.scroll_div a img{border:none; vertical-align:middle;}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}
</style>
</head>
<body>
<script language="javascript">
function ScrollImgLeft(){
var speed=30;
var scroll_begin = document.getElementById("scroll_begin");
//alert(scroll_begin.scrollWidth);
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
if (scroll_begin.scrollWidth > parseInt(document.body.clientWidth) / 2) {
scroll_end.innerHTML = scroll_begin.innerHTML;
function Marquee() {
if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
scroll_div.scrollLeft -= scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar = setInterval(Marquee, speed);
scroll_div.onmouseover = function() { clearInterval(MyMar) }
scroll_div.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
}
}
</script>
<div style="text-align:center">
<div class="sqBorder">
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
<li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
<li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
<li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
<li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
<li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
<li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
</body>
</html>