案例制作思路:

  1、先制作界面

    添加一个盒子包含一个按钮,使盒子绝对定位在右上角

    添加一个大盒子,同理,将盒子居于左下角;其中内部包含一个顶端盒子和底部盒子

            顶端盒子因为是属于大盒子内部的存在,所以宽度是占满整个大盒子的宽度,内部文本设置字体12号、居中显示、加粗

           底部盒子因为也是属于大盒子内部的存在,所以宽度也是占满整个大盒子的宽度,内部文本设置字体12号、居中显示、加粗、行高等

2、经思考分析,因为页面是在打开后3秒中进行跳转,所以需要一个延迟定时器(SetTimeout(code,millisec); code是代表一个函数的引用,millisec代表定时的毫秒数) 。所以页面一打开是没有广告存在的,所以在大盒子的css中不存在高度的设置,另设置了隐藏显示的属性!

  3、获取盒子的位置,并且设置其高度,进行接收。但是因为后的是一个对象,需要将对象进行转换成为数字。

  4、如果该数字等于0 ,表示该盒子处于隐藏的状态,则将其通过display属性中的block块状 来显现出来。【此时在右下角已然存在盒子了,只不过高度为0,需要放大进行查看】

  5、接下来,我们来操作盒子的高度问题。

    解决方案:我们可以通过定时器去完成盒子的高度设置。

          5.1.1、获取盒子

          5.1.2、获取盒子的高度

          5.1.3、判断接收到的参数是盒子高度递增或递减,若是递增参数,则需要判断盒子是否依然显示,若没有,将其递增显示,否则清除递增定时器。  若是递减参数,则需要判断盒子是否依然显示,若显示,将其递减到0,否则清除递增定时器并且隐藏盒子。

      

预览效果图:

Html代码:

<html>
</head>
<body>
<div id="div">
<button onclick="tips_pop()">3秒后会在右下角自动弹出窗口,如果没有弹出请点击这个按钮</button>
</div>
<!--大盒子-->
<div id="ad"> <!--顶端小盒子-->
<div class="toppop">
<b>您有新的短消息!</b><span onclick="tips_pop()">X</span>
</div> <!--底端小盒子-->
<div class="bottompop">1条未读信息(...)</div> </div>
</body>
</html>

Css代码:

