关闭

jsp实现文字的滚动

298人阅读 评论(0) 收藏 举报
分类:
代码: 
Html代码 
  1. <marquee scrollAmount=2 width=450>实现滚动消息-----</marquee>  

参数详解: 
a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。 
b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。 
c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。 
d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。 
e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动) 

实现消息停顿: 

光标悬浮时停顿,光标离开时开始 

  1. <marquee onmouseout=this.start() onmouseover=this.stop() behavior="scroll" direction="up" width="660px" height="80px" SCROLLDELAY="320" >实现滚动消息-----</marquee>  

<style type="text/css">
ul,li{margin:0;padding:0;font-size:12px;color:#999;}
ul{height:100px;overflow:hidden;}
ul li{line-height:20px;height:20px;}
</style>
</head>  
<body>     
<ul id="list">
<li>“卧槽泥马”:又一网络新词1</li>
<li>“卧槽泥马”:又一网络新词2</li>
<li>“卧槽泥马”:又一网络新词3</li>


<li>“卧槽泥马”:又一网络新词4</li>
<li>“卧槽泥马”:又一网络新词5</li>
<li>“卧槽泥马”:又一网络新词6</li>
<li>“卧槽泥马”:又一网络新词7</li>
<li>“卧槽泥马”:又一网络新词8</li>
<li>“卧槽泥马”:又一网络新词9</li>


<li>“卧槽泥马”:又一网络新词10</li>
<li>“卧槽泥马”:又一网络新词11</li>
<li>“卧槽泥马”:又一网络新词12</li>
<li>“卧槽泥马”:又一网络新词13</li>
<li>“卧槽泥马”:又一网络新词14</li>
</ul>
<marquee onmouseout=this.start() onmouseover=this.stop() behavior="scroll" direction="up" width="660px" height="80px" SCROLLDELAY="320" ><ul id="list">
<li>“卧槽泥马”:又一网络新词1</li>
<li>“卧槽泥马”:又一网络新词2</li>
<li>“卧槽泥马”:又一网络新词3</li>


<li>“卧槽泥马”:又一网络新词4</li>
<li>“卧槽泥马”:又一网络新词5</li>
<li>“卧槽泥马”:又一网络新词6</li>
<li>“卧槽泥马”:又一网络新词7</li>
<li>“卧槽泥马”:又一网络新词8</li>
<li>“卧槽泥马”:又一网络新词9</li>


<li>“卧槽泥马”:又一网络新词10</li>
<li>“卧槽泥马”:又一网络新词11</li>
<li>“卧槽泥马”:又一网络新词12</li>
<li>“卧槽泥马”:又一网络新词13</li>
<li>“卧槽泥马”:又一网络新词14</li>
</ul></marquee>
<script type="text/javascript">  
function scroll(element, delay, speed, lineHeight) {
var numpergroup = 5;
var slideBox = (typeof element == 'string')?document.getElementById(element):element;
var delay = delay||1000;
var speed=speed||20;
var lineHeight = lineHeight||20;
var tid = null, pause = false;
var liLength = slideBox.getElementsByTagName('li').length;
var lack = numpergroup-liLength%numpergroup;
for(i=0;i<lack;i++){
slideBox.appendChild(document.createElement("li"));
}
var start = function() {
tid=setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 2;
if ( slideBox.scrollTop % lineHeight == 0 ) {
clearInterval(tid);
for(i=0;i<numpergroup;i++){
slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
}
slideBox.scrollTop = 0;
setTimeout(start, delay);
}
}
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
setTimeout(start, delay);
}
scroll('list', 5000, 1, 20 );//停留时间,相对速度(越小越快),每次滚动多少,最好和Li的Line-height一致。 


</script>




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>金紫荆卧龙公寓</title>
<META content="金紫荆卧龙公寓" name=keywords>
<META content="金紫荆卧龙公寓" name="description">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head><body bgcolor="#FFFFDE" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><!--#include file="top.asp"-->
<table width="1004" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="16"> </td>
<td width="198" valign="top"><!--#include file="left.asp"--></td>
<td width="790" valign="top"><table width="789" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="587" height="253" valign="top" background="images/cl_22.gif"><table width="585" height="201" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="60" colspan="3"> </td>
</tr>
<tr>
<td width="29"> </td>
<td width="532"><span style="line-height:160%">
<p> </p>
</span></td>
<td width="18"> </td>
</tr>
</table></td>
<td width="202"><img src="images/cl_23.gif" width="202" height="253" alt=""></td>
</tr>
<tr>
<td colspan="2"><table width="771" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7"> </td>
<td width="63"><img src="images/cl_32.gif" width="63" height="124" ></td>
<td width="701" ><div id=demo style="OVERFLOW: hidden;height:126;width:700;COLOR: #ffffff;">
<table height="0" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="demo1"><table width="500" border="0" align="center" cellpadding="0" cellspacing="2">
<tbody>
<tr align="middle">
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512163338628.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512171183985.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512173384870.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512175315288.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512163338628.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512163338628.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512163338628.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512163338628.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512163338628.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
<td width="500" align="center"><a href="http://www..com/" target="_blank"><img src="admin/../pro/2009111512163338628.jpg" width="166" height="123" border="0" style="border:1px solid #F4DC9C" /></a></td>
</tr>
</tbody>
</table></td>
<td width="11" id="demo2"><p> </p>
<p> </p></td>
</tr>
</tbody>
</table>
</div>
<script language=javascript>
var speed = 10 //速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table><!--#include file="bottom.asp"--></body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:36207次
    • 积分:307
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:75篇
    • 译文:0篇
    • 评论:1条
    文章分类