學習參考書JavaScript精緻範例辭典

回首頁 與我們連絡 網站地圖 加入我的最愛


 

四處移動的圖片

大家有沒有注意到這個網頁中有一張圖片不安分的四處游走呢?很有趣呦!趕快把這個技巧帶回你的網頁吧!保證為你首頁增色不少!
步驟一:用滑鼠將底下的一拖拉庫程式碼(藍色的喔),標記起來,按滑鼠右鍵選擇【複製】〈游標不能離開標示起來的反白區喔〉將以下的控制碼先複製起來。

步驟二:然後在網頁中的 <BODY> 之後按滑鼠右鍵選擇【貼上】將剛剛複製的東東貼上!(其實只要把程式碼貼在<BODY></BODY>標記中間任何一個地方都可以啦!)

步驟三:將原始碼中粉紅色地方的數字(移動距離與移動時間)內容改成你要的數據。

步驟四:<BODY></BODY>標記中間任何一個地方(最好是<BODY>標記下方)加上下列三行網頁敘述!

<DIV id="image" style="position: absolute;">
<img src="move.gif" alt="游移的圖片">
</DIV>

步驟五:網頁中的<BODY>要標記要寫成<BODY  onload="setTimeout('move()', 10)" ,這樣才能正確動作哦!大功告成!

 
<HTML>
<HEAD>
</HEAD>

<BODY onload="setTimeout('move()', 10)">

<!--以下這三行一定要寫哦,不然就沒有圖片出現,同時會引發JavaScript錯誤-->
<DIV id="image" style="position: absolute;">
<img src="move.gif" alt="游移的圖片"> 
<!--記得把圖片改成你要顯現的圖片-->
</DIV>

<SCRIPT language="JavaScript">
<!----
// Valor工作室小誌 [valor Studio]
var x =
5
//水平移動距離
var y =
5 //垂直移動距離
var change =
10 //移動切換時間,越大越慢
var img, img_top,img_left


function move(){
if(document.layers)
{
img = eval("document.image")
img.top = img.top + x
img.left = img.left + y
if(img_top >= window.innerHeight) x = -x
if(img_left >= window.innerWidth) y= -y
if(img_top <= 0) x = 5
if(img_left <= 0) y = 5
}

else 
{
img = eval("image.style")
img.posTop = img.posTop + x
img.posLeft = img.posLeft + y
img_top = img.posTop
img_left = img.posLeft
if(img_top >= document.body.clientHeight) x = -x
if(img_left >= document.body.clientWidth) y= -y
if(img_top <= 0) x = 5
if(img_left <= 0) y = 5
}

SetTimeout("move()", change) }
//---->
</SCRIPT>

</BODY>
</HTML>

游移的圖片
JavaScript 文件
鏈結圖片切換
簡易月曆
隨機背景底圖
蹦出式廣告視窗
觸控式背景色轉換
游標跑馬燈
鏈結說明跑馬燈
文字鏈結提示說明
四處移動的圖片
圖片式進站時間
簡易線上占卜
文字拉把遊戲
圖片拉把遊戲
定時更換圖片(1)
定時更換圖片(2)
項目導覽說明
上下震動與捲動頁面
飛行定位文字
旋轉飛行文字
幻化隱現文字
漫天飛舞
落葉片片
浮動鏈結選單
側拉式鏈結選單
友站連結/快速選單
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為