开发者社区> 杨校> 正文

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

简介: 案例制作思路:   1、先制作界面     添加一个盒子包含一个按钮,使盒子绝对定位在右上角     添加一个大盒子,同理,将盒子居于左下角;其中内部包含一个顶端盒子和底部盒子             顶端盒子因为是属于大盒子内部的存在,所以宽度是占满整个大盒子的宽度,内部文本设置字体12号、居中显...
+关注继续查看

案例制作思路:

  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;            /*大盒子距离右方为0像素*/
                top: 0;              /*大盒子距离上方为0像素*/
            }
            #ad{             /*大盒子*/
                width: 200px;        /*大盒子的宽度*/
                height: 0;           /*大盒子的高度*/
                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;           /*距离右侧边距为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)咨询。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14216 0
好程序员教程分享Javascript设计模式
  好程序员教程分享Javascript设计模式方法一 对象字面量表示法  在对象字面量表示法中,一个对象被描述为一组包含在大括号中,以逗号分隔的 name/value 对。对象内的名称可以是字符串或标识符,后面跟着一个冒号。
1037 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
28018 0
前端开发教程:JavaScript的相等比较你了解吗?
如果你是一个JavaScript新手,那么有些基础知识需要你掌握,从新手到大神就是一条踩坑和出坑的过程,下面先说一个最基本的相等。前端开发教程:JavaScript的相等比较你了解吗? 相等 如果你搞C#或Java一定非常熟悉==比较运算符。
740 0
《趣学JavaScript——教孩子学编程》——1.3 编写JavaScript
本节书摘来自异步社区《趣学JavaScript——教孩子学编程》一书中的第1章,第1.3节,作者: 【美】Nick Morgan(摩根)译者: 李强,更多章节内容可以访问云栖社区“异步社区”公众号查看。
1928 0
《JavaScript和jQuery实战手册(原书第2版)》——3.2节教程:使用条件语句
本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第3章,第3.2节教程:使用条件语句,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看
1202 0
《趣学JavaScript——教孩子学编程》——1.5 本章小结
本节书摘来自异步社区《趣学JavaScript——教孩子学编程》一书中的第1章,第1.5节,作者: 【美】Nick Morgan(摩根)译者: 李强,更多章节内容可以访问云栖社区“异步社区”公众号查看。
1760 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20120 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23538 0
+关注
杨校
我是一名培训讲师,在常年的开发工作中涉及到的领域有:javaEE、SSM、SSH、Oracle、Linux、Maven、SVN、JavaScript、Eexcl VBA等技术。简单来说我也算是一名全栈技术讲师,有着丰富的技术培训和技术讲座的经验。
75
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载