JS非Alert实现网页右下角“未读信息”效果弹窗


Posted in Javascript onSeptember 26, 2015

本文实例讲述了JS非Alert实现网页右下角“未读信息”效果弹窗。分享给大家供大家参考。具体如下:

这是一款网页右下角的弹窗代码,运用Div+Js技术共同打造,非Alert函数那种,仿腾讯新闻的网页右下角弹窗代码,源代码作者为了让新手有一个易懂易学的好范例,在代码中加入了丰富的注释,为新手学习和使用提供了极大的便利。

运行效果截图如下:

JS非Alert实现网页右下角“未读信息”效果弹窗

在线演示地址如下:

具体代码如下:

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

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
arguments对象
Nov 20 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
vuejs选中当前样式active的实例
Aug 22 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 #Javascript
jQuery实现的登录浮动框效果代码
Sep 26 #Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 #Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 #Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 #Javascript
jQuery超简单选项卡完整实例
Sep 26 #Javascript
angularjs学习笔记之简单介绍
Sep 26 #Javascript
You might like
使用PHP维护文件系统
2006/10/09 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
js工具方法弹出蒙版
2013/05/08 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vue实现简单的日历效果
2020/09/24 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python守护线程用法实例
2017/06/23 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
数控专业应届生求职信
2013/11/27 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
中秋节超市促销方案
2014/01/30 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
安全保证书怎么写
2015/02/28 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python