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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 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 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
图解javascript作用域链
2019/05/27 Javascript
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python批量赋值操作实例
2018/10/22 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
简单了解python PEP的一些知识
2019/07/13 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
技术总监岗位职责
2013/12/05 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
创业女性典型材料
2014/05/02 职场文书
继承权公证书范本
2015/01/23 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python