右下角弹出窗口效果是常见的弹出窗口效果之一,比如可以作为广告窗口,也可以作为网站的一些公告或者通知,非常的实用,下面就通过实例简单介绍一下如何实现此功能,代码如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>网页右下角的信息框-51前端</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.让窗口居于网页的右下角:

实现代码如下:
   [ 其他 ] 运行代码    下载代码
<script>
#winpop {
  width:200px;
  height:0px;
  position:absolute;
  right:0;
  bottom:0;
  border:1px solid #666;
  margin:0;
  padding:1px;
  overflow:hidden;
  display:none;
}
</script>

代码描述:JavaScript 网页弹出信息框。JavaScript网页右下角弹出广告信息框实例代码



266 355



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到