需求
在背景中任意點選滑鼠,對應的橫坐标位置有煙花上升,
一直上升到滑鼠點選位置後炸開,
煙花顔色完全随機
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#container {
width: 80%;
height: 600px;
border: 1px red solid;
position: relative;
margin: 20px auto;
cursor: pointer;
background: black;
}
.fire {
background: red;
position: absolute;
/* 設定bottom時,top擷取為最大值,減去滑鼠點選位置 */
bottom: 0px;
width: 6px;
height: 6px;
}
.small-fire {
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
}
</style>
<body>
<div id="container">
</div>
<script>
// 1 給div綁定點選事件
function Fire() {
this.con = document.getElementById('container');
this.con.onclick = this.conClickFn.bind(this);
}
// 2 頁面點選函數
Fire.prototype.conClickFn = function (eve) {
//console.log(eve);
// 3 擷取相對于元素的坐标
this.offX = eve.offsetX;
this.offY = eve.offsetY;
//console.log(this);
this.bigFire();
}
// 4 聲明大煙花
Fire.prototype.bigFire = function () {
// 4-1 生成div,且追加類
let bigDiv = document.createElement('div');
bigDiv.className = 'fire';
//4-2 設定left值
bigDiv.style.left = this.offX + 'px';
// 4-3 随機顔色
bigDiv.style.background = this.getColor();
// 4-4 div追加到頁面中
this.con.appendChild(bigDiv)
// 4-5 讓大煙花運動到,滑鼠點選的top值
this.move(bigDiv, { top: this.offY }, function () {
// console.log('完了...');
// 清除大煙花
bigDiv.remove();
// 調用小煙花
this.smallFire();
//console.log(this);
}.bind(this))
}
// 5 小煙花的生成
Fire.prototype.smallFire = function () {
// 5-1 小煙花個數
var num = 50;
for (let i = 0; i < num; i++) {
let smallDiv = document.createElement('div');
// 5-2 設定樣式
smallDiv.className = 'small-fire';
smallDiv.style.left = this.offX + 'px';
smallDiv.style.top = this.offY + 'px';
smallDiv.style.background = this.getColor();
// 5-3 追加到頁面中
this.con.appendChild(smallDiv);
// 5-4 随機出重點的left和top值
let endLeft = this.rand(0, this.con.clientWidth - smallDiv.offsetWidth);
// 讓煙花的top值小于滑鼠點選的位置
let endTop = this.rand(0, this.offY);
// 5-5 調用運動函數
this.move(smallDiv, { left: endLeft, top: endTop }, function () {
//console.log('完了...');
smallDiv.remove();
})
}
}
// 随機數
Fire.prototype.rand = function (min, max) {
return Math.round(Math.random() * (max - min) + min)
}
// 随機顔色
Fire.prototype.getColor = function () {
var c = '#';
for (var i = 0; i < 6; i++) {
c += this.rand(0, 15).toString(16)
}
return c;
}
// 運動函數
// var times = '';
Fire.prototype.move = function (ele, taObj, cb) {
clearInterval(ele.times);
let that = this;
ele.times = setInterval(function () {
// 設定清除定時器的開關
var onOff = false;
// 周遊運動的屬性
for (let attr in taObj) {
// console.log(attr);
// 擷取元素的實時的運動屬性值
let tmpPos = parseInt(that.getPos(ele, attr));
// 計算speed
let speed = (taObj[attr] - tmpPos) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 将運動屬性進行更新
ele.style[attr] = tmpPos + speed + 'px';
// console.log(tmpPos + speed, taObj[attr]);
//判斷是否達到目标值
if ((tmpPos + speed) == taObj[attr]) {
onOff = true;
}
}
// 判斷開關
if (onOff) {
// console.log(times, 222);
clearInterval(ele.times);
// 回調函數存在,就調用
cb && cb();
}
}, 30)
//console.log(times, 111);
}
// 擷取元素的實時位置的函數
Fire.prototype.getPos = function (obj, attr) {
if (obj.currentStyle) { // 擷取css的樣式
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr]
}
}
new Fire();
</script>
</body>
</html>
效果:點選後,先上升,再炸開
![attachEvent 與addEventListener 差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)