บทความนี้อธิบายเอฟเฟกต์การแสดงผลหน้าต่างลอยน้ำมือถือที่เรียบง่ายและง่ายต่อการใช้งาน แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
html:
<style type = "text/css">. fdbontel {width: 100%; ความสูง: 53px; ตำแหน่ง: แก้ไข; ความเป็นมา:#0052AE; TEXT-ALIGN: CENTER; ซ้าย: 0; ด้านล่าง: 0; z-index: 999; } .FDONLINE {ความเป็นมา: URL (ดัชนี/รูปภาพ/online.png) ไม่มีการทำซ้ำ; ความกว้าง: 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 {พื้นหลัง:#cf3; ความกว้าง: 127px; ความสูง: 58px; แสดง: บล็อก; ขอบด้านบน: 123px;}. fdonline .fdoon {พื้นหลัง:#036; ความกว้าง: 128px; ความสูง: 58px; แสดง: บล็อก; ระยะขอบด้านบน: 96px;} </style> <div> <img src = "ดัชนี/รูปภาพ/fdtel.gif" usemap = "#maps"> <map name = "แผนที่" id = "แผนที่"> <areal shape = "rect" coords = "2,2,79,52 Coords = "77,2,166,52" href = "โทรศัพท์: 0855-8253310"> <รูปร่างพื้นที่ = "rect" coords = "166,4,242,51" onClick = "OpenZOOSURL ();"> onclick = "openzoosurl ();"> </map> </div> <div id = "fdonline"> <a href = "###" onclick = "closeOnline ();"> <img src = "ดัชนี/ภาพ/closebtn.png"> </a> <a href = "# href = "###"> </a> </div>JS:
// JavaScript DocumentDocument.writeLn ("<style type =/" text/css/">"); document.writeln (". fdbontel {ความกว้าง: 100%; ความสูง: 53px; ตำแหน่ง: คงที่; } "); document.writeLn (". fdonline {พื้นหลัง: url (ดัชนี/รูปภาพ/onlan.png) ไม่ต้องทำซ้ำ; ความกว้าง: 255px; ความสูง: 181px; ตำแหน่ง: แก้ไข; ซ้าย: 50%; 2, 4, 0.75);} "); document.writeLn (". fdonline .fdoclose {width: 44px; ความสูง: 44px; แสดง: block; margin-top: -17px; margin-right: -6px;}"); document.writeln (". fdonline .fdotel {width: 127px; ความสูง: 58px; แสดง: block; margin-top: 123px;}"); document.writeln (". fdonline .fdoon {ความกว้าง: 128px; ความสูง: 58px; class =/"fdbontel/"> "); document.writeln (" <img src =/"ดัชนี/รูปภาพ/fdtel.gif/" usemap =/"#maps/"> "); document.writeln (" <map name = "แผนที่/" "); id =/"แผนที่/"> "); document.writeLn (" <areal shape = "rect/" coords =/"2,2,79,52/" onclick =/"openzoosurl ();/"> "); Wwriteln (" <area phace = "rect/" Coords =/"77,1 href =/"โทรศัพท์: 0855-8253310/"> "); document.writeLn (" <รูปร่างพื้นที่ =/"rect/" coords =/"166,4,242,51/" onclick =/"openzoosurl ();/"> "); document.writeln (" shape =/"rect/" coords = "248,5,318,53/" onclick =/"openzoosurl ();/"> "); document.writeln (" </map> "); document.writeln (" </div> "); document.writeln ( id =/"fdonline/"> "); document.writeln (" <a href =/"###/" class =/"fdoclose f_r/" onclick =/"closeNline (); ความกว้าง =/"44/" ความสูง =/"44/"> </a> "); document.writeln (" <a href =/"###/" class =/"fdotel f_l/"> </a> "); document.writeln (" <a href =/"###/" f_r/"> </a>"); document.writeln ("</div>"); ฟังก์ชั่น showonline () {ถ้า (document.getElementById ("fdonline")) {ถ้า (document.getElementById ("fdonline"). style.display == "ไม่มี" }}} ฟังก์ชั่น closeOnline () {document.getElementById ("fdonline"). style.display = "ไม่มี"; setInterval (chkswt, 30000);}; $ (function () {setInterval (showonline, 30000);});ภาพการทำซ้ำ:
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปอัลกอริทึมและทักษะการสำรวจ JavaScript", "บทสรุปของการสลับเอฟเฟกต์พิเศษและทักษะการค้นหา JavaScript ของ JavaScript โครงสร้างและทักษะอัลกอริทึม "และ" สรุปการใช้งานทางคณิตศาสตร์ของ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน