<!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. ERROR 程序出错，错误原因：'bytes' object has no attribute 'read'

    使用json解析数据时,通常遇到这里就会出现问题'bytes' object has no attribute 'read',这是由于使用的json内置函数不同,一个是load另一个是loads. i ...

  2. How To Use Google Flags

    ［How To Use Google Flags］ 1.Commandline flags are flags that users specify on the command line when ...

  3. testng的xml文件说明（TestNG DTD）

    testNG启发自JUnit和NUnit的一种测试框架,通过使用testNG使的测试更简单.,比如如下的一些特点: 1.通过注释来管理测试 2.多线程并发执行测试,且是安全的 3.支持数据驱动测试 4 ...

  4. 一些js知识点总结

    1. 函数声明与函数表达式 解析器在像执行环境中加载数据时,会先读取函数声明,并使其在执行任何代码之前都可以访问,对于函数表达式,必须等到解析器执行到它所在的代码行,才会真正被执行. 例: alert ...

  5. Hadoop2.2.0多节点分布式安装及测试

    众所周知,hadoop在10月底release了最新版2.2.很多国内的技术同仁都马上在网络上推出了自己对新版hadoop的配置心得.这其中主要分为两类: 1.单节点配置 这个太简单了,简单到只要懂点 ...

  6. 2-ubuntu下访问window的磁盘

    双系统Ubuntu无法进入Windows磁盘的解决方法 有些用户在电脑上安装了Ubuntu和Win10的双系统,正常情况下Ubuntu是可以正常访问Windows磁盘的.但是有些用户就是无法再Ubun ...

  7. vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化

    测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...

  8. VueX-状态管理器

    一.VueX功能与解决的问题 1.中央状态管理器的功能: 1.1.可以管理共享状态1.2.提供一 个可修改状态的方法1.3.提供状态获取的方法1.4.状态更改后,有通知机制 2.中央状态管理器解决的问 ...

  9. Redis是可以安装成windows服务-开机自启 win7 64位

    其实Redis是可以安装成windows服务的,开机自启动,命令如下: redis-server --service-install redis.windows.conf 安装完之后,就可看到Redi ...

  10. mongodb-win32-i386-3.0.6 使用常见错误

    1.Error parsing YAML config file: yaml-cpp: error at line 3, column 28: unknown escape character: m ...