首页 > 网络编程 > JavaScript > javascript技巧 > 文字上下间隔滚动

javascript 文字上下间隔滚动的代码符合WEB标准脚本之家修正版

2009-12-09 05:30:24 作者：

javascript 文字上下间隔滚动的代码符合WEB标准脚本之家修正版，这里提供了两个版本，第二个在firefox下运行有些问题大家可以修改下，第一个的高度问题，已经修正，其实就是简单的加了css样式。

第一个文字上下间隔滚动修正版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>符合WEB标准的文字间隔滚动JS代码</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
<!-- 
body,td,th { 
font-size: 12px; 
color: #333333; 
} 
a { 
font-size: 12px; 
color: #333333; 
} 
a:link { 
text-decoration: none; 
} 
a:visited { 
text-decoration: none; 
} 
a:hover { 
text-decoration: none; 
color: #FF3300; 
} 
a:active { 
text-decoration: none; 
} 
body,div{margin:0; padding:0}

--> 
</style></head> 
<body> 
<script> 
var marqueeContent=new Array(); //滚动新闻 
marqueeContent[0]='<font color="#0000CC">14:25 </font><a href="https://www.jb51.net/tools/html-js.htm" target="_blank">HTML/JS互相转换工具-IE7兼容版</a>'; 
marqueeContent[1]='<font color="#0000CC">14:25 </font><a href="https://www.jb51.net/tools/cssyasuo.shtml" target="_blank">css 在线压缩工具</a>'; 
marqueeContent[2]='<font color="#0000CC">14:25 </font><a href="https://www.jb51.net/csstidy/css_optimiser.php?lang=zh" target="_blank">CSS整形与最佳化工具[压缩] </a>'; 
marqueeContent[3]='<font color="#0000CC">14:25 </font><a href="https://www.jb51.net/tools/jsmin/index.htm" target="_blank">JS Minifier js压缩</a>'; 
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量 
var marqueeId=0; 
var marqueeDelay=2000; //更新时间,毫秒 
var marqueeHeight=18; //容器高度 
//接下来的是定义一些要使用到的函数 
function initMarquee() { 
var str=marqueeContent[0]; 
document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px;line-height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>'); 
marqueeId++; 
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); 
} 
function startMarquee() { 
var str=marqueeContent[marqueeId]; 
marqueeId++; 
if(marqueeId>=marqueeContent.length) marqueeId=0; 
if(document.getElementById("marqueeBox").childNodes.length==1) { 
var nextLine=document.createElement('DIV'); 
nextLine.innerHTML=str; 
document.getElementById("marqueeBox").appendChild(nextLine); 
} 
else { 
document.getElementById("marqueeBox").childNodes[0].innerHTML=str; 
document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]); 
document.getElementById("marqueeBox").scrollTop=0; 
} 
clearInterval(marqueeInterval[1]); 
marqueeInterval[1]=setInterval("scrollMarquee()",20); 
} 
function scrollMarquee() { 
document.getElementById("marqueeBox").scrollTop++; 
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){ 
clearInterval(marqueeInterval[1]); 
} 
} 
initMarquee(); 
</script> 
</body> 
</html>

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

第二个firefox下运行有些问题。但学习js的朋友可以看下主要是看思路。

<!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=gb2312" /> 
<title>JS文字间隔性滚动代码_适合做公告</title> 
<meta name="keywords" content="文字滚动,间隔滚动,文字上翻,JS代码" /> 
<meta name="description" content="JS实现文字间隔性滚动效果，适合做公告。" />

</head> 
<body> 
<div id="shangfan"> 
<div id="holder"> 
<ul> 
<li><a href="https://www.jb51.net/tools/packer.htm" target="_blank">packer_至强的javascript在线加密工具</a></li> 
<li><a href="https://www.jb51.net/tools/bihe/index.htm" target="_blank">XHTML 代码嵌套查看工具[标签闭合]</a></li> 
<li><a href="https://www.jb51.net/tools/jinzhi.htm" target="_blank">脚本之家 在线进制转换 可以实现各类进制间</a></li> 
<li><a href="https://www.jb51.net/tools/js_Debug.htm" target="_blank">在线JS脚本校验器检测js错误 </a></li> 
<li><a href="https://www.jb51.net/tools/htmlto.htm" target="_blank">将html转换为php,javascript和asp的在线工具</a></li> 
</ul></div> 
</div> 
<script type="text/javascript"> 
function marquee(height,speed,delay){ 
var scrollT; 
var pause = false; 
var ScrollBox = document.getElementById("shangfan"); 
if(document.getElementById("holder").offsetHeight <= height) return; 
var _tmp = ScrollBox.innerHTML.replace('holder', 'holder2') 
ScrollBox.innerHTML += _tmp; 
ScrollBox.onmouseover = function(){pause = true} 
ScrollBox.onmouseout = function(){pause = false} 
ScrollBox.scrollTop = 0; 
function start(){ 
scrollT = setInterval(scrolling,speed); 
if(!pause) ScrollBox.scrollTop += 2; 
} 
function scrolling(){ 
if(ScrollBox.scrollTop % height != 0){ 
ScrollBox.scrollTop += 2; 
if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0; 
} 
else{ 
clearInterval(scrollT); 
setTimeout(start,delay); 
} 
} 
setTimeout(start,delay); 
} 
marquee(24,30,3000); 
</script> 
</body> 
</html>

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

javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版

您可能感兴趣的文章:

javascript 文字上下间隔滚动的代码符合WEB标准脚本之家修正版