当前位置 - 股票行情交易網 - 企業服務 - 用js 實現走馬燈效果,橫向的怎麽實現?縱向的又是怎麽實現的?

用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:350px;width:200px">

<div id="demo1">

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a><p>

<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><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a><p>

</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>

<!-- 橫向無縫滾動-->

<div style="margin-top:20px;">

<div id="scroll_div" style="overflow: hidden; WIDTH: 778px;" align=center>

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td id="scroll_begin">

<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>

</table>

</div></div>

<script>

var speed1=40

var scroll_end = document.getElementById("scroll_end");

var scroll_div = document.getElementById("scroll_div");

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee1(){

if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)

scroll_div.scrollLeft-=scroll_begin.offsetWidth

else{

scroll_div.scrollLeft++

}

}

var MyMar1=setInterval(Marquee1,speed1)

scroll_div.onmouseover=function() {clearInterval(MyMar1)}

scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}

</script>

</body>

</html>