当前位置： 代码迷 >> JavaScript >> js文字下上滚动+左右滚动兼容FF/IE
  详细解决方案

js文字下上滚动+左右滚动兼容FF/IE

热度：465   发布时间：2012-10-07 17:28:51.0
js文字上下滚动+左右滚动兼容FF/IE

我也是最近因为要做这种效果所以找了一下，很多都没有用，有的滚动一半就不滚了！以下是有用的所以收藏了，大家也可以参考一下。

转自：http://www.ok22.org/art_detail.aspx?id=114(可直接运行)

直接贴代码了:

上下滚动

Html代码
  1. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">??
  2. <HTML?xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <TITLE>文字上下滚动</TITLE>??
  5. <META?http-equiv=Content-Type?content="text/html;charset=utf-8">??
  6. <STYLE?type=text/css?media=screen>??
  7. *{margin:0;padding:0;font-size:12px;} ??
  8. a{color:#333;text-decoration:none} ??
  9. a:hover{color:#901d22;text-decoration:underline} ??
  10. .clear{clear:both;font-size:0;line-height:0;height:0} ??
  11. SPAN.darkred{font-size:14px;color:#933} ??
  12. #search{border:1px?solid?#ccc;margin:0?auto;width:950px;margin-bottom:8px;height:29px} ??
  13. #commend{width:720px;color:#fff} ??
  14. #commend?a{color:#333} ??
  15. .scrollNews{padding-TOP:4px;position:relative} ??
  16. #newscommend{padding-RIGHT:2px;font-weight:normal;overflow:hidden;width:602px;line-height:20px;height:20px} ??
  17. .scrollNews?div{LEFT:507px;position:absolute;} ??
  18. .scrollNews?a{CURSOR:pointer} ??
  19. .scrollNews?IMG{width:25px;height:8px;background:#000;} ??
  20. </STYLE>??
  21. </head>??
  22. <body>??
  23. <div?id="new_list"?style="display:none;">??
  24. <h6><a?href="#">宋山木的“温柔论”能成立吗？</a></h6>??
  25. <h6><a?href="#">坐在中国最拥挤的火车上</a></h6>??
  26. <h6><a?href="#">前卫美女拍比基尼婚纱照</a></h6>??
  27. <h6><a?href="#">中南海保镖这么练出来的</a></h6>??
  28. <h6><a?href="#">围观景区冬日人体彩绘秀</a></h6>??
  29. <h6><a?href="#">贷款修路有尽?为何缴费还贷不止？</a></h6>??
  30. <h6><a?href="#">中国“元”级柴电潜艇堪称深海歼20</a></h6>??
  31. <h6><a?href="#">辛酸中的感动：为那些骑摩返们</a></h6>??
  32. <h6><a?href="#">高房价?让多少未婚女孩当了小三？</a></h6>??
  33. <h6><a?href="#">兽内衣模特大赛照！真有料</a></h6>??
  34. </div>??
  35. <div?id=search>??
  36. ??<div?id=commend>??
  37. ????<div?class=scrollNews>??
  38. ??????<H3?id=newscommend></H3>??
  39. ??????<div?style="TOP:3px"><a?id="pre"><IMG?src=""></a></div>??
  40. ??????<div?style="TOP:15px"><a?id="next"><IMG?src=""></a></div>??
  41. ????</div>??
  42. ??</div>??
  43. </div>??
  44. <SCRIPT?type="text/javascript">??
  45. function?scrollnews(){ ??
  46. ????????????var?htext=document.getElementById("new_list").getElementsByTagName("h6"); ??
  47. ????????????var?text_holder=document.getElementById("newscommend"); ??
  48. ????????????var?oFrag=document.createDocumentFragment(); ??
  49. ????????????oFrag.innerHTML=""; ??
  50. ????????????for(var?i=0;i<htext.length;i++){ ??
  51. ????????????????oFrag.innerHTML+=htext[i].innerHTML+"??"; ??
  52. ????????????????if((i>0&&i%2==1)||(i==htext.length-1&&i%2==0)){ ??
  53. ????????????????????oFrag.innerHTML+="<br/>"; ??
  54. ????????????????} ??
  55. ????????????} ??
  56. ????????????text_holder.innerHTML=oFrag.innerHTML; ??
  57. ????????} ??
  58. ??
  59. ????????function?ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll){ ??
  60. ????????????this.Speed=10; ??
  61. ????????????this.Timeout=timeout; ??
  62. ????????????this.stopscroll=false; ??
  63. ????????????this.isSmoothScroll=isSmoothScroll; ??
  64. ????????????this.LineHeight=20; ??
  65. ????????????thisthis.NextButton=this.$(btnNext); ??
  66. ????????????thisthis.PreviousButton=this.$(btnPrevious); ??
  67. ????????????thisthis.ScrollContent=this.$(content); ??
  68. ????????????this.ScrollContent.innerHTML+=this.ScrollContent.innerHTML; ??
  69. ????????????if(this.PreviousButton){ ??
  70. ????????????????thisthis.PreviousButton.onclick=this.GetFunction(this,"Previous"); ??
  71. ????????????????thisthis.PreviousButton.onmouseover=this.GetFunction(this,"MouseOver"); ??
  72. ????????????????thisthis.PreviousButton.onmouseout=this.GetFunction(this,"MouseOut"); ??
  73. ????????????} ??
  74. ????????????if(this.NextButton){ ??
  75. ????????????????thisthis.NextButton.onclick=this.GetFunction(this,"Next"); ??
  76. ????????????????thisthis.NextButton.onmouseover=this.GetFunction(this,"MouseOver"); ??
  77. ????????????????thisthis.NextButton.onmouseout=this.GetFunction(this,"MouseOut"); ??
  78. ????????????} ??
  79. ????????????thisthis.ScrollContent.onmouseover=this.GetFunction(this,"MouseOver"); ??
  80. ????????????thisthis.ScrollContent.onmouseout=this.GetFunction(this,"MouseOut"); ??
  81. ????????????if(autoStart){ ??
  82. ????????????????this.Start(); ??
  83. ????????????} ??
  84. ????????} ??
  85. ????????ScrollText.prototype={ ??
  86. ????????????$:function?(element){ ??
  87. ????????????????return?document.getElementById(element); ??
  88. ????????????}, ??
  89. ????????????Previous:function?(){ ??
  90. ????????????????this.stopscroll=true; ??
  91. ????????????????this.Scroll("up"); ??
  92. ????????????}, ??
  93. ????????????Next:function?(){ ??
  94. ????????????????this.stopscroll=true; ??
  95. ????????????????this.Scroll("down"); ??
  96. ????????????}, ??
  97. ????????????Start:function?(){ ??
  98. ????????????????if(this.isSmoothScroll){ ??
  99. ????????????????????this.AutoScrollTimer=setInterval(this.GetFunction(this,"SmoothScroll"),this.Timeout); ??
  100. ????????????????}?else{ ??
  101. ????????????????????this.AutoScrollTimer=setInterval(this.GetFunction(this,"AutoScroll"),this.Timeout); ??
  102. ????????????????} ??
  103. ????????????}, ??
  104. ????????????Stop:function?(){ ??
  105. ????????????????clearTimeout(this.AutoScrollTimer); ??
  106. ????????????????this.DelayTimerStop=0; ??
  107. ????????????}, ??
  108. ????????????MouseOver:function?(){ ??
  109. ????????????????this.stopscroll=true; ??
  110. ????????????}, ??
  111. ????????????MouseOut:function?(){ ??
  112. ????????????????this.stopscroll=false; ??
  113. ????????????}, ??
  114. ????????????AutoScroll:function?(){ ??
  115. ????????????????if(this.stopscroll){ ??
  116. ????????????????????return; ??
  117. ????????????????} ??
  118. ????????????????this.ScrollContent.scrollTop++; ??
  119. ????????????????if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){ ??
  120. ????????????????????this.ScrollTimer=setTimeout(this.GetFunction(this,"AutoScroll"),this.Speed); ??
  121. ????????????????}?else{ ??
  122. ????????????????????if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){ ??
  123. ????????????????????????this.ScrollContent.scrollTop=0; ??
  124. ????????????????????} ??
  125. ????????????????????clearTimeout(this.ScrollTimer); ??
  126. ????????????????} ??
  127. ????????????}, ??
  128. ????????????SmoothScroll:function?(){ ??
  129. ????????????????if(this.stopscroll){ ??
  130. ????????????????????return; ??
  131. ????????????????} ??
  132. ????????????????this.ScrollContent.scrollTop++; ??
  133. ????????????????if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){ ??
  134. ????????????????????this.ScrollContent.scrollTop=0; ??
  135. ????????????????} ??
  136. ????????????}, ??
  137. ????????????Scroll:function?(direction){ ??
  138. ????????????????if(direction=="up"){ ??
  139. ????????????????????this.ScrollContent.scrollTop--; ??
  140. ????????????????}?else{ ??
  141. ????????????????????this.ScrollContent.scrollTop++; ??
  142. ????????????????} ??
  143. ????????????????if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){ ??
  144. ????????????????????this.ScrollContent.scrollTop=0; ??
  145. ????????????????}?else?if(parseInt(this.ScrollContent.scrollTop)<=0){ ??
  146. ????????????????????this.ScrollContent.scrollTop=parseInt(this.ScrollContent.scrollHeight)/2; ??
  147. ????????????????} ??
  148. ??
  149. ????????????????if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){ ??
  150. ????????????????????this.ScrollTimer=setTimeout(this.GetFunction(this,"Scroll",direction),this.Speed); ??
  151. ????????????????} ??
  152. ????????????}, ??
  153. ????????????GetFunction:function?(variable,method,param){ ??
  154. ????????????????return?function?(){ ??
  155. ????????????????????variable[method](param); ??
  156. ????????????????} ??
  157. ????????????} ??
  158. ????????} ??
  159. ????</SCRIPT>??
  160. ????<SCRIPT?type="text/javascript">??
  161. ????????scrollnews(); ??
  162. ????????var?scroll1=new?ScrollText("newscommend","pre","next",true,2500,false); ??
  163. ????</SCRIPT>??
  164. </body>??
  165. </HTML>?? 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/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;
			this.NextButton=this.$(btnNext);
			this.PreviousButton=this.$(btnPrevious);
			this.ScrollContent=this.$(content);
			this.ScrollContent.innerHTML+=this.ScrollContent.innerHTML;
			if(this.PreviousButton){
				this.PreviousButton.onclick=this.GetFunction(this,"Previous");
				this.PreviousButton.onmouseover=this.GetFunction(this,"MouseOver");
				this.PreviousButton.onmouseout=this.GetFunction(this,"MouseOut");
			}
			if(this.NextButton){
				this.NextButton.onclick=this.GetFunction(this,"Next");
				this.NextButton.onmouseover=this.GetFunction(this,"MouseOver");
				this.NextButton.onmouseout=this.GetFunction(this,"MouseOut");
			}
			this.ScrollContent.onmouseover=this.GetFunction(this,"MouseOver");
			this.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>

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

