この記事では、JSによるフローティングウィンドウ効果の簡単な実装について説明します。次のように、参照のために共有してください。
HTMLパーツ：
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> untled document </<style = <style = "> cs"> xパディング：0;} a img {border：0;} </style> </head> <body> <div style = "height：2000px; background：#ccc; display：none;"> </div> <！ - div id = "floatad" stiled = "position：fixed！fixet！fixt; fixt; fixt; fixt; position：aspolute; _top（document.documentelement.documentelement.ClientHeight-OffseThe）ノーリピート：487px; style = "width：26px; height：26px; float：right;"> </div> <div onclick = "open_online（）;"> </div> </div> <div id = "floatside" style = "width; _top：eval（document.documentelement.document.documentelement.clientheight-offseeth）） onclick = "open_online（）;> </div-> </body> </html> <script =" text/javascript "src =" online.js "> </scrip>JSパート：
// javascript document //フローティング広告画像var floatadimg = "images/onlinesay.jpg"; // floating sidebar image var floatsidimg = "images/onlinetel.gif"; //オンライン通信open_online（）{）{）{ window.open（ 'http://p.qiao.baidu.com//im/index?siteid=7342332&ucid=7601325'）;} //フローティング広告document.writeln（ "<div =/" floatad/"style =/" position！ _top：document.scrolltop+document.clientheight-offsethes）ノーリピート：487px：350px; style =/"width：487px; height：320px; float：right;/" onclick =/"open_online（）;/"> </div> "）; document.writeln（" </div> "）; //フローティングサイドバードキュメント。 _top：eval（document.documentelement.document.documentelement.clientheight-offseethed）; onclick =/"open_online（）;/"> </div> "）; // close floating Advertising function closefad（）{document.getelementbyid（ 'floatad'）。style.display = 'none';} showfloat（）{document.getElementByid（ 'floatad'）。style.display= 'block';} //ウィンドウ関数を開きますshowfloat（）{document.getelementbyid（ 'floatad'）。style.display = 'block';} //ウィンドウを20秒間開き、セットイムアウトのみを実行します; SetInterval（showfloat、30000）;レンダリングは次のとおりです。
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Traversal Algorithm and Skills", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Data構造とアルゴリズムのスキル」および「JavaScriptの数学的操作の使用の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。