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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
vue实现树状表格效果
Dec 29 Vue.js
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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP 字符串分割和比较
2009/10/06 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
destoon官方标签大全
2014/06/20 PHP
优化javascript的执行速度
2010/01/23 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
js打造数组转json函数
2015/01/14 Javascript
JSON相关知识汇总
2015/07/03 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
配置eslint规范项目代码风格
2019/03/11 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python开发之thread实现布朗运动的方法
2015/11/11 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
打架检讨书500字
2014/01/29 职场文书
生物技术专业求职信
2014/06/10 职场文书
瘦西湖导游词
2015/02/03 职场文书
乒乓球比赛通知
2015/04/27 职场文书
大学生逃课检讨书
2015/05/04 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书