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 相关文章推荐
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 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
一个目录遍历函数
2006/10/09 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
Python中进程和线程的区别详解
2017/10/29 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
护士自荐信
2013/10/25 职场文书
应届生服务员求职信
2013/10/31 职场文书
学期评语大全
2014/04/30 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA