MozTW 討論區
https://forum.moztw.org/

請問fade out語法跑馬燈
https://forum.moztw.org/viewtopic.php?f=13&t=5525
1 頁 (共 1 頁)

發表人:  Sheng [ 2005-01-03, 01:23 ]
文章主題 :  請問fade out語法跑馬燈

我的網頁中有個會有淡出效果的跑馬燈
不過在Firefox上並不會顯現此效果
想請問我該如何修改語法呢

<div id="fade" style="width:400px; text-align:center; font-size:12pt; "></div>
<script type="text/javascript">
<!--
function fadetext() {
fade.style.filter="alpha(opacity="+x+", style=0)";
x=((y<50)?x+4:x-4); y+=2;
if(y==100) {
z=((z>=texts.length-1)?1:z+1); y=0;
fade.innerHTML=texts[z]; fade.style.color=tcolor[z];
}
setTimeout("fadetext();", 85);
}
var texts=new Array(14), tcolor=new Array(14), x=0, y=0, z=1;
texts[1]="";
texts[2]="不思議なまでに青い空……";
texts[3]="絵に描いなような真っ白な雲……";
texts[4]="とてもせつな&#12356";
texts[5]="涙がでそうにな&#12427";
texts[6]="";
texts[7]="夏…………";
texts[8]="あの夏はいつもと違ってい&#12383";
texts[9]="秋になっても、心の火照りが收まらな&#

12356";
texts[10]="もう一度、あの夏に会いた&#12356";
texts[11]="そして……";
texts[12]="忘れ物を取り戾した&#12356";
texts[13]="";
texts[14]="";
fade.innerHTML=texts[z]; fade.style.color=tcolor[z];
window.onload=fadetext;
//--></script>

</font></td>
</table></div>

發表人:  水幻雲 [ 2005-01-03, 09:17 ]
文章主題 : 

代碼:
<div id="fade" style="width:400px; text-align:center; font-size:12pt; "></div>

<script type="text/javascript">

<!--
function fadetext() {
   var fade = document.getElementById("fade");
   fade.style.opacity = (x-1)/100;
   fade.style.filter="alpha(opacity="+x+", style=0)";
   x = ((y<50)?x+4:x-4); y+=2;
   if(y==100) {
      z = ((z>=texts.length-1)?1:z+1); y = 0;
      fade.innerHTML = texts[z];
      fade.style.color = tcolor[z];
   }
   setTimeout("fadetext();", 10);
}
var texts = new Array(14), tcolor = new Array(14), x = 0, y= 0, z = 1;
texts[1]="";
texts[2]="不思議なまでに青い空……";
texts[3]="絵に描いなような真っ白な雲……";
texts[4]="とてもせつない";
texts[5]="涙がでそうになる";
texts[6]="";
texts[7]="夏…………";
texts[8]="あの夏はいつもと違っていた";
texts[9]="秋になっても、心の火照りが收まらない";
texts[10]="もう一度、あの夏に会いたい";
texts[11]="そして……";
texts[12]="忘れ物を取り戾したい";
texts[13]="";
texts[14]="";
window.onload = fadetext;
//-->

</script>

發表人:  風痕影 [ 2005-01-04, 01:33 ]
文章主題 : 

請將javaScript裡的fade改成document.getElementById("fade")
此外,淡出部分fade.style.filter="alpha(opacity="+x+", style=0)";這行是IE only的,因此在FF無法使用

發表人:  Sheng [ 2005-01-07, 22:52 ]
文章主題 : 

風痕影 寫:
請將javaScript裡的fade改成document.getElementById("fade")
此外,淡出部分fade.style.filter="alpha(opacity="+x+", style=0)";這行是IE only的,因此在FF無法使用

請問要改哪行的fade呢
另、若沒有淡出效果,那原來的編碼可以說是FF也接受的
因為也會有文字出現消失,只是變成沒有淡入淡出效果而已

發表人:  風痕影 [ 2005-01-07, 23:17 ]
文章主題 : 

