js右下角弹出提示框示例代码


Posted in Javascript onJanuary 12, 2016

本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下

效果图:

js右下角弹出提示框示例代码

js右下角弹出提示框示例代码

具体代码:

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

以上代码实现了我们需要的功能,下面简单介绍一下实现过程。
实现原理:
原理非常的简单,下面分步做一下简单的介绍:
1.让窗口居于网页的右下角:
实现代码如下:

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

以上代码将windpop元素设置为绝对定位,尤其是将它的right和bottom属性值设置为0,这样就保证了它位于网页的右下角,同时也将它的高度设置为0px,也就是说在默认状态下是隐藏的。
2.如何显示和隐藏:
通过定时器函数setInterval()每隔指定时间调用一次changeH()函数,此函数可以根据传递的值不断的设置windpop的高度,这样就实现了此窗口平滑出现和消失的效果。原理大体如上,这里就不多介绍了。

以上就是右下角弹出提示框的实现代码,希望对大家的学习javascript程序设计有所帮助。

Javascript 相关文章推荐
图片之间的切换
Jun 26 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
js实现AI五子棋人机大战
May 28 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 #Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 #Javascript
提升jQuery的性能需要做好七件事
Jan 11 #Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 #Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 #Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 #Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 #Javascript
You might like
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
动态样式类封装JS代码
2009/09/02 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python列表与元组详解实例
2013/11/01 Python
python生成随机mac地址的方法
2015/03/16 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
python中def是做什么的
2020/06/10 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
英语教研活动总结
2014/07/02 职场文书
走群众路线学习笔记
2014/11/06 职场文书
接待员岗位职责范本
2015/04/15 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android