ホームページ >ウェブフロントエンド >jsチュートリアル >ページのスクロールに応じてJS Webページ側に広告効果を実装する_JavaScriptスキル

ページのスクロールに応じてJS Webページ側に広告効果を実装する_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 18:07:40915ブラウズ

a. ScrollTop の計算;
b. スクロール要素の位置の計算
コードは次のとおりです:


/*テスト用の高さ*/
body{ height:3000px;}
div ,ul,li,body{margin:0;padding:0;}
/*position:absolute; 要素の配置に使用します*/
#roll{width:50px; :#99CC00 ; Position:absolute;}


HTML コード:


コードをコピー コードは次のように:


JS コード:



コードをコピー
コードは次のとおりです: var roll=document。 getElementById('roll'), initX=0,
initY,
compY,
sp=15,
//時間間隔は調整できますが、ステップ値は調整しすぎないようにしてください大きい場合、IE では画面がちらつきます。 .right=initX "px";(function (){
var curScrollTop=(doc.scrollTop||docBody.scrollTop||0)-(doc.clientTop||docBody.clientTop||0) ;
//roll.style.top===doc.scrollTop initY;
compY =(curScrollTop initY-compY)/sp; まで、compP の値は異なります。 top=Math.ceil(compY) "px";
setTimeout(arguments.callee,timeGap)

;
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。