Rumah >hujung hadapan web >tutorial js >js pop timbul kotak contoh kod di sudut kanan bawah kemahiran_javascript

js pop timbul kotak contoh kod di sudut kanan bawah kemahiran_javascript

WBOYasal: 2016-05-16 15:20:311307semak imbas

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>

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;
}

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menentukan jenis versi pelayar berdasarkan jQuery1.9 version_jqueryArtikel seterusnya：Bagaimana untuk menentukan jenis versi pelayar berdasarkan jQuery1.9 version_jquery

Artikel berkaitan

Lihat lagi