随机出现气球点击变小

最新推荐文章于 2023-03-07 21:57:50 发布

pingwei_deng

最新推荐文章于 2023-03-07 21:57:50 发布

阅读量278

点赞数

分类专栏： JS HTML

本文链接：https://blog.csdn.net/pingwei_deng/article/details/80009382

版权

JS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>气球飘动</title>
<meta name="keywords" content=""> 
<meta name="description" content=""> 
<style>
* {
margin: 0;
}
body {
overflow: hidden;
}
.ballon {
position: absolute;
width: 160px;
height: 160px;
/*border: 1px solid #f0f;*/
border-radius: 160px 160px 64px 160px;
box-shadow: -8px -8px 80px -8px #f0f inset;
transform: rotate(45deg);
}
.ballon:before {
position: absolute;
right: 0;
bottom: 0;
content: '';
display: block;
border: 8px solid transparent;
border-right-color: #f0f;
border-radius: 16px;
transform: rotate(45deg);
}
</style>
</head>
<body></body>
<script>
//封装后
var ww = window.innerWidth,
hh = window.innerHeight;
var balllist = []; //所有构造函数生成的对象
var body = document.querySelector('body'); //js获取元素
function Ballon() { //构造函数
this.x = (ww - 160)* Math.random();
this.y = hh;
this.vy = -(Math.random() + 1)*3;
this.step = 0;
this.scale = 1;
this.scalespeed = 1;
this.speed = (Math.random() + 1)*2;
this.init();
}
Ballon.prototype = {
init:function() { //初始化基本操作
this.div = document.createElement('div');
this.div.className = 'ballon'; //添加类名
this.setPosition();
this.register();
body.appendChild(this.div);
},
reset:function() { //重置气球位置
this.y = hh;
this.x = (ww - 160)*Math.random();
this.step = 0;
this.scale = 1;
this.scalespeed = 1;
this.setPosition();
},
setPosition:function() { //依照气球属性设置气球位置
this.div.style.top = this.y +'px';
this.div.style.left = this.x + 'px';
this.div.style.transform = 'rotate('+ this.rotate +'deg) scale('+ this.scale +')';
this.updata();
},
updata:function() {
this.step *= -1;
this.scale *= this.scalespeed; //之前大小乘放大缩小的速度
// ballon.style.top = ballon.offsetTop-speed+'px';
this.y += this.vy; //更新气球速度
this.rotate = 45 + 45*this.step; //旋转角度更新
if (this.y<-160) {
this.reset();
}
},
register:function() {
this.div.onclick = () => { //es6 =>function
this.speed = 5;
this.scalespeed = 0.97;
this.step = 1;
}
}
}
for (var i=0;i<=10;i++) {;
balllist.push(new Ballon());
}
setInterval (function(){
balllist.forEach(function(item) {
item.setPosition();
})

},1000/60)

//没封装之前
// var ww = window.innerWidth,
// hh = window.innerHeight;
// var body = document.querySelector('body'); //js获取元素
// function initballon() {
// var ballon = document.createElement('div'); //创建气球div
// ballon.style.top = hh +'px'; //初始位置
// var speed = Math.random()*2; //初始速度
// var scale = 1;
// var scalespeed = 1; //放大缩小速度
// var step = 0;
// ballon.style.left = (ww - 160)* Math.random() + 'px'; //初始位置
// ballon.className = 'ballon'; //加class
// body.appendChild(ballon);
// setInterval(function() {
// step *= -1;
// scale *= scalespeed; //之前大小乘放大缩小的速度
// ballon.style.top = ballon.offsetTop-speed+'px';
// ballon.style.transform = 'rotate('+ (45+45*step) +'deg) scale('+ scale+')';
// if (ballon.offsetTop<-160) {
// step = 0;
// ballon.style.top = hh +'px';
// ballon.style.left = (ww - 160)* Math.random() + 'px'; //初始位置
// scale = 1;
// scalespeed = 1;
// }
// },1000/60)
// ballon.onclick = function () {
// speed = 5;
// scalespeed = 0.93;
// step = 1;
// }
// }
// for (var i=0;i<=20;i++) {
// // initballon();
// }

/*
原生JavaScript
性能：
流程分析：
1.气球对象在浏览器中是一个<div class="ballon"></div>,所以要生成小气球；
2.调整气球位置
3.如何让小求动

4.点击左右晃 / 变小

querySelectorAll: dom对象构成的数组
querySelector: 静态的选择(第一个元素),完全复制出他的实物
getElementsByClassName:dom对象构成的类数组，动态选择，完全复制出他的选择方法
$('') jQuery对象没有dom的具有的方法，而又自己的方法
*/

</script>
</html>