Cet article décrit l'effet d'affichage flottant de téléphone mobile simple et facile à utiliser. Partagez-le pour votre référence, comme suit:
HTML:
<style type = "text / css">. fdbontel {width: 100%; hauteur: 53px; Position: fixe; Contexte: # 0052AE; Texte-aligne: Centre; à gauche: 0; en bas: 0; Z-Index: 999; } .fdonline {background: url (index / images / online.png) no-repeat; Largeur: 255px; hauteur: 181px; Position: fixe; Gauche: 50%; marge-gauche: -128px; en haut: 40%; Z-Index: 999; Border-Radius: 15px; Box-shadow: 0 0 20px rgba (10, 2, 4, 0,75);}. fdonline .fdoclose {largeur: 44px; hauteur: 44px; Affichage: bloc; marge: -17px; marge-droite: -6px;}. fdonline .fdotel {background: # cf3; Largeur: 127px; hauteur: 58px; Affichage: bloc; marge-top: 123px;}. fdonline .fdoon {background: # 036; Largeur: 128px; hauteur: 58px; Affichage: bloc; margin-top: 96px;} </ style> <div> <img src = "index / images / fdtel.gif" usemap = "# maps"> <map name = "maps" id = "maps"> <area forme = "rect" coords = "2,2,79,52" onclick = "openzoosUrl ();"> <ares coords = "77,2,166,52" href = "tel: 0855-8253310"> <area forme = "rect" coords = "166,4,242,51" onclick = "openzoosurl ();"> <area forme = "rect" coordonats = "248,5,318,53" " onclick = "openzoosurl ();"> </aph> </div> <div 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 {width: 100%; height: 53px; position: fixe; fond: # 0052ae; text-adign: Center; Left: 0; en bas: 0; z-index: 999; } "); document.writeln (". fdonline {background: url (index / images / online.png) sans répétition; largeur: 255px; hauteur: 181px; position: fixe; gauche: 50%; marge-left: -128px; top: 40%; Z-index: 999; border-radius: 15px; box-shadow: 0 0,10px Rgba (10, 10, box-shadow: 0 020px RGBA (10, border-radius: 15px; box-shadow: 0 020px RGBA (10, 10, Box-shadow: 0 020px Rgbau (10, 10, Box-Shadow: 0 0,10. 2, 4, 0,75);} "); document.writeln (". fdonline .fdoclose {width: 44px; hauteur: 44px; affichage: bloc; margin-top: -17px; margin-right: -6px;}"); Document.Writeln (". Fdonline .fdotel {largeur: 127px; hauteur: 58px; affichage: bloc; margin-top: 123px;}"); document.writeln (". fdonline .fdoon {width: 128px; hight: 58px; affichage: blogy-top: 96px;}"); classe = / "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 (" <area forme = / "rect /" coords = / "2,2,79,52 /" onclick = / "openzoosurl (); /"> "); document.writeln (" <ère forme = / "rect /" coords = / "77,2,166,52 /" href = / "Tél: 0855-8253310 /"> "); document.writeln (" <aire forme = / "rect /" coords = / "166,4,242,51 /" onclick = / "openzoosurl (); /"> "); document.writeln (" <ampointe forme = / "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 = "fdoonl f_r / "> </a>"); document.writeln ("</div>"); fonction showOnline () {if (document.getElementById ("fdonline")) {if (document.getElementById ("fdonline"). style.display == "Aucun") {document.getElementyd ("fdonline"). }}} fonction closeOnline () {document.getElementById ("fdonline"). style.display = "Aucun"; setInterval (chkswt, 30000);}; $ (function () {setInterval (showOnline, 30000);});Image de reproduction:
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé de l'algorithme de traversée JavaScript et compétences", "Résumé des compétences JavaScript Switching Special Effects", "Résumé des effets spéciaux de la recherche JavaScript", "Résumé des erreurs de données javascript et compétences en algorithme "et" Résumé de l'utilisation de l'opération mathématique JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.