气球飞天特效

Html

Css

* {
	margin:0;
	padding:0;
}
body {
	background:#ccc;
}
.balloon {
	width:160px;
	height:160px;
	border-radius:80px 80px 20px 80px;
	/* 圆角 左上 右上 右下 左下*/
			background:#fff;
	transform:rotate(45deg);
	/* 旋转45度*/
			box-shadow:-8px -8px 80px -8px #873940 inset;
	/* 盒子阴影*/
			position:absolute;
}
.balloon::after {
	/*伪元素*/
			content:'';
	/*激活伪元素*/
			position:absolute;
	bottom:0;
	right:0;
	width:0;
	height:0;
	border:8px solid transparent;
	border-right-color:#873940;
	transform:rotate(45deg);
	/* 旋转45度*/
			border-radius:16px;
}

$(function() {
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    var size = 160;
    var timer = null; //初始化定时器

init(10);
    // 定时器循环执行move函数
    timer = setInterval(move, 1000 / 30);
    move();
    // 初始化气球
    function init(num) {
        for (var i = 0; i < num; i++) {
            var oballoon = document.createElement('div'); /*创建元素*/
            oballoon.className = 'balloon';
            var randomX = ~~(Math.random() * winW) - size; //取随机数  ~~取整
            randomX = Math.max(0, randomX); //返回最大值
            //console.log(randomX)
            oballoon.style.top = winH - size + 'px'; //初始化top值
            oballoon.style.left = randomX + 'px';
            oballoon.speed = ~~(Math.random() * 8) + 1; //Math.random()获取0-1之间的随机数  自定义速度
            document.body.appendChild(oballoon); /*添加元素到body中*/
        }
    }

// 事件代理
    document.body.addEventListener('click', function(e) {
        //console.log(e)
        if (e.target.className.toLowerCase() === 'balloon') { //toLowerCase 把字符串转换为小写
            boom.call(e.target, function() { //call改变函数内部this指向
                this.parentNode.removeChild(this);
                init(1);
            }.bind(e.target)); //bind 硬绑定
        }
    });
    //点击气球爆破
    function boom(cb) {
        this.timer = setInterval(function() {
            if (this.offsetWidth < 10) {
                cb && cb(); //执行回调函数
                //this.parentNode.removeChild(this);
                clearInterval(this.timer); //终止定时器
            }
            this.speed++;
            this.style.top = this.offsetTop - this.speed + 'px';
            this.style.width = this.offsetWidth - 10 + 'px';
            this.style.height = this.offsetHeight - 10 + 'px';
        }.bind(this), 1000 / 60);
    }

// 气球移动
    function move() {
        // 获取所有气球
        var allBalloon = document.querySelectorAll('.balloon'); //获取所有.balloon元素
        var len = allBalloon.length;
        for (var i = 0; i < len; i++) {
            allBalloon[i].style.top = allBalloon[i].offsetTop - allBalloon[i].speed + 'px';
        }
        //requestAnimationFrame(move); //帧动画执行move函数
    }
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

气球飞天特效



代码描述：点击气球爆破，代码注释全

1

最新

发表评论全部评论

暂时没有评论！

恬恬~0

2017/8/7 15:12:23

气球太大了，但是不知道怎么编辑再提交上去。来不及点击都飞没了回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

恬恬~

相关代码

气球飞天特效

最新