文章發佈於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; 數值。

arrow
arrow
    全站熱搜

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

    E-mail轉寄