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 相关文章推荐
json 定义
Jun 10 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
js轮播图代码分享
Jul 14 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
小程序实现筛子抽奖
May 26 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
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
php strftime函数的详细用法
2018/06/21 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PDO::errorCode讲解
2019/01/28 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python编程之属性和方法实例详解
2015/05/19 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
竞选演讲稿范文
2013/12/28 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
经典毕业生求职信
2014/07/12 职场文书
优秀教师单行材料
2014/12/16 职场文书
教师师德承诺书2016
2016/03/25 职场文书
创业计划书之家政服务
2019/09/18 职场文书