js pop timbul kotak contoh kod di sudut kanan bawah kemahiran

js pop timbul kotak contoh kod di sudut kanan bawah kemahiran_javascript

WBOY

Lepaskan： 2016-05-16 15:20:31

asal

1316 orang telah melayarinya

Artikel ini menerangkan contoh kod kotak maklumat pengiklanan yang muncul di penjuru kanan sebelah bawah halaman web dan berkongsinya dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

Rendering:

Kod khusus:

<!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>

Salin selepas log masuk

Kod di atas melaksanakan fungsi yang kami perlukan Berikut adalah pengenalan ringkas kepada proses pelaksanaan.
Prinsip pelaksanaan:
Prinsipnya sangat mudah. Berikut adalah pengenalan ringkas langkah demi langkah:
1. Letakkan tetingkap di penjuru kanan sebelah bawah halaman web:
Kod pelaksanaan adalah seperti berikut:

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

Salin selepas log masuk

Kod di atas menetapkan elemen windpop kepada kedudukan mutlak, terutamanya nilai atribut kanan dan bawahnya ditetapkan kepada 0, yang memastikan ia terletak di sudut kanan bawah halaman web, dan juga menetapkannya ketinggian kepada 0px, iaitu Mengatakan ia tersembunyi secara lalai.
2. Cara menunjukkan dan menyembunyikan:
Fungsi changeH() dipanggil setiap masa yang ditentukan melalui fungsi pemasa setInterval(). . Prinsipnya lebih kurang sama seperti di atas, jadi saya tidak akan memperkenalkannya banyak di sini.

Di atas ialah kod pelaksanaan untuk kotak gesaan pop timbul di penjuru kanan sebelah bawah. Saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.