A步驟

1.開啟html的新檔案(Ctrl+N)

FloatAdv_02.gif

2.另存新檔→命名為floatadv.html

FloatAdv_06.gif

3.切換到程式碼模式

FloatAdv_08.gif

4.輸入

<script src="new.js" language="JavaScript"></script>

用來呼叫new.js這個檔案

FloatAdv_11.gif

5.儲存

FloatAdv_15.gif

B步驟

1.開啟一個Javascript的新檔案(Ctrl+N)

 FloatAdv_18.gif

2.命名為new.js

 FloatAdv_21.gif

3.在頁面上輸入

// JavaScript Document
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
    diffY = document.documentElement.scrollTop;
else if (document.body)
    diffY = document.body.scrollTop
else
    {/*Netscape stuff*/}
    
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";


lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
suspendcode12="<DIV id=\"lovexin12\" style='left:22px;POSITION:absolute;TOP:232px;LEFT:180px;'><a href=JavaScript:; onclick=\"lovexin12.style.visibility='hidden'\"><img border=0 src=../FloatAdv/images/FloatAdv.gif></a></div>"



document.write(suspendcode12);

window.setInterval("heartBeat()",1);

FloatAdv_24.gif

 

4.其中必須將紅色的字換成你想出現的圖片路徑

FloatAdv_27.gif

5.藍色部分，是圖片的版面位置所在

FloatAdv_29.gif

 

6.儲存！

7.切換到floatadv.html用IE預覽就可以看到成品囉！

PS.若您要合併到其他網頁上，只需將new.js檔案拷貝到其網頁的根目錄中
     並在遇加入此特效的網頁<body>後加入
     <script src="new.js" language="JavaScript"></script>
     這樣就可以囉！

 

 

arrow
arrow
    全站熱搜

    vmaya 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