案例制作思路：

　　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. DataLoad命令

    Dataload常用命令 Dataload命令符 说明 Tab  或\{tab} 键盘Tab键,下一个单元 *UP  或\{UP} 键盘上 *DN  或\{DOWN} 键盘下 *LT  或\{LEFT ...

  2. Salesforce 官方扫盲自学导航

    Force.com Platform Fundamentals(新手入门的葵花宝典)www.salesforce.com/us/developer/docs/fundamentals/index_Le ...

  3. mtk camera 移植步骤

    mtk camera 移植步骤: 1, Kernel层驱动代码文件添加 /mediatek/custom/doov92_wet_tdd/kernel/imgsensor/下添加imx179_mipi_ ...

  4. Android性能优化典例（二）

    1.使用 Maven 依赖方案代替使用导入jar包方案 如果项目中需要用到第三方jar包,常用的做法是去网上下载后然后放入libs文件夹,再添加到项目依赖,不过,在Android Studio已经不推 ...

  5. 网站开发进阶(十)如何将一个html页面嵌套在另一个页面中

    如何将一个html页面嵌套在另一个页面中 1.IFrame引入 <IFRAME NAME="content_frame" width=100% height=30 margi ...

  6. Leetcode_217_Contains Duplicate

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/46271159 Given an array of inte ...

  7. Myexclipse创建Junit测试

    . 下载JUnit的jar文件,下载地址在这里 2. 在MyEclipse中新建一个要测试的项目HelloJUnit 3. 添加一个要测试的类HelloJUnit,代码如下,注意需要先建package ...

  8. linux下64位汇编的系统调用(1)

    现在基本上系统都是64位了,而64位系统下的汇编和32位有了较大的变化,无论是系统调用的接口还是C标准库的接口都和32位汇编有所不同:下面简单谈一下在64位linux下如何利用汇编直接调用系统调用. ...

  9. javascript中通过元素id和name直接取得元素

    我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的 ...

  10. 恶补web之六:javascript知识(2)

    若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...