专栏首页Java技术分享圈杨老师课堂之JavaScript右下角广告弹框

杨老师课堂之JavaScript右下角广告弹框

预览效果图:

Html代码:

<html>
<body>
<div id="silu">
<button onclick="tips_pop()">3秒后会在右下角自动弹出窗口,如果没有弹出请点击这个按钮</button>
</div>
<div id="winpop">
<div class="title">您有新的短消息!<span class="close" onclick="tips_pop()">X</span></div>
    <div class="con">1条未读信息(</div>
</div>
</body>
</html>

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-align: right;
    text-decoration: underline;
    line-height: 22px;
}
.close {
    position: absolute;
    right: 4px;
    top: -1px;
    color: #FFF;
    cursor: pointer;
}

JavaScript代码:

window.onload=function(){//加载
    document.getElementById('winpop').style.height='0px';
    setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数
    } 
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
  }
 }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 杨老师课堂之JavaScript案例之自动切换轮播图片

            2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

    杨校
  • 杨老师课堂之JavaScript定时器案例的红绿灯设计

    杨校
  • 杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

            1.3 中间区域盒子中使用无序列表进行排放图片,并且每个图片可以作为一个链接进行点击

    杨校
  • 传统企业站开发 - 模块开发(二)

    上周我们讲解了页面模块的制作,详情可见:传统企业站开发 - 模块开发,我们到底如何更好的实现模块的制作,小编这边继续给大家举一个例子来进行讲解。那今天我们为大家...

    HTML5学堂
  • 利用Win32 Disk Imager 实现U盘刻录ISO

    近日电脑需要安装Linux系统(CentOS、Kali),由于无光驱,需要把操作系统ISO镜像写入到U盘。于是找到Win32 Disk Imager (下载地址...

    技术训练营
  • CSS行高(line-height)及文本垂直居中原理

    在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中...

    Dunizb
  • iPhone X的UI设计技巧

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 果粉们翘首以待的iPhone X终于开始预售了!同样满怀...

    奔跑的小鹿
  • 人体姿态估计--RMPE: Regional Multi-Person Pose Estimation

    RMPE: Regional Multi-Person Pose Estimation ICCV2017 Code is based Caffe an...

    用户1148525
  • Hello Serverless 实战技术开放日 | 沙龙回顾

    Hello Serverless 实战技术 2019年10月26日,Hello Serverless 沙龙活动在广州市海珠区腾讯众创空间成功举办,现在跟着小编...

    腾讯云serverless团队
  • 软件测试工程师SQL笔试题

    测试人员工作在工作中会用到SQL来辅助测试,求职时也常常会在笔试环节遇到各种各样的sql设计题目,张老师整理了一些工作中常用的sql知识点,希望对大家有所帮助。

    张树臣

扫码关注云+社区

领取腾讯云代金券