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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
一个简单的js树形菜单
Dec 09 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
Angular 应用技巧总结
Sep 14 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
JavaScript 类的封装操作示例详解
May 16 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/04/25 PHP
Jquery ui css framework
2010/06/28 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
javascript判断office版本示例
2014/04/11 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
js微信分享实现代码
2020/10/11 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python实现简单登陆流程的方法
2018/04/22 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
8种常用的Python工具
2020/08/05 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
优秀护士演讲稿
2014/04/30 职场文书
媒体宣传策划方案
2014/05/25 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
医院见习报告范文
2014/11/03 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
大学生实习推荐信
2015/03/27 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server