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

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


 

上下震動與捲動頁面

這個範例是作為進站畫面的最佳效果!進站時先來個震動畫面,很特別吧!接著再來一個網頁自動瀏覽,參觀者不必自己動手拉捲動軸,網頁自己捲動,夠體貼了吧!

步驟一:用滑鼠將底下<SCRIPT Language="JavaScript"></SCRIPT>這兩個標記內的程式碼(含標記本身藍色的喔),標記起來,按滑鼠右鍵選擇【複製】〈游標不能離開標示起來的反白區喔〉將以下的控制碼先複製起來。

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

步驟三:然後再將 <FORM></FORM>之間的網頁敘述( 含<FORM> 與</FORM>)標記起來,按滑鼠右鍵選擇【複製】〈游標一樣不能離開標示起來的反白區〉將控制碼先複製起來。

步驟四:在網頁中的<BODY></BODY>標記中間你要放置按鈕的位置上按滑鼠右鍵選擇【貼上】將剛剛複製的東東貼上!大功告成!

 
<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JavaScript">
<!--
// Valor工作室小誌 [valor Studio]

//宣告程式變數
var i=0  // i為捲動網頁函數所用之變數,用來指定捲動網頁的起始值
var current = 0 // i為震動網頁函數所用之變數,用來指定網頁震動的幅度值
var timeout=0 //設定連續震動的時間變數

//對應於"捲動網頁"按鈕的"scr()"函數
function scr()
{
//利用for迴圈控制頁面捲動
for(i=0; i < 300;i++) 
//向下移
window.scroll(0,i) 
for(i=299; i>=0;i--)
 //向上移
window.scroll(0,i) 
}

//對應於"震動網頁"按鈕的"star()"函數
function star()
{
if (current > 5)
{current = 0}
//當震動幅度為5時歸零重來
window.scroll(0,current)
current=current + 5
timeout=setTimeout("star()",50)
//50為網頁震動時間間隔,值越大網頁震動頻率越低
}

//對應於"停止震動"按鈕的"stop()"函數
function stop()
{clearTimeout(timeout)}
//清除震動間隔時間
--> 
</SCRIPT>



</HEAD>


<BODY>

<!---產生表單及按鈕元件--->
<form>

<!--按下名稱為"捲動網頁"啟動Jscript程式的"scr()"函數-->
<input type=button value="捲動網頁" onclick="scr()">  

<!--按下名稱為"震動網頁"啟動Jscript程式的"star()"函數-->
<input type=button value="震動網頁" onclick="star()">

<!--按下名稱為"停止震動"啟動Jscript程式的"stop()"函數-->
<input type=button value="停止震動" onclick="stop()">


</form>



</BODY>
</HTML>

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

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