Este artigo descreve o efeito de exibição da janela flutuante de telefones móveis simples e fácil de usar. Compartilhe -o para sua referência, como segue:
html:
<style type = "text/css">. fdBontel {width: 100%; Altura: 53px; Posição: fixado; Antecedentes:#0052AE; Alinhamento de texto: centro; Esquerda: 0; Inferior: 0; Z-Index: 999; } .fdonline {background: url (índice/imagens/online.png) sem repetição; Largura: 255px; Altura: 181px; Posição: fixado; Esquerda: 50%; margem-esquerda: -128px; TOP: 40%; Z-Index: 999; Radio de fronteira: 15px; Box-Shadow: 0 0 20px rgba (10, 2, 4, 0,75);}. fdonline .fdoclose {width: 44px; Altura: 44px; exibição: bloco; Margin-top: -17px; margem-direita: -6px;}. fdonline .fdotel {background:#cf3; Largura: 127px; Altura: 58px; exibição: bloco; Margin-top: 123px;}. fdonline .fdoon {background:#036; Largura: 128px; Altura: 58px; exibição: bloco; margin-top: 96px;} </style> <div> <img src = "index/imaga/fdtel.gif" usemap = "#maps"> <mapa name = "maps" id = "maps"> <shapes shape = "rect" coords = "2,2,79,52" "OnClick =" OpenZoSoSs " coords = "77,2,166,52" href = "tel: 0855-8253310"> <área de área = "rect" coords = "166,4242,51" onclick = "OpenZoosurl ();"> <área "" "em coordinates =" 248.5.5.3 (); </map> </div id id = "fdonline"> <a href = "###" onclick = "CloseOnline ();"> <img src = "index/imaga/closebtn.png"> </a> <a href = "###"> </a> <a href = (/a> <a href = "###"> </a> <a href = (/a>JS:
// javascript documentDocument.writeln ("<style type =/" text/css/">"); document.writeln (". FdBontel {width: 100%; altura: 53px; posição: fixo; fundo:#0052e; text-align: centro; esquerda: 0; } "); document.writeln (". fdonline {background: url (índice/imagens/online.png) sem repetição; largura: 255px; altura: 181px; posição: fixo; esquerda: 50%; borda de margem: -128px; top: 40%; Z-Index: 99; 2, 4, 0,75);} "); document.writeln (". fdonline .fdoclose {width: 44px; altura: 44px; display: block; margin-top: -17px; margem-direita: -6px;}"); Document.Writeln (". FDONLINE .FDOTEL {WIDTH: 127PX; Hight: 58px; Display: Block; Margin-top: 123px;}"); document.writeln (". fdonline .fdoon {width: 128px; altura: 58px;). class =/"fdBontel/"> "); document.writeln (" <img src =/"index/imagens/fdtel.gif/" useMap =/"#maps/"> "); document.writeln (" name <mapa =/"maps/" "); document.writeln (" name =/"/"////"maps/" "); id=/"Maps/">");document.writeln(" <area shape=/"rect/"coords=/"2,2,79,52/" onClick=/"openZoosUrl();/">");document.writeln(" <area shape=/"rect/"coords=/"77,2,166,52/" href =/"Tel: 0855-8253310/"> "); document.Writeln (" <Shape da área =/"Rect/" Coords =/"166,4,242,51/" OnClick =/"OpenZoosurl ();/"> "); OnClick =/"OpenZoosurl ();/"> "); document.writeln (" </map> "); document.writeln (" </div> "); document.writeln (" <div class =/"fdonline/" id =/"fdonline/">); F_R/"ONCLICK =/" CloseOnline ();/"> <img src =/" index/imagens/closebtn.png/"width =/" 44/"Height =/" 44/"> </a>"); <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 = "bloco"; }}} função closeOnline () {document.getElementById ("fdonline"). style.display = "nenhum"; setInterval (chkswt, 30000);}; $ (function () {setInterval (showonline, 30000);});Imagem de reprodução:
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 Estruturas e habilidades de algoritmo "e" Resumo do uso de operação matemática de JavaScript "
Espero que este artigo seja útil para a programação JavaScript de todos.