<!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. php7源码编译安装

    以下以CentOS 7.2为例,安装php的运行环境,首先打开php官网http://php.net/点击导航栏的Downloads进入下载页面:http://php.net/downloads.ph ...

  2. TouchEvent里的targetTouches、touches、changedTouches的区别的具体体现是？

    touches:当前屏幕上所有触摸点的集合列表 targetTouches: 绑定事件的那个结点上的触摸点的集合列表 changedTouches: 触发事件时改变的触摸点的集合 举例来说,比如div ...

  3. 22.Generate Parentheses (String; Back-Track)

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  4. JS 将json数组转为嵌套层级数组

    ele UI 的树级菜单的数据要求是这种嵌套的,但是Ztree的老用发的是 var zNodes =[ { id:, pId:, name:"zTree Home", pid:0} ...

  5. eclipse或tomcat web项目启动失败其中一种解决办法

    失败信息如下: java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to s ...

  6. swagger框架

    1.1   介绍 Swagger是一个简单又强大的能为你的Restful风格的Api生成文档工具.在项目中集成这个工具,根据我们自己的配置信息能够自动为我们生成一个api文档展示页,可以在浏览器中直接 ...

  7. c语言伪常量const理解

    const是伪常量,无法用于数组的初始化和全局变量的初始化,本质就是限定一个变量不能直接赋值. 如以下代码: #define A 10 int arr[A]; //const本质,伪常量 ,无法用于数 ...

  8. sql判断表是否已经存在

    if (object_id(N'td_VipExchangeCodeInfo',N'U') is not null)print '存在'else print '不存在'

  9. centos环境下创建数据库和表的方法

    centos环境下创建数据库和表的方法 //查询数据库的命令: mysql> SHOW DATABASES; +--------------------+ | Database         ...

  10. 是什么优化让 .NET Core 性能飙升？（转）

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ .NET Core(开放源代码,跨平台,x-copy可部署等)有许多令人兴奋的方面,其中最值得称赞的就是其性能了. 感谢所有社区 ...