Este artículo describe el efecto de pantalla de la ventana flotante de teléfono móvil simple y fácil de usar. Compártelo para su referencia, como sigue:
HTML:
<style type = "text/css">. fdbontel {width: 100%; Altura: 53px; Posición: fijo; Antecedentes:#0052AE; Text-Align: Center; Izquierda: 0; Abajo: 0; Índice Z: 999; } .fdonline {fondo: url (index/images/online.png) no-repeat; Ancho: 255px; Altura: 181px; Posición: fijo; Izquierda: 50%; margen-izquierda: -128px; Arriba: 40%; Índice Z: 999; Border-Radius: 15px; Shadow de caja: 0 0 20px RGBA (10, 2, 4, 0.75);}. FDOnline .fdoClose {ancho: 44px; Altura: 44px; Pantalla: bloque; margen-top: -17px; margin-right: -6px;}. fdonline .fdotel {fondo:#cf3; Ancho: 127px; Altura: 58px; Pantalla: bloque; margen-top: 123px;}. fdonline .fdoon {fondo:#036; Ancho: 128px; Altura: 58px; Pantalla: bloque; Margin-top: 96px;} </style> <div> <img src = "index/images/fdtel.gif" useMap = "#maps"> <map name = "maps" id = "maps"> <área shape = "rect" coords = "2,2,79,52" en click = "abreZoosUrl ();"> <área de rect " coords = "77,2,166,52" href = "Tel: 0855-8253310"> <área de forma = "rect" coords = "166,4,242,51" onClick = "OpenZoosurl ();"> <Area Shape = "rect" coordinados = "248,5,318,53" "" "" "" " onClick = "OpenZoosurl ();"> </map> </iv> <divi id = "fdonline"> <a href = "###" onClick = "CloseOnline ();"> <img src = "index/images/closebtn.png"> </a> <a href = "##"> </a> <a href = "###"> </a> </div>JS:
// javascript documentDocument.WriteLn ("<style type =/" text/css/">"); document.writeLn (". Fdbontel {ancho: 100%; altura: 53px; posición: fijo; antecedentes:#0052e; text-align: centro; izquierda: 0; fondo: 0; z-index: 999; } "); document.WriteLn (". 4, 0.75);} "); document.writeLn (". fdonline .fdoClose {ancho: 44px; altura: 44px; display: block; margin-top: -17px; margin-right: -6px;}"); document.writeLn (". fdonline .fdoTel {width: 127px; altura: 58px; display: block; margin-top: 123px;}"); document.writeLn (". fdonline .fdoon {width: 128px: 58px; display: block; margin-top: 96px;}"); class =/"fdbontel/"> "); document.writeLn (" <img src =/"index/images/fdtel.gif/" useMap =/"#maps/"> "); document.writeln (" <map name =/"maps/" "); document.writeln (" <name de map =/"maps/"/" id =/"maps/"> "); document.writeLn (" <área de forma =/"rect/" coords =/"2,2,79,52/" onClick =/"OpenZoosUrl ();/"> "); document.writeln (" <área de área =/"rect/" coords =/"77,2,166,52/"/"" href =/"Tel: 0855-8253310/"> "); document.WriteLn (" <Area Shape =/"Rect/" Coords =/"166,4,242,51/" onClick =/"OpenZoosUrl ();/"> "); Docum.WriteLn (" <Area Area Shape =/"Rect/" Coords =/"248,5,318,53/" onClick =/"OpenZoosurl ();/"> "); document.writeLn (" </map> "); document.writeln (" </div> "); document.writeln (" <Div class =/"fdonline/" id =/"fdonline/"> "); document.writeLn (" <a href =/"###/" class =/"fdoClose f_r/" onClick =/"CloseOnline ();/"> <img src =/"index/images/closeBtn.png/" " width =/"44/" height =/"44/"> </a> "); document.writeLn (" <a href =/"###/" class =/"fdotel f_l/"> </a> "); document.writeln (" <a href =/"###/" class =/"fdoon f_r/"> </a>"); document.writeLn ("</div>"); function showOnline () {if (document.getElementById ("fdonline")) {if (document.getElementById ("fDOnline"). style.display == "Ninguno") {document.getElementByid ("fdonline"). style "). }}} function CloseOnline () {document.getElementById ("fdonline"). style.display = "none"; setInterval (chkswt, 30000);}; $ (function () {setInterval (showOnline, 30000);});Imagen de reproducción:
Para obtener más información sobre el contenido relacionado con JavaScript, consulte los temas de este sitio: "Resumen del algoritmo y habilidades de traversal de JavaScript", "Resumen de JavaScript Cambio de efectos especiales y habilidades de algoritmo de búsqueda de JavaScript", "Resumen de los efectos especiales de animación de JavaScript y habilidades", "Summary of Javasscript y habilidades de debugging de Javugging", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "," "," "," " Estructuras y habilidades de algoritmo "y" Resumen del uso de la operación matemática de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.