網頁特效JavaScript的應用 113

◎請先下載整個WWW資料夾至D:，解壓縮所有檔案。

◎使用Notepad++開啟檔案：index.html

相關參考: 網頁特效館、璟川老師網頁特效教學

一、簡易跑馬燈語法: <marquee> </marquee>

（一）語法範例: (複製貼上在<body style=...........>之後)

歡迎光臨7xxxxooo的首頁

</font>

</marquee>

（二）語法說明:

1. 速度: scrollAmount="30" (數字越大越快)

2. 暫停時間: scrollDelay="20" (數字越大越久)

3. 背景色: bgcolor="#aaff00" (色碼表)

5. 捲動方式: behavior =可填 alternate、scroll、slide (來回跑動、單方向跑動、只跑一次)

6. 捲動方向: direction =可填 left、right

二、會動的超連結: css語法

（一）語法說明:當滑鼠碰到有超連結圖片或文字時會動一下。

（二）使用方式: 找到網頁原始碼<head>後方，複製下方五行文字(CSS語法)，貼在下一行

<!--

a:hover{position:relative;top:5px;left:5px;}

-->

</style>

（三）語法說明:

1. a:hover 滑鼠碰到超連結(<a></a>)語法 hover(滑鼠過去)

2. position:relative (位置是相對位置)

3. top:5px;left:5px; (top、letf:會往右下角動一下) (1px~10px皆可調整)

(可填top、bottom、left、right)

三、滑鼠帶圖: js語法

（一）語法說明:圖片可以跟著滑鼠移動。(圖片下載，檔名請存成 m1.gif，存在www資料夾中)

（二）使用方式: 將下列 JavaScript語法貼在該網頁原始碼<body....> 之後

<!--

if (yyns4)

{if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }

else{

yy_ml=(event.clientX + document.body.scrollLeft);

yy_mt=(event.clientY + document.body.scrollTop);

}

if (yy_tracescript)eval(yy_tracescript)

}

function m()

{

document.all.cursor.style.left=yy_ml+10

document.all.cursor.style.top=yy_mt+10

}

//-->

</script>

<!--

var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;

if (yyns4) document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = YY_Mousetrace;

yy_tracescript = 'm()';

//-->

</script>

（三）語法說明:

1. 紅字部分為圖片檔案名稱

2. 其它語法不要變動。(除非你看得懂!!)

四、顯示時間及參觀時間: js語法

（一）語法說明: 可以看見目前日期時間及參訪時間

（二）使用方式: 將下列 JavaScript語法貼在該網頁原始碼</body> 之前

<tr>

<!--

function visitor()

{

//define variable

var Jsay;

var Jdayr;

var Jtoday= new Date();

var Jyear= Jtoday.getYear(); Jmonth=Jtoday.getMonth();

Jday= Jtoday.getDay(); Jdate=Jtoday.getDate();

Jhrs= Jtoday.getHours(); Jmin=Jtoday.getMinutes();

Jsec=Jtoday.getSeconds();

document.write("<font size=+2>");

document.write("<font color=khaki>");

if (Jhrs<12)

document.write("<font color=yellow>"+"早安"+"</font>");

else if (Jhrs<18)

document.write("<font color=red>"+"午安"+"</font>");

else

document.write("<font color=cyan>"+"晚安"+"</font>");

document.write('\t'+"<font color=white>"+'!!'+"</font>");

document.write("<font color=white>"+"今天是"+"</font>");

document.write('<font color=white>'+'西元'+'</font>'+(Jyear+1900)+"<font color=white>"+"年"+"</font>");

document.write((Jmonth+1));

document.write("<font color=white>"+"月"+"</font>"+Jdate+"<font color=white>"+"日"+"</font>");

if (Jday==1)

document.write("<font color=white>"+"星期"+"</font>"+"<font color=cyan>"+"一"+"</font>");

else if (Jday==2)

document.write("<font color=white>"+"星期"+"</font>"+"<font color=chartreuse>"+"二"+"</font>");

else if (Jday==3)

document.write("<font color=white>"+"星期"+"</font>"+"<font color=darksalmon>"+"三"+"</font>");

else if (Jday==4)

document.write("<font color=white>"+"星期"+"</font>"+"<font color=mediumaquamarine>"+"四"+"</font>");

else if (Jday==5)

document.write("<font color=white>"+"星期"+"</font>"+"<font color=lightgrey>"+"五"+"</font>");

else if (Jday==6)

document.write("<font color=white>"+"星期"+"</font>"+"<font color=orangered>"+"六"+"</font>");

else if (Jday==7)

document.write("<font color=white>"+"星期"+"</font>"+"<font color=dodgerblue>"+"日"+"</font>");

}

visitor();

//-->

</script><spacer size="10"><br>

您蒞臨的時間是 :

<!--

//define variable

var Jsay;

var Jdayr;

var Jtoday= new Date();

var Jyear= Jtoday.getYear(); Jmonth=Jtoday.getMonth();

Jday= Jtoday.getDay(); Jdate=Jtoday.getDate();

Jhrs= Jtoday.getHours(); Jmin=Jtoday.getMinutes();

Jsec=Jtoday.getSeconds();

document.write('<b><font color=white size=+2>'+Jhrs+'點'+Jmin+'分');

document.write('</b></font>');

//-->

</script></font></td>

</tr>

</table>

</div>

（三）語法說明:

1. 紅字部分為 border為框線(0~5)、bgcolor、font size皆可自行調整

2. 其它語法不要變動。(除非你看得懂!!)

!!!務必存檔!!!