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一些不错的函数脚本代码
Sep 10 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Angular 作用域scope的具体使用
Dec 11 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 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
Zend Framework分页类用法详解
2016/03/22 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python调用webservice接口的实现
2019/07/12 Python
python框架flask表单实现详解
2019/11/04 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
一道Delphi面试题
2016/10/28 面试题
自我鉴定三原则
2014/01/13 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
模范家庭事迹材料
2014/02/10 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
刑事起诉书范文
2015/05/19 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js