js網頁側邊隨頁面滾動廣告效果實現

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

a.scrollTop的計算;
b.滾動元素的定位值計算;
c.滾動週期設定;
程式碼如下:
css部分:
複製程式碼 程式碼如下:
/*測試用的高度*/
body{ height:3000px;}
div,ul,li,body{margin:0; padding:0;}
/*position:absolute;用於元素的定位*/
#roll{width:50px; height:100px; background:#99CC00; position:absolute;}

Html程式碼:
複製程式碼 程式碼如下:
<body>
<div id=”roll”></div>
</body>

JS程式碼:
複製程式碼 程式碼如下:
var roll=document.getElementById(‘roll’),
initX=0,
initY,
compY,
sp=15,
//可調整時間間隔,步進值不宜過大,不然IE下有點閃屏;
timeGap=5,
doc=document.documentElement,
docBody=document.body;
compY=initY=200;
roll.style.right=initX “px”;
;(function(){
var curScrollTop=(doc.scrollTop||docBody.scrollTop||0)-(doc.clientTop||docBody.clientTop||0);
//每次comP的值都不一樣;直到roll.style.top===doc.scrollTop initY;
compY =(curScrollTop initY-compY)/sp;
roll.style.top=Math.ceil(compY) “px”;
setTimeout(arguments.callee,timeGap);
})();

您可能感興趣的文章:

js漂浮廣告實現程式碼(合集經典) 符合W3C又一個不錯的js浮動廣告程式碼JS實現懸浮移動視窗(懸浮廣告)的特效相容多瀏覽器的JS 浮動廣告[推薦]js 居中漂浮廣告js退彈 IE關閉時彈出廣告程式碼,可以防止遮蔽用javascript實現的仿Flash廣告圖片輪換效果相容性非常好的js右下角與漂浮廣告程式碼Js右下角視訊廣告程式碼(百度視窗)js仿拉勾網首頁穿牆廣告效果

相關文章

前端開發 最新文章