2010年11月30日 星期二

[Java Script]浮動圖層(Java Script篇)

文章發佈於Sevendesign，如需轉貼請保留本訊息，並註明原文連結
原文連結：http://sevendesign1230.pixnet.net/blog/post/2484891
 
浮動圖層（Floating Layer）的技術其實經常應用在許多較長的網頁文件中，藉以呈現能隨著瀏覽器的捲軸移動的浮動廣告或快速選單。有許多的方法都能達到此效果，在此提供利用JavaScript的方法來達到浮動圖層的效果，如需使用Css達到浮動圖層效果請點此。

<head>與</head>之間
<script language="javascript">
<!--
lastScrollY=0;
function rollimg(){
var varY = document.body.scrollTop;
if (varY <= 0)
{
varY = document.documentElement.scrollTop;
}
percent=.1*(varY-lastScrollY);
if(percent >0 )
percent=Math.ceil(percent);
else
percent=Math.floor(percent);
var top = parseInt(document.getElementById("floatlayer").style.top);
document.getElementById("floatlayer").style.top = (top += percent) + "px";
lastScrollY += percent;
document.getElementById("floatlayer").style.left=(document.body.clientWidth/2+357)+"px";
}
window.setInterval("rollimg()",1);
//-->
</script>
<body>與</body>之間
<DIV id="floatlayer" style="position: absolute; top: 50px">
※註1：document.getElementById("floatlayer").style.left=(document.body.clientWidth/2+357)+"px";浮動圖層定位位置為水平置中+357px，
亦可寫成document.getElementById("floatlayer").style.left=50+"px"直接帶入數值。
※註2：若要修改幅動圖層距離頁首的距離請修改top: 50px; 數值。
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)