空间管理您的位置: 51Testing软件测试网 » enjoyspace的个人空间 » 日志

JS实现横向、纵向跑马灯效果

上一篇 / 下一篇 2009-09-11 12:17:44 / 个人分类：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>无缝滚动</title>
<style. type="text/css">
img{
border:0;
height:100px; width:150px;
}
td img{
margin:0 10px;
}
</style>
</head>
<body>

<div id="demo" style="overflow:hidden;height:200px;width:1000px">
<div id="demo1">
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_05.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_06.jpg"></a>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a>
</div>
<div id="demo2">
</div>
</div>
<script>
var speed=40;
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

$CdKBg:l)Ss0

go(R+z$m0<div style="margin-top:20px;">
5m/aSm6J6U%Lai|0<div id="scroll_div" style="overflow: hidden; WIDTH: 778px;" align=center>
0[@ X%g6]d0<table border="0" cellpadding="0" cellspacing="0">
<tr>
/LD$yLY8Cdq0<td id="scroll_begin">51Testing软件测试网C_;PC\
<a href="#"><img src="jsfile/imagesa32/gundong_11.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_01.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_02.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_03.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_04.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_05.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_06.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_07.jpg" border=0></a></td>
<td id="scroll_end"></td>
</tr>
g{!`+W9T;xF0</table>51Testing软件测试网,q\ORYL uK
</div></div>51Testing软件测试网PIcj@SV
<script>51Testing软件测试网T}M7v3P-y
var speed1=40
2Tp2syEg0var scroll_end = document.getElementById("scroll_end");
/{i:j8B;vD1M:v0var scroll_div = document.getElementById("scroll_div");51Testing软件测试网g#OZXci
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee1(){
3q8~u/rf;\q"D1N2l0if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
.i*P?s[QH0scroll_div.scrollLeft-=scroll_begin.offsetWidth51Testing软件测试网 A4K;w:l/kO o
else{
scroll_div.scrollLeft++
V)VGS X'UpI%{+r,b v0}
HXG lo[Z0}
)^j(Iy{ mp1^'|b8b0var MyMar1=setInterval(Marquee1,speed1)
7z/a?D2y/S{]~0scroll_div.onmouseover=function() {clearInterval(MyMar1)}
?&G/gRj$Xz&Q0scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}
</script>

P-TW q!M+{vFL0</body>51Testing软件测试网:vL'QPY
</html>
]L9ef[O%m1}0本贴来自ZDNetChina中文社区http://bbs.zdnet.com.cn,本贴地址：http://bbs.zdnet.com.cn/viewthread.php?tid=64374751Testing软件测试网pW+@|\#ik

;n5y6?h/{h0

/M'X2s8l$um|0还有个横向的，也比较好啦

y#_s&v6E.ab\0<table width=700 border=0 cellpadding=0 cellspacing=0>
q$o3O%\D-l1g0<tr><td>
<div id=www_qpsh_com style=overflow:hidden;height:120px;width:700px;color:#ff0000><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=www_qpsh_com1 valign=top>
"@G^(x*L.H*tw0<table border=0 cellpadding=0 cellspacing=0>
<tr><td><a href=http://www.qpsh.com/javascript/showpage2443.htm target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9097.jpg" width=150 height=100 hspace=22></a><br><center><b>说明一</b></center></td>
|7Xs5W@y;w2S0<td width=30></td>
YOB*@[s0<td><a href=http://www.qpsh.com target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9092.jpg" width=150 height=100 hspace=22></a><br><center><b>说明二</b></center></td></td>
<td width=30></td>
n4d2^qU,S_TSK0<td><a href=http://www.3sdo.com target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9084.jpg" width=150 height=100 hspace=22></a><br><center><b>说明三</b></center></td>
wLD;a8N-]0<td><a href=http://www.sanguo5.com target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9079.jpg" width=150 height=100 hspace=22></a><br><center><b>说明四</b></center></td>
S5HE'Y6j%mn_!qB@0<td width=30></td>
<td><a href=http://www.pc555.com target=_blank><img border=0 src="http://www.qpsh.com/icon/BS9070.jpg" width=150 height=100 hspace=22></a><br><center><b>说明五</b></center></td>
8eE&h r&qHp0</tr>
:x;v9OP:pl0</table>51Testing软件测试网^5WO m1~.X g
</td><td id=www_qpsh_com2 valign=top></td></tr></table></div>51Testing软件测试网/}~-g l1z
<script>51Testing软件测试网S4JeQ&X4g
var speed=10//速度数值越大速度越慢
www_qpsh_com2.innerHTML=www_qpsh_com1.innerHTML
5s*INXq:|0function Marquee(){51Testing软件测试网A'~ \*e(F4cm
if(www_qpsh_com2.offsetWidth-www_qpsh_com.scrollLeft<=0)
A ]y,kT8cN+r$hB!@0www_qpsh_com.scrollLeft-=www_qpsh_com1.offsetWidth
iN+R i!A7?(NYL0else{
www_qpsh_com.scrollLeft++
yz;J*FQ7y7u0}
!wm/_,{K0}
var MyMar=setInterval(Marquee,speed)
`tc'g{0hNi0www_qpsh_com.onmouseover=function() {clearInterval(MyMar)}
2Lo/seMV3hp0www_qpsh_com.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>51Testing软件测试网"DZ8[3f^
</td></tr>
c\@)[r6i0</table>51Testing软件测试网n-X}ml m.K