jsp实现文字的滚动
来源：互联网 发布：淘宝卖家怎么找小二 编辑：程序博客网 时间：2024/06/06 17:07
- <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(幻灯片效果，指的是滚动一次，然后停止滚动)
实现消息停顿：
光标悬浮时停顿，光标离开时开始
- <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实现文字的滚动
- jsp实现文字的滚动
- 文字横向滚动的实现
- 文字滚动的技术实现
- 文字滚动的技术实现
- 滚动文字的实现js
- 文字横向滚动的实现
- 实现文字的滚动展示
- RICHTEXTBOX中实现文字的自动滚动
- CTextWnd轻松实现文字的滚动
- 实现不间断向上滚动文字的特效
- 用JS实现文字的滚动
- jquery实现文字的上下滚动效果
- 如何实现文字的无缝滚动
- html 实现文字左右滚动的方法
- android 横向滚动文字的实现
- JS实现文字的左右滚动
- iOS文字上下滚动效果的实现
- Bluemix cf命令
- SSH框架下用JUnit和spring-test和EasyMock单元测试
- CVG Talk - RESPECT
- Oracle的SQL语句中如何处理‘&’符号
- 公开的海量数据集 Public Research-Quality Datasets
- jsp实现文字的滚动
- marquee---jsp中的滚动字幕标记
- RNA secondary structure(Dynamic Programming)
- ubuntu下如何安装mysql
- 解决Git Log在IDEA中乱码的问题
- 解决python连接mysql，UTF-8乱码问题
- 勾股定理一日一证连载11
- jpa单元测试
- LeetCode 265. Paint House II
