<!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. java中回调函数的使用

    package com.huawei.common; import java.sql.ResultSet;import java.sql.SQLException; /** * 回调函数 * @aut ...

  2. python's decorator&wrapper

    [python's decorator&wrapper] decorator A function returning another function, usually applied as ...

  3. Kubernetes集群的安装部署

    此文参照https://www.cnblogs.com/zhenyuyaodidiao/p/6500830.html,并根据实操过程略作修改. 1.环境介绍及准备: 1.1 物理机操作系统 物理机操作 ...

  4. 文件上传：input file FileReader

    js: window.onload = function () { var input = document.getElementById('input-file'), info = document ...

  5. mybatis调用存储过程获得取返回值

    总体思路:map传值 controller: Map<String,Object> m=new HashMap<String,Object>(); m.put("na ...

  6. ADF控件ID变化引发JS无法定位控件的解决方法

    原文地址:ADF控件ID变化引发JS无法定位控件的解决方法作者:Nicholas JSFF定义的控件ID到了客户端时往往会改变.例如在JSFF中的一个的ID为"ot1",但是当这个 ...

  7. code3286 火柴排队

    这道题目相当于是让我们把a,b对齐,即a中第i大的数与b中第i大的数下标相同一看到交换次数,很容易让人想到归并排序我的做法是这样的就样例而言:a:1 3 4 2b:1 7 2 4读进来之后先处理a,b ...

  8. 签名Android应用程序

    Android要求对作为产品发布的应用进行签名(包名相同的化,后安装的应用会覆盖前面安装的应用) 签名作用:1.确定发布者的身份.2.确保应用的完整性. 注意:在应用的开发.调试阶段,Eclipse的 ...

  9. 从cookie中取值$.cookie(）

    从cookie中取值: var userid = $.cookie("remoteuserid");例子: function delUser() {     var table = ...

  10. 20155311 2016-2017-2 《Java程序设计》第8周学习总结

    20155311 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 通用API: •日志API • 日志: 日志对信息安全意义重大,审计.取证.入侵检测等都会用 ...