#div{                     /*按钮盒子*/
position: absolute;  /*大盒子的定位为绝对定位*/
right:; /*大盒子距离右方为0像素*/
top:; /*大盒子距离上方为0像素*/
}
#ad{             /*大盒子*/
width: 200px; /*大盒子的宽度*/
height:; /*大盒子的高度*/
border: 1px solid #666;/*边框线为1像素 实线 灰黑色*/
position:absolute; /*大盒子的定位为绝对定位*/
bottom: 0px; /*大盒子距离下方为0像素*/
right: 0px; /*大盒子距离右方为0像素*/
display: none; /*不显示*/
}
.toppop{          /*顶端盒子*/
width: 100%; /*宽度自动适应到最宽*/
height: 22px; /*上面的盒子高22像素*/
background: gold; /*背景颜色为金黄色*/
text-align: center; /*字体居中*/
font-size: 12px; /*字号为12像素*/
}
.toppop span{       /*顶端盒子 中的 X*/
position: absolute; /*位置:绝对定位*/
right:; /*距离右侧边距为0*/
top: -1px; /*距离顶端距离为-1像素*/
color: #fff; /*“X”的颜色为白色*/
cursor: pointer; /*cursor 代表的是光标的类型;pointer代表 的是 一只小手*/
}
.bottompop{        /*底端盒子*/
width: 100%; /*宽度自动适应到最宽*/
height: 88px; /*下面的盒子高88像素*/
font-size: 12px; /*字号为12像素*/
text-align: center; /*字体居中*/
font-weight: 900px; /*字体为粗体*/
color: #ff0000; /*颜色为红色*/
line-height: 80px; /*字体的行高为80像素*/

JavaScript代码:

<script type="text/javascript">
window.onload = function(){            // 页面加载
document.getElementById("ad").style.height = '0px'
                                // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout("tips_pop()",3000);       // 设置定时器(每过3秒执行一次tips_pop)
} function tips_pop(){
var Msgpop = document.getElementById("ad");
                                // parseInt() 函数可解析一个对象,并返回一个整数
var popH = parseInt(Msgpop.style.height) // 将对象的高度转换成为数字
if(popH == 0){                //如果盒子的高度等于0 ,表示看不到 所以 处于一个隐藏状态
Msgpop.style.display="block";     //如果等于0,则去显示出来
show = setInterval("changeH('up')",3)// 设置定时器(显示的函数)
}else{
hide = setInterval("changeH('down')",3)// 设置定时器(隐藏的函数)
}
} function changeH(str){
var Msgpop = document.getElementById("ad");//Msgpop 代表的是大盒子
var popH = parseInt(Msgpop.style.height);//将对象的高度转换成为数字
                         //popH 代表盒子的高度 [是数字]
if(str == 'up'){                // 判断接受的参数是否是 up 如果是 则执行下方内容
if(popH <= 100){
                     //JavaScript toString()把数字转换为字符串:
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
}
}
}

 
作者: 杨校

出处: http://www.cnblogs.com/xiaoxiao5016

分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。

杨校老师课堂之JavaScript右下角广告弹框教程的更多相关文章

  1. js编写轮播图,广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

  2. onload + setTimeout 用法,制作广告弹框效果

    一般来说,只有 <body>,<img>, <link>, <script>,<frame>, <frameset>, < ...

  3. 杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例

    预览效果图: 使用到的知识点: 定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码 取消定时器 clearInterval:取消由setInterval设置的定时器 ...

  4. javascript中的弹框

    大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...

  5. 【】关闭QQ右下角各种弹框

    []关闭QQ右下角弹框   一:     二:   超级会员设置过滤(屏蔽)广告后可以过滤哪些广告? 1.可以过滤QQ客户端好友聊天对话框右侧出现的Flash广告.左下角的文案广告: 如图: 2.可以 ...

  6. 【逆向工具】使用x64dbg+spy去除WinRAR5.40(64位)广告弹框

    1 学习目标 WinRAR5.40(64位)的弹框广告去除,由于我的系统为x64版本,所以安装了WinRAR(x64)版本. OD无法调试64位的程序,可以让我熟悉x64dbg进行调试的界面. 其次是 ...

  7. JavaScript动态广告弹出框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 手动清除mac的广告弹框病毒 MacOSDefender

    最近在浏览亚马逊, 京东的时候, 发现会自动弹出很多广告到浏览器, 其实是中了病毒MacOSDefender. 这个病毒非常烦人, 会在你浏览电商网页的时候拼命的打开广告页面, 而且还会弹出一些提示, ...

  9. dev右下角增加弹框提示信息

    using System; using System.Drawing; using System.IO; using System.Threading; using System.Windows.Fo ...

随机推荐

  1. OpenCV stereo matching BM 算法

    一直找不到opencv stereo matching的根据和原理出处,下面这个文章贴了个链接,有时间看看: Basically OpenCV provides 2 methods to calcul ...

  2. windows与linux下的\r\n

    \n   为ASCII的0x0a   换行        \r   为ASCII的0x0d   回车         在windows   系统中,当你输入回车时会自动变成\r\n        在l ...

  3. 【一天一道LeetCode】#50. Pow(x, n)

    一天一道LeetCode系列 (一)题目 Implement pow(x, n). (二)解题 题目很简单,实现x的n次方. /* 需要注意一下几点: 1.n==0时,返回值为1 2.x==1时,返回 ...

  4. Leetcode_111_Minimum Depth of Binary Tree

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41964249 Minimum Depth of Binar ...

  5. Android Widget 开发详解(二) +支持listView滑动的widget

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/47027263 不少开发项目中都会有widget功能,别小瞧了它,他也是androi ...

  6. Swift的基础之关于“!”和“?”的使用介绍

    swift编程,不外乎是定义属性或者函数(方法),访问属性或者调用函数,类型转换,?和!在这几个过程中,都有一展身手的时候,而且,每次要考虑使用的时候,它们俩都会一起出现在我们的大脑中,用还是不用,如 ...

  7. Java进阶(十一)部分数据类型取值范围

    java整型byte,short,int,long取值范围大小 在项目开发中,需要用到随机数的生成方法,代码如下: public static String randomizeNumber(int n ...

  8. Java-collections总结

    纸上得来终觉浅,绝知此事要躬行  --陆游    问渠那得清如许,为有源头活水来  --朱熹 类Collections是一个包装类.它包含有各种有关集合操作的静态多态方法.此类不能实例化,就像一个工具 ...

  9. mysql进阶(十四) 批量更新与批量更新多条记录的不同值实现方法

    mysql 批量更新与批量更新多条记录的不同值实现方法 在mysql中批量更新我们可能使用update,replace into来操作,下面详细介绍mysql批量更新与性能. 批量更新 mysql更新 ...

  10. 轻量级网络库libevent初探

    本文是关于libevent库第一篇博文,主要由例子来说明如何利用该库.后续博文再深入研究该库原理. libevent库简介 就如libevent官网上所写的“libevent - an event n ...