Html代码复制代码运行
  1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
  2. <html?xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>??
  5. <title>JS实现文字无间隙滚动代码</title>??
  6. <style?type="text/css">??
  7. body{font-size:12px;} ??
  8. .sqBorder?{width:938px;margin:0px?auto;padding:10px;border:1px?#91CD5A?solid;background:#DAEEB5;} ??
  9. .scroll_div?{width:936px;margin:0?auto;overflow:?hidden;white-space:?nowrap;} ??
  10. .scroll_div?a:hover{color:#FF0000} ??
  11. .scroll_div?a{color:#000;margin-right:5px;} ??
  12. .scroll_div?a?img{border:none;?vertical-align:middle;} ??
  13. #scroll_begin,?#scroll_end,?#scroll_begin?ul,?#scroll_end?ul,?#scroll_begin?ul?li,?#scroll_end?ul?li{display:inline;} ??
  14. </style>??
  15. </head>??
  16. <body>??
  17. <script?language="javascript">??
  18. function?ScrollImgLeft(){ ??
  19. var?speed=30; ??
  20. ????var?scroll_begin?=?document.getElementById("scroll_begin"); ??
  21. ????//alert(scroll_begin.scrollWidth); ??
  22. ????var?scroll_end?=?document.getElementById("scroll_end"); ??
  23. ????var?scroll_div?=?document.getElementById("scroll_div"); ??
  24. ????if?(scroll_begin.scrollWidth?>?parseInt(document.body.clientWidth)?/?2)?{ ??
  25. ????????scroll_end.innerHTML?=?scroll_begin.innerHTML; ??
  26. ????????function?Marquee()?{ ??
  27. ????????????if?(scroll_end.offsetWidth?-?scroll_div.scrollLeft?<=?0) ??
  28. ????????????????scroll_div.scrollLeft?-=?scroll_begin.offsetWidth ??
  29. ????????????else ??
  30. ????????????????scroll_div.scrollLeft++ ??
  31. ????????} ??
  32. ????????var?MyMar?=?setInterval(Marquee,?speed); ??
  33. ????????scroll_div.onmouseover?=?function()?{?clearInterval(MyMar)?} ??
  34. ????????scroll_div.onmouseout?=?function()?{?MyMar?=?setInterval(Marquee,?speed)?} ??
  35. ????} ??
  36. } ??
  37. </script>??
  38. <div?style="text-align:center">??
  39. ??<div?class="sqBorder">??
  40. ????<!--#####滚动区域#####-->??
  41. ????<div?id="scroll_div"?class="scroll_div">??
  42. ??????<div?id="scroll_begin">??
  43. ????????<ul>??
  44. ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>??
  45. ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>??
  46. ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>??
  47. ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>??
  48. ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>??
  49. ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>??
  50. ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>??
  51. ????????</ul>??
  52. ??????</div>??
  53. ??????<div?id="scroll_end"></div>??
  54. ????</div>??
  55. ????<!--#####滚动区域#####-->??
  56. ??</div>??
  57. ??<script?type="text/javascript">ScrollImgLeft();</script>??
  58. </div>??
  59. <!--//向左滚动代码结束-->??
  60. </body>??
  61. </html>??
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.