跑马灯效果详解
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、一般跑马灯
<div id="c_9">
<marquee direction="left" TrueSpeed scrollamount="1" scrolldelay="30" onMouseOver="this.stop();" onMouseOut="this.start();">
<img src="images/p_0/p_1.jpg" width="150" height="130" border="1" />
<img src="images/p_0/p_2.jpg" width="150" height="130" border="1" />
<img src="images/p_0/p_3.jpg" width="150" height="130" border="1" /> </marquee>
</div>
附：循环滚动基本语法
<marquee> ... </marquee>
移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等
方向
<direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移！</marquee>
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈
一圈绕着走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>来回走</marquee>
循环
<loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>
速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！
</marquee>
延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走
一步，停一停！</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee>
面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>
二、无间断循环跑马灯效果
<HTML>
<HEAD>
<TITLE>向左不间断（无缝）滚动图片js代码 - 中国asp之家收集整理 -
</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<link href="css/index.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<TABLE style="BORDER: #DEE0E0 1px solid;" cellSpacing=0 cellPadding=0
width=500 align=center border=0>
<TBODY>
<TR>
<TD width="100%" height="125" align="center">
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 99%;">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> <TBODY>
<TR>
<TD id=demo1 vAlign=top><table height="116" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td><table width="135" height="125" border="1" align="center" cellpadding="0" cellspacing="3" bordercolor="#CC3300">
<tr>
<%
sql="select * from tbl_photos order by p_id desc"
rst.open sql,conn,1,1
do while not rst.eof
%>
<td width="100" align="center" valign="middle"><% if rst("p_image")<>"" then %>
<a href="photosshow_1.asp?id=<%=rst("p_id")%>" target="_blank"><img src="photos/<%=rst("p_image")%>" alt="<%=rst("p_title")%>" width="125" height="115" border="0" align="middle" onMouseOver="this.width=124;this.height=114" onMouseOut="this.width=125;this.height=115"></a>
<% else %>
<a href="<%=rst("p_title")%>"><%=rst("p_content")%></a> <% end if
%>
</td>
<%
rst.movenext
loop
rst.close
%>
</tr>
</table></td>
</tr>
</table></TD>
<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)} </SCRIPT>
</TD></TR></TBODY></TABLE>
</BODY></HTML>。