recherche

Maison >interface Web >js tutoriel >js, exemple de code de boîte de dialogue contextuelle dans le coin inférieur droit_javascript skills

js, exemple de code de boîte de dialogue contextuelle dans le coin inférieur droit_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:20:311312parcourir

Cet article explique l'exemple de code de la boîte d'informations publicitaires qui apparaît dans le coin inférieur droit de la page Web et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

Rendu :

Code spécifique : 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>网页右下角的信息框</title>
</head>
<style type="text/css">
#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}
#winpop .title{
 width:100%;
 height:22px;
 line-height:20px;
 background:#FFCC00;
 font-weight:bold;
 text-align:center;
 font-size:12px;
}
#winpop .con{
 width:100%;
 height:90px;
 line-height:80px;
 font-weight:bold;
 font-size:12px;
 color:#FF0000;
 text-decoration:underline;
 text-align:center
}
#silu{
 font-size:12px;
 color:#666;
 position:absolute;
 right:0;
 text-decoration:underline;
 line-height:22px;
}
.close{
 position:absolute;
 right:4px;
 top:-1px;
 color:#FFF;
 cursor:pointer
}
</style>
<script type="text/javascript">
function tips_pop(){
 var MsgPop=document.getElementById("winpop");
 var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
 if(popH==0){
 MsgPop.style.display="block";//显示隐藏的窗口
 show=setInterval("changeH('up')",2);
 }
 else{ 
 hide=setInterval("changeH('down')",2);
 }
}
function changeH(str){
 var MsgPop=document.getElementById("winpop");
 var popH=parseInt(MsgPop.style.height);
 if(str=="up"){
 if(popH<=100){
 MsgPop.style.height=(popH+4).toString()+"px";
 }
 else{ 
 clearInterval(show);
 }
 }
 if(str=="down"){ 
 if(popH>=4){ 
 MsgPop.style.height=(popH-4).toString()+"px";
 }
 else{ 
 clearInterval(hide); 
 MsgPop.style.display="none"; //隐藏DIV
 }
 }
}
window.onload=function(){
 var oclose=document.getElementById("close");
 var bt=document.getElementById("bt");
 document.getElementById('winpop').style.height='0px';
 setTimeout("tips_pop()",3000);
 oclose.onclick=function(){tips_pop()}
 bt.onclick=function(){tips_pop()}
}
</script>
<body>
<div id="silu">
 <button id="bt">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</div>
<div id="winpop">
 <div class="title">您有新的短消息！<span class="close" id="close">X</span></div>
 <div class="con">1条未读信息(</div>
</div>
</body>
</html>

Le code ci-dessus implémente les fonctions dont nous avons besoin. Voici une brève introduction au processus d'implémentation.
Principe de mise en œuvre :
Le principe est très simple. Voici une brève introduction étape par étape :
1. Placez la fenêtre dans le coin inférieur droit de la page Web :
Le code d'implémentation est le suivant :

#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}

Le code ci-dessus définit l'élément Windpop sur un positionnement absolu, en particulier ses valeurs d'attribut droite et inférieure sont définies sur 0, ce qui garantit qu'il est situé dans le coin inférieur droit de la page Web, et définit également son hauteur à 0px, c'est-à-dire qu'il est masqué par défaut.
2. Comment afficher et masquer :
La fonction changeH() est appelée à chaque heure spécifiée via la fonction de minuterie setInterval(). Cette fonction peut définir en continu la hauteur du vent en fonction de la valeur transmise, obtenant ainsi une apparition et une disparition fluides de cette fenêtre. . Le principe est à peu près le même que ci-dessus, je ne le présenterai donc pas beaucoup ici.

Ce qui précède est le code d'implémentation de la boîte de dialogue contextuelle dans le coin inférieur droit. J'espère qu'il sera utile à tout le monde pour apprendre la programmation javascript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment déterminer le type de version du navigateur en fonction de jQuery1.9 version_jqueryArticle suivant：Comment déterminer le type de version du navigateur en fonction de jQuery1.9 version_jquery

Articles Liés

Voir plus