cari

Rumah  >  Artikel  >  hujung hadapan web  >  JS non-Alert melaksanakan tetingkap timbul kesan 'maklumat belum dibaca' di penjuru kanan sebelah bawah kemahiran halaman web_javascript

JS non-Alert melaksanakan tetingkap timbul kesan 'maklumat belum dibaca' di penjuru kanan sebelah bawah kemahiran halaman web_javascript

WBOY
WBOYasal
2016-05-16 15:38:071330semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan bukan Makluman JS bagi tetingkap timbul kesan "Maklumat Belum Dibaca" di penjuru kanan sebelah bawah halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kod tetingkap timbul di sudut kanan bawah halaman web Ia dibuat bersama menggunakan teknologi Div Js Ia bukan fungsi Amaran Ia meniru kod tetingkap timbul di sudut kanan bawah daripada halaman web Tencent News Pengarang kod sumber ingin memudahkan orang baru untuk memahami dan belajar.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-f-alert-right-buttom-dlg-demo/

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右下角的弹窗</title>
</head>
<style type="text/css">
body { background:#333333;}
#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden; display:none; background:#FFFFFF}
#winpop .title { width:100%; height:20px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}
#winpop .con { width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}
#silu { font-size:13px; color:#999999; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}
.close { position:absolute; right:4px; top:-1px; color:#FFFFFF; cursor:pointer}
</style>
<script type="text/javascript">
function tips_pop(){
var MsgPop=document.getElementById("winpop");//获取窗口这个对象,即ID为winpop的对象
var popH=parseInt(MsgPop.style.height);//用parseInt将对象的高度转化为数字,以方便下面比较
if (popH==0){//如果窗口的高度是0
MsgPop.style.display="block";//那么将隐藏的窗口显示出来
show=setInterval("changeH('up')",2);//开始以每0.002秒调用函数changeH("up"),即每0.002秒向上移动一次
}
else {//否则
hide=setInterval("changeH('down')",2);//开始以每0.002秒调用函数changeH("down"),即每0.002秒向下移动一次
}
}
function changeH(str) {
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){//如果这个参数是UP
if (popH<=100){//如果转化为数值的高度小于等于100
MsgPop.style.height=(popH+4).toString()+"px";//高度增加4个象素
}
else{
clearInterval(show);//否则就取消这个函数调用,意思就是如果高度超过100象度了,就不再增长了
}
}
if(str=="down"){
if (popH>=4){//如果这个参数是down
MsgPop.style.height=(popH-4).toString()+"px";//那么窗口的高度减少4个象素
}
else{//否则
clearInterval(hide);//否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了
MsgPop.style.display="none";//因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉
}
}
}
window.onload=function(){//加载
document.getElementById('winpop').style.height='0px';//我不知道为什么要初始化这个高度,CSS里不是已经初始化了吗,知道的告诉我一下
setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数
}
</script>
<body>
脚本之家提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效，为站长与网络编程从业者提供学习资料。<hr>
<div id="silu">
<button onclick="tips_pop()">测试按钮</button>
</div>
<div id="winpop">
<div class="title">您有新的消息<span class="close" onclick="tips_pop()">X</span></div>
<div class="con">未读信息(1)</div>
</div>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

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：Cara melaksanakan pembayaran WeChat untuk pembayaran halaman H5 dengan kemahiran browser_javascript terbina dalamArtikel seterusnya：Cara melaksanakan pembayaran WeChat untuk pembayaran halaman H5 dengan kemahiran browser_javascript terbina dalam

Artikel berkaitan

Lihat lagi