jsp实现文字的滚动

转载 2016年06月02日 05:49:05
代码: 
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>

相关文章推荐

jsp页面框中实现数据滚动形式

1.js代码  引用的txt_scroll.js,其中txt_scroll.js的代码是下面的 // JavaScript Document var wb_speed=80 var wb...

JS无缝滚动显示和JSP中marquee标签滚动显示

一、JS向上滚动的文字特效代码 这个向上滚动的文字特效JS代码比较简洁,代码量很少,你可以根据具体情况使用,做一个下载链接滚动的效果 attForm.size()}">//第一种情...

jsp实现文字的滚动

代码:  Html代码  marquee scrollAmount=2 width=450>实现滚动消息-----marquee>   参数详解:  a)scrol...

marquee---jsp中的滚动字幕标记

下面这段代码就是上面例子的代码了,记得粘贴的时候是要选中“显示源代码”这个选项的哦。                         onMouseOut=go1.start() scrol...

html实现滚动文字

IT行业就业越来越难了,近几年就业率逐年下降                   公布时间:2016-10-15                         全国大学生毕业人数逐...

jsp字体上下滚动效果

String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServ...

jsp中滑动标签的实现

滑动门 硬件故障类 系统故障类 网络故障类 1故障类 2故障类 其他软件故障类 111111111111111 222222...

Html,jsp页面滚动图片效果

虹桥推荐商户 更多 if(shopServiceShaList!=null && shopServiceShaList.size()>0){ int shopVOCoun...

VC 对话框中实现文字的滚动显示

  • 2009年04月19日 16:37
  • 1.8MB
  • 下载

实现文字的向上滚动

  • 2012年06月29日 17:56
  • 34KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jsp实现文字的滚动
举报原因:
原因补充:

(最多只允许输入30个字)