원생 JS 불꽃 효과 구현
기본 css 코드
/* css */
body{background: #000;overflow: hidden;}
.fire{position: absolute;width: 4px;height: 30px;}
js 코드:1.페이지 에 클릭 이벤트 추가,주체 불꽃 생 성
//
document.onclick = function(eve){
var e = eve || window.event;
// ,
var arr = [];
//
var x = e.clientX;
var y = e.clientY;
//
var speed = 20;
// , css ,
var fire = document.createElement('div');
fire.className = 'fire';
fire.style.background = randomColor();
fire.style.left = x + 'px';
fire.style.top = document.documentElement.clientHeight+'px';
//
document.body.appendChild(fire);
2.타이머 설정,불꽃 위로 운동,삭제
//
var t = setInterval(function(){
// TOP , ,
if(fire.offsetTop <= y){
clearInterval(t);
document.body.removeChild(fire);
// show( )
show();
}
//
fire.style.top = fire.offsetTop - speed +'px';
},30);
3.클릭 한 위치 에 작은 불꽃 을 생 성하 고 스타일 설정
function show(){
// , 50 , css
for(var i=0;i<50;i++){
var sFire = document.createElement('div');
// sFire.className = 'small-fire';
sFire.style.left = x +'px';
sFire.style.top = y +'px';
// sFire.style.background = randomColor();
sFire.style.color = randomColor();
sFire.innerHTML = '❤';
sFire.style.position = 'absolute';
//
var a=Math.random()*360;
sFire.sx = Math.sin(a*180/Math.PI)*20*Math.random();
sFire.sy = Math.cos(a*180/Math.PI)*20*Math.random();
//
document.body.appendChild(sFire);
//
arr.push(sFire);
}
}
4.타 이 머 를 설치 하여 작은 불꽃놀이 가 자유 낙하 운동 을 완성 하도록 한다.
setInterval(function move(){
//
for(var i=0;i<arr.length;i++){
// i
arr[i].style.left = arr[i].offsetLeft + arr[i].sx + 'px';
arr[i].style.top = arr[i].offsetTop + arr[i].sy + 'px';
// ,
arr[i].sy += 1;
// , ,
if(arr[i].offsetLeft<0 || arr[i].offsetLeft > document.documentElement.clientWidth || arr[i].offsetTop > document.documentElement.clientHeight){
document.body.removeChild(arr[i]);
// arr.splice(i,1);
}
}
},30)
}
5.마지막 으로 우리 의 난수 와 랜 덤 색상 의 포장 을 잊 지 마 세 요.
//
function random(max,min){
return Math.round(Math.random()*(max-min)+min);
}
//
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}
결국 우리 의 불꽃놀이 효 과 는 이 루어 졌 다.오늘 의 나 눔 은 여기까지 입 니 다.여러분 이 좋아해 주 셨 으 면 좋 겠 습 니 다.
더 많은 JavaScript 하 이 라이트 효 과 를 여러분 에 게 공유 합 니 다:
자 바스 크 립 트 메뉴
javascript QQ 특수효과 집합
자 바스 크 립 트 시계 필터 집합
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.