[javascript效果]marguee move top

yku javascript, 教學

這是一個簡單的例子

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

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

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

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

5
0
1
4
5

在第四個跟第五個時瞬間把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>
6

可以看到第一個項目非＂人行道 | 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);
}
</script>
</body>
</html>
7
8

發表迴響