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实现文字间隔性滚动效果，适合做公告。" />
<style type="text/css">
<!--
body{ font-size:12px;}
#shangfan{font-family: 新宋体, 宋体, 仿宋_GB2312;font-size: 12px; line-height:24px; height:48px; width:400px; border:solid 1px #ccc;overflow:hidden;}
#shangfan ul{margin: 0px 10px;padding: 0px;list-style-type: none;}
#shangfan ul li{/*文字超出本行，自动省略*/overflow:hidden;text-overflow:ellipsis;white-space: nowrap;margin:0;padding: 0px;}
-->
</style>
</head>
<body>
<div id="shangfan">
<div id="holder">
<ul>
<li>·文字逐行上翻代码，第一条</li>
<li>·文字逐行上翻代码，第二条</li>
<li>·文字逐行上翻代码，q</li>
<li>·文字逐行上翻代码，2</li>
<li>·文字逐行上翻代码，d</li>
<li>·文字逐行上翻代码，c</li>
<li>·文字逐行上翻代码，u</li>
<li>·文字逐行上翻代码，t</li>
<li>·文字逐行上翻代码，l</li>
<li>·文字逐行上翻代码，www</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(48,30,3000);
</script>
说明：可修改marquee(24,30,3000);的数值来依次调整上翻的高度，速度，间隔时间。
滚动一行
marquee(24,30,3000); #shangfan{font-family: 新宋体, 宋体, 仿宋_GB2312;font-size: 12px; line-height:24px; height:24px; width:400px; border:solid 1px
#ccc;overflow:hidden;}
滚动二行或者三行，要修改二个地方，上面第一个24 还有 样式中的height:24px，这二个地方要改成相应的数值。
<p>
<p>
<p>
<p>
<p>
<div id="demo" style="overflow:hidden;height:20px;width:300px;">
<table cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="/">魂牵梦萦佛挡杀佛魂牵梦萦栽植</a></td>
</tr>
</table></td>
<td id="demo2"></td>
</tr>
</table>
</div>
<script>
var speed=30
var MyMar=setInterval(Marquee,speed)
demo2.innerHTML=demo1.innerHTML
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
</script>
<p>
<p>
<p>
<p>
<div id="demoq" style="overflow:hidden;height:20px;width:300px;">
<table cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1q"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="/">魂牵梦萦佛挡杀佛魂牵梦萦栽植</a> <a href="/">fsdafas f</a></td>
</tr>
</table></td>
<td id="demo2q"></td>
</tr>
</table>
</div>
<script>
var speed=30
var MyMarq=setInterval(Marqueeq,speed)
demo2q.innerHTML=demo1q.innerHTML
demoq.onmouseover=function() {clearInterval(MyMarq)}
demoq.onmouseout=function() {MyMarq=setInterval(Marqueeq,speed)}
function Marqueeq(){
if(demo2q.offsetWidth-demoq.scrollLeft<=0)
demoq.scrollLeft-=demo1q.offsetWidth
else{
demoq.scrollLeft++
}
}
</script>
向上滚动
<div id="marquees" style="width:240px;">
<div style="width:240px; border:1px #F00 solid">fdsafasdf</div>
</div>
<script language="JavaScript">
marqueesHeight=120;
stopscroll=false;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden;"></div>');
preTop=0; currentTop=0;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",40);
}
document.body.onload=init;
function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>
<br />
改成这样就变成向下滚动
marquees.scrollTop-=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=marqueesHeight+templayer.offsetHeight;
marquees.scrollTop-=1;
</body>
</html>
