この記事では、シンプルで使いやすい携帯電話フローティングウィンドウディスプレイ効果について説明します。次のように、参照のために共有してください。
HTML：
<style type = "text/css">。fdbontel {width：100％;高さ：53px;位置：修正;背景：＃0052AE;テキストアライグ：センター;左：0;下：0; Z-Index：999; } .fdonline {background：url（index/images/online.png）no-repeat;幅：255px;高さ：181px;位置：修正;左：50％;マージン左：-128px;トップ：40％; Z-Index：999;ボーダーラジウス：15px; Box-Shadow：0 0 20px RGBA（10、2、4、0.75）;}。fdonline.fdoclose {width：44px;高さ：44px;表示：ブロック;マージントップ：-17px;マージン右：-6px;}。fdonline.fdotel {background：＃cf3;幅：127px;高さ：58px;表示：ブロック;マージントップ：123px;}。fdonline.fdoon {background：＃036;幅：128px;高さ：58px;表示：ブロック;マージントップ：96px;} </style> <div> <img src = "index/images/fdtel.gif" usemap = "＃maps"> <map name = "maps" id = "maps"> <領域形状= "rect" coords = "2,2,79,52" Coords = "77,2,166,52" href = "Tel：0855-8253310"> <領域形状= "rect" coordss = "166,4,242,51" onclick = "openzoosurl（）;"> <領域形状= "rect" rect "rect" 248,5,318,53 " </map> </div> <div id = "fdonline"> <a href = "###" onclick = "closeonline（）;"> <img src = "index/closebtn.png"> </a> <a href = "###"> </a>JS：
// javascript documentdocument.writeln（ "<style type =/" text/css/">"）; document.writeln（ "。fdbontel{width：100％; height：53px; position：fixt; } "）; document.writeln（"。fdonline{background：url（index/images/online.png）no-repeat; width：255px; height：181px; position：fixed; left：50％; margin-left：-128px; top：40％; z-dexex：999; border-radius：15px; 4、0.75）;} "）; document.writeln（ "。fdonline.fdoclose {width：44px; height：44px; display：block; margin-top：-17px; margin-right：-6px;}"）; document.writeln（ "。fdonline.fdotel {width：127px; height：height：58px; display：block; margin-top：123px;}"）; document.writeln（ "。fdonline.fdoon {width：128px; height：58px; document：disply：96px; class =/"fdbontel/"> "）; document.writeln（" <img src =/"index/images/fdtel.gif/" usemap =/"＃maps/"> "）; document.writeln（" <map name =/"maps/" "）; document.writeln（" <map name =/"maps/" id =/"maps/"> "）; document.writeln（" <領域shape =/"rect/" coords =/"2,2,79,52/" onclick =/"openzoosurl（）;/"> "）; document.writeln（" <領域形状=/"rect/" coords =/"77,2,166,52/" href =/"Tel：0855-8253310/"> "）; document.writeln（" <領域shape =/"rect/" coords =/"166,4,4,242,51/" onclick =/"openzoosurl（）;/"> "）; document.writeln（" <エリア形状=/"rect =/" rect/"248,5,5,5 onclick =/"openzoosurl（）;/"> "）; document.writeln（" </map> "）; document.writeln（" </div> "）; document.writeln（" <div class =/"fdonline/" id =/"fdonline/"> "）; document.writeln f_r/"onclick =/" closeonline（）;/"> <img src =/" index/closebtn.png/"width =/" 44/"height =/" 44/"> </a>"）; document.writeln（ "<a href =/" ##/"class =/" <a href =/"###/" class =/"fdoon f_r/"> </a> "）; document.writeln（" </div> "）; function showonline（）{if（document.getElementbyid（" fdonline "））{if（document.getElementbyid（" fdonline "）。 document.getElementById（ "fdonline"）。style.display = "block"; }}} function closeonline（）{document.getElementById（ "fdonline"）。style.display= "none"; setInterval（chkswt、30000）;}; $（function（）{setinterval（showonline、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プログラミングに役立つことを願っています。