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 相关文章推荐
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
javaScript Array api梳理
Mar 31 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
认识less和webstrom的less配置方法
2017/08/02 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
python实现代理服务功能实例
2013/11/15 Python
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
商务助理岗位职责
2013/11/13 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
人事科岗位职责范本
2014/03/02 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python