[JS] 气球放气效果

<!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>
posted on 2017-05-26 18:40 晏过留痕阅读(657) 评论(0) 编辑收藏举报