Sheng 寫:
風痕影 寫:
請將javaScript裡的fade改成document.getElementById("fade")
此外,淡出部分fade.style.filter="alpha(opacity="+x+", style=0)";這行是IE only的,因此在FF無法使用

請問要改哪行的fade呢

當然是全部的fade囉^^

發表人:  Sheng [ 2005-01-08, 00:02 ]
文章主題 : 

我改成如下,不過現在連文字都跑不出來了
煩請指點

<p align="center">
<font color="#C0C0C0">

<div id="document.getElementById("fade")" style="width:400px; text-align:center;

font-size:12pt; "></div>
<script type="text/javascript">
<!--
function fadetext() {
document.getElementById("fade").style.filter="alpha(opacity="+x

+", style=0)";
x=((y<50)?x+4:x-4); y+=2;
if(y==100) {
z=((z>=texts.length-1)?1:z+1); y=0;
document.getElementById("fade").innerHTML=texts[z];

document.getElementById("fade").style.color=tcolor[z];
}
setTimeout("fadetext();", 85);
}
var texts=new Array(14), tcolor=new Array(14), x=0, y=0, z=1;
texts[1]="";
texts[2]="不思議なまでに青い空……";
texts[3]="絵に描いなような真&#

12387;白な雲……";
texts[4]="とてもせつな&#12356";
texts[5]="涙がでそうにな&#

12427";
texts[6]="";
texts[7]="夏…………";
texts[8]="あの夏はいつもと違&#

12387;てい&#12383";
texts[9]="秋になっても、心の火照&#

12426;が收まらな&#12356";
texts[10]="もう一度、あの夏に会&#

12356;た&#12356";
texts[11]="そして……";
texts[12]="忘れ物を取り戾した&#12356";
texts[13]="";
texts[14]="";
document.getElementById("fade").innerHTML=texts[z]; document.

getElementById("fade").style.color=tcolor[z];
window.onload=fadetext;
//--></script>

發表人:  BobChao [ 2005-01-08, 14:48 ]
文章主題 : 

ㄟ都, div 裡的 id 屬性依然設定為「fade」就可以了

另外除了 style.filter 之外,
我個人建議再多設定 style.opacity,這個標準特性是 Mozilla 系列能支援的。

(不過 opacity 的值是從 0~1, 所以假設是 80% 的話要寫成 0.8)

Sheng 寫:
<div id="document.getElementById("fade")" style="width:400px; text-align:center;

font-size:12pt; "></div>

發表人:  Sheng [ 2005-01-08, 15:11 ]
文章主題 : 

謝謝指點
不過即使我加了
document.getElementById("fade").style.opacity="0.8"
這行
也只是讓字本身變得透明
而不是所謂的淡入淡出效果(fade in /out)
另外,原來的語法雖然諸位說不被Firefox接受
但是出乎意料之外的我跑的很正常啊 @@

發表人:  訪客 [ 2005-01-08, 15:13 ]
文章主題 : 

怪,你用上面水幻兄貼的不就行了嗎?

發表人:  Sheng [ 2005-01-08, 15:30 ]
文章主題 : 

Anonymous 寫:
怪,你用上面水幻兄貼的不就行了嗎?

謝謝,不過我一開始沒發現
因為我以為他只是好心把我沒關掉論壇功能造成亂碼的文章重貼而已,結論是已經可以跑出淡出效果了,剩下的我就自己研究吧,謝謝各位

發表人:  BobChao [ 2005-01-08, 16:11 ]
文章主題 : 

Sheng 寫:
謝謝指點
不過即使我加了
document.getElementById("fade").style.opacity="0.8"
這行
也只是讓字本身變得透明
而不是所謂的淡入淡出效果(fade in /out)
另外,原來的語法雖然諸位說不被Firefox接受
但是出乎意料之外的我跑的很正常啊 @@


mmm ... 我想你說的「正常」是指「色彩」淡入淡出,那個在原來程式裡的寫法的確是跨瀏覽器的 (style.color)

1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/