<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="keywords" content="">

        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" >

        <meta name="description" content="" >

        <title></title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            html{

                width: 100%;

                height: 100%;

            }

            body{

                width: 100%;

                height: 100%;/*相对于父级的100%  父级是html*/

                position: relative;/*相对定位 父级*/

                overflow: hidden;

                background: #222;

            }

            .balloon{

                position: absolute;/*绝对定位*/

                top: 0;

                left: 0;

                height: 160px;

                width: 160px;

                margin: 0 auto;

                background: #faf9f9;

                box-shadow: -8px -8px 80px -8px rgba(234,80,122,0.6) inset;/*横向 纵向 羽化 大小 颜色*/

                border-radius:160px 160px 64px 160px;/*圆角属性 左上 右上 右下 左下 （顺时针）*/

                transform: rotate(45deg);

                -webkit-transform: rotate(45deg);

            }

            .balloon::after{/*伪元素  不存在的 css创建出来的元素**/

                position: absolute;

                bottom: 0;

                right: 0;

                content: '';/*开启伪元素*/

                display: block;

                width: 0;

                height: 0;

                border: 8px solid transparent;/*四边透明*/

                border-right-color: rgba(234,98,122,.8);/*设置右边边框*/

                transform: rotate(45deg);

                -webkit-transform: rotate(45deg);

            }

        </style>

    </head>

    <body>

    </body>

</html>

<script type="text/javascript">

    //js 基于原型的动态解释性 脚本语言

    /**

     * 1 .响应用户操作 点击鼠标

     * 2 .操作页面DOM节点 增删改查 css样式

     * 3 .数据交互 ajax json 正则表达式

     * 4 .封装插件 框架 mvc mvvm augular vue node.js

     */

    /**

     * 1 .利用js动态生成div  并且初始化气球的坐标

     *      1.生成几个

     *      2.怎么生成

     * 2 .气球动起来

     *      1 .改变气球top

     *   2 .在一定时间内一直减少top值

     *

     *

     * 3 .点击气球，爆炸

     *      1. 点击-放气动画

     *   2. 删除

     * 知识点： querySelector  querySelectorAll   （h5 api 兼容ie8）

     * call  函数执行的时候  改变函数内部this指向为当前环境下的this

     * bind  硬绑定当前延时触发函数的内部this指向为当前环境下的this

     *

     * 【进阶】 迭代 递归 函数 词法作用域

     * */

    var num = 10;/*气球数量*/

    var wW = window.innerWidth;//浏览器宽度

    var wH = window.innerHeight;

    var bW = 160;//气球宽度

    var timer = null;//初始化定时器

    init();

    timer = setInterval(move,30);

    function init(){

        for(var i = 0;i<10;i++){

            var randomX = Math.floor(Math.random()*wW)-bW;

            randomX = Math.max(0,randomX);//限制left最小为0

            var oBalloon = document.createElement('div');

            oBalloon.className = 'balloon';//添加类名

            oBalloon.style.left = randomX+'px';

            oBalloon.style.top = wH - bW + 'px';

            oBalloon.speed = Math.random()*4+1;//自定义属性

            document.body.appendChild(oBalloon);//添加到body

            oBalloon.onclick = function(){

                boom.call(this,function(){

                    clearInterval(this.timer);//移除定时器

                    this.parentNode.removeChild(this);

                });//call 转移this指向

                //this.parentNode.removeChild(this);

            }

        }

    }

    /*

     * 气球运动

     */

    function move(){

        var oBalloons = document.querySelectorAll('.balloon');

        for(var i=0,len=oBalloons.length;i<len;i++){

            oBalloons[i].style.top = oBalloons[i].offsetTop - oBalloons[i].speed+'px';

        }

    }

    function boom(callback){//气球放气动画

        var This = this;

        this.timer = setInterval(function(){//setInterval里面的this指向widown    相当于window.setInterval

            if(this.offsetWidth<10){

                console.log('delete')

                callback&&callback.call(this);

            }

            this.speed = this.speed + 1;//速度递加

            this.style.width = this.offsetWidth-10+'px';//缩小

            this.style.height = this.offsetHeight-10+'px';

            this.style.top = this.offsetTop-this.speed+'px';//加速向上

        }.bind(this),30);

    }

</script>

[JS] 气球放气效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  5. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  6. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  7. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  9. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

随机推荐

  1. 【Git】二、安装配置

    一.Git安装 Linux $ apt-get install libcurl4-gnutls-dev libexpat1-dev gettext \ libz-dev libssl-dev $ ap ...

  2. sqoop安装配置

    下载 sqoop-1.4.5 安装包 配置 sqoop-env.sh #Set path to where bin/hadoop is available 配置Hadoop export HADOOP ...

  3. LevelDB Compaction操作

    [LevelDB Compaction操作] 对于LevelDb来说,写入记录操作很简单,删除记录仅仅写入一个删除标记就算完事,但是读取记录比较复杂,需要在内存以及各个层级文件中依照新鲜程度依次查找, ...

  4. thrift框架

    thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, Perl ...

  5. interrupt()方法的简单理解

    interrupt() 方法只是改变中断状态而已,它不会中断一个正在运行的线程.这一方法实际完成的是,给受阻塞的线程发出一个中断信号,这样受阻线程就得以退出阻塞的状态.更确切的说,如果线程被Objec ...

  6. 链接ftp，把文件或图片上传到ftp指定的文件夹中

    /******************************************************************** *  * * Filename : .java * Auth ...

  7. Mybatis之Configuration初始化（配置文件.xml的解析）

    源码解读第一步我觉着应该从Mybatis如何解析配置文件开始. 1.先不看跟Spring集成如何解析,先看从SqlSessionFactoryBuilder如果解析的. String resouce ...

  8. vue项目 调用百度地图 BMap is not defined

    这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...

  9. DevExpress,LayoutControl,TreeList,GridControl等

    1.显示边框进行折叠 选择一个layoutControlGroupX 将其GroupBordersVisible设置成True,将TextVisiable=True 2. TreeList 2.1需要 ...

  10. centos7安装kubernetes 1.1

    原文地址:http://foxhound.blog.51cto.com/1167932/1717105 前提:centos7 已经update yum update -y 一.创建yum源 maste ...