<!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. ireport related

    http://blog.csdn.net/q326527970/article/details/7049047

  2. java常量池与对象存储

    一 数据存储位置                                 我们先来谈谈数据的存储位置,有五个地方可以存储数据 (1)寄存器:这是最快的存储区,因为它位于不同于其他存储区的地方- ...

  3. 从上往下打印二叉树(java)

    import java.util.ArrayList; import java.util.*; /** public class TreeNode { int val = 0; TreeNode le ...

  4. Golang之函数练习

    小例题: package main import "fmt" /* 函数练习, 可变参数使用 写一个函数add 支持1个或多个int相加,并返回相加结果 写一个函数concat,支 ...

  5. python 探测网站目录的GUI程序-乾颐堂

    1.pyqt4写的界面 find_ui.py 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  6. ASP.NET MVC与ASP.NET Web API的区别（转）

    出处:http://blog.csdn.net/wangzl1163/article/details/72676616 MVC主要用来构建网站,既关心数据也关心页面展示,而Web API只关注数据 W ...

  7. 基于swoole搭建聊天室程序

    1. 创建websocket服务器 swoole从1.7.9版本开始, 内置了websocket服务器功能,我们只需几行简单的PHP代码,就可以创建出一个异步非阻塞多进程的WebSocket服务器. ...

  8. Shell脚本传递带有空格的参数[摘录自网络]

    参数处理 说明 $# 传递到脚本的参数个数 $* 以一个单字符串显示所有向脚本传递的参数 $$ 脚本运行的当前进程ID号 $! 后台运行的最后一个进程的ID号 $@ 与$#相同,但是使用时加引号,并在 ...

  9. Android实现求和运算

    实验要求: 用Android实现一个界面,在该页面点击实现加法运算. 代码实现 实现结果 输入结果为空时,如图 问题及解决 函数中使用了强制转换,当输入字符串是也能转换为int型数据,但是当输入字符时 ...

  10. [转]分布式中使用Redis实现Session共享(二)

    本文转自:http://www.cnblogs.com/yanweidie/p/4678095.html 上一篇介绍了一些redis的安装及使用步骤,本篇开始将介绍redis的实际应用场景,先从最常见 ...