ホームページ > 記事 > ウェブフロントエンド > jQuery フローティング広告実装 code_jquery
jQuery フローティング広告実装 code_jquery
- WBOYオリジナル
- 2016-05-16 18:56:591262ブラウズ
実装方法:
コードをコピー コードは次のとおりです:
jquery- 1.2.6.js" type="text/javascript">
QQ オンライン サービス
/div>
QQfsdf オンライン サービス
🎜>
jquery ベースのフローティング広告制御コード
最近 jquery に触れて少し勉強しました。上司のニーズを満たすために、を作成しました。画面に対して静的なフローティング レイヤーです。将来使用する必要がある場合に備えて、ここにコードを記録しました。
以下は、jquery コードです。実行するには、jquery クラス ライブラリのサポートが必要です。この記事を書いた人は、jquery のバージョンが 1.3.2 でした。他のバージョンが完全に動作するという保証はありません。理解できない場合は、基本的な内容を補足する必要があります。 JavaScript と jquery の知識。これを書いたときはあまり知らなかったので、それほど多くはありません。
$(document).ready(function(){
$ (window)。 scroll( function() { //この関数はブラウザのスクロール バーを監視できます。スクロール バーが移動するとすぐに、この関数はトリガーします
var diffY = $(window).scrollTop(); //ページは現在スクロール バーの位置と上部の間の距離 [scrollTop()]
var diffH = $(window).height()/4;//フローティング バーとブラウザーの上部の間の距離。デザイナーの [height()] は、ブラウザの上部からページの 1/4 の高さを維持するためです。 diffH の値が 0 に設定されている場合、フローティング バーは画面の上部に表示されます。 🎜>varpercent=diffY diffH; //パーセントはフローティングバーの新しい高さの値としてCSSの「top」属性に割り当てられます
if(percentpercent=Math .ceil(percent);
}else{ percent=Math.floor(パーセント); //丸め
var v = パーセント "px"; //CSS 属性には単位が必要です、ここでは px です
$("#adright").css("top",v);//パーセントが top 属性に割り当てられ、ブラウザはこの値に基づいてフローティング バーの高さを動的に調整します。この高さはフローティング バーを画面の中央に維持するだけです。}
});
///////////////////// ////////////// //////// JS と HTML の境界線/////////////////////// //////////// /////////////////////////////////////
以下は HTML コードですphp、jsp、asp などの動的ページにこの部分を配置するだけで問題ありません。画像を配置したい場合は、ページの最後に配置します。 、テキスト、フラッシュを、
XXXX
の XXXX 位置に配置するだけです。ページの左側に配置したい場合は、right:25px を left:25px; に変更します。 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。