[javascript效果]marguee move top @ 聰明的生活

這是一個簡單的例子

大概的構想是，先把原始要上移的範圍A copy(clone)一份放置於無接縫的下方B

當B移到動可視範圍的0px時，瞬間把A設成在0px的地方

那向上移的方式是利用外框的style屬性overflow:hidden，然後利用scrollTop一直增加，那內容物就會被向上跑了

由右向左看物件的變化大概下如(紅色代表B，藍色代表A)

在第四個跟第五個時瞬間把A設成在0px

再來做的小實驗

利用scrollTop來移動物件位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<html><body>


<div style="overflow: hidden; height: 40px; width:


267px;border:1px solid #ffff00">


<div style="width: 265px;overflow: hidden;height: 40px;" id="demo">


<div id="demo1">


<div class="newblog_ai"> 人行道 | sidewalk</div>


<div class="newblog_ai"> 楚狂人的BLOG</div>


<div class="newblog_ai"> Avant Courier</div>


<div class="newblog_ai"> 南部硬梆梆</div>


<div class="newblog_ai"> 她說寫作是一種治療</div>


</div>


</div>


</div>




<script type="text/javascript">


document.getElementById("demo").scrollTop = 100 ;


</script>


</body>


</html>

可以看到第一個項目非"人行道 | sidewalk"，而是"南部硬梆綁"，這是利用scrollTop向上移動了內層

再來利用這個特性可以來做marquee的動作了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html><body>




<div style="width: 265px;overflow: hidden;height: 40px;" id="demo">


<div id="demo1">


<div class="newblog_ai"> 人行道 | sidewalk</div>


<div class="newblog_ai"> 楚狂人的BLOG</div>


<div class="newblog_ai"> Avant Courier</div>


<div class="newblog_ai"> 南部硬梆梆</div>


<div class="newblog_ai"> 她說寫作是一種治療</div>


</div>


<div id="demo2">123</div>


</div>




<script type="text/javascript">


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


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


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




demo2.innerHTML = demo1.innerHTML;


function Marquee(){


if(demo2.offsetHeight-demo.scrollTop<=0)


{


demo.scrollTop-=demo1.offsetHeight;


}


else{


demo.scrollTop++;


}


}


var MyMar=setInterval(Marquee,25);


demo.onmouseover=function() {


clearInterval(MyMar);MyMar = null;


}


demo.onmouseout=function() {


if(MyMar!=null)


clearInterval(MyMar);


MyMar=setInterval(Marquee,25);


}