JS 대상 을 위 한 불꽃놀이 효과 기반
js ( )
var fgm = {
on: function(element, type, handler) {
return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
},
un: function(element, type, handler) {
return element.removeEventListener ? element.removeEventListener(type, handler, false) : element.detachEvent("on" + type, handler)
},
bind: function(object, handler) {
return function() {
return handler.apply(object, arguments)
}
},
randomRange: function(lower, upper) {
return Math.floor(Math.random() * (upper - lower + 1) + lower)
},
getRanColor: function() {
var str = this.randomRange(0, 0xFFFFFF).toString(16);
while(str.length < 6) str = "0" + str;
return "#" + str
}
};
//
function FireWorks() {
this.type = 0;
this.timer = null;
this.fnManual = fgm.bind(this, this.manual)
}
FireWorks.prototype = {
initialize: function() {
clearTimeout(this.timer);
fgm.un(document, "click", this.fnManual);
switch(this.type) {
case 1:
fgm.on(document, "click", this.fnManual);
break;
case 2:
this.auto();
break;
};
},
manual: function(event) {
event = event || window.event;
this.__create__({
x: event.clientX,
y: event.clientY
});
},
auto: function ()
{
var that = this;
that.timer = setTimeout(function() {
that.__create__({
x: fgm.randomRange(50, document.documentElement.clientWidth - 50),
y: fgm.randomRange(50, document.documentElement.clientHeight - 150)
})
that.auto();
}, fgm.randomRange(900, 1100))
},
__create__: function (param)
{
var that = this;
var oEntity = null;
var oChip = null;
var aChip = [];
var timer = null;
var oFrag = document.createDocumentFragment();
oEntity = document.createElement("div");
with(oEntity.style) {
position = "absolute";
top = document.documentElement.clientHeight + "px";
left = param.x + "px";
width = "4px";
height = "30px";
borderRadius = "4px";
background = fgm.getRanColor();
};
document.body.appendChild(oEntity);
oEntity.timer = setInterval(function() {
oEntity.style.top = oEntity.offsetTop - 20 + "px";
if(oEntity.offsetTop <= param.y) {
clearInterval(oEntity.timer);
document.body.removeChild(oEntity);
(function() {
// 50-100
// IE , 20-30
// , 20-30
var len = (/msie/i.test(navigator.userAgent) || that.type == 2) ? fgm.randomRange(20, 30) : fgm.randomRange(50, 100)
for (i = 0; i < len; i++) {
oChip = document.createElement("div");
with(oChip.style) {
position = "absolute";
top = param.y + "px";
left = param.x + "px";
width = "4px";
height = "4px";
overflow = "hidden";
borderRadius = "4px";
background = fgm.getRanColor();
};
oChip.speedX = fgm.randomRange(-20, 20);
oChip.speedY = fgm.randomRange(-20, 20);
oFrag.appendChild(oChip);
aChip[i] = oChip
};
document.body.appendChild(oFrag);
timer = setInterval(function() {
for(i = 0; i < aChip.length; i++) {
var obj = aChip[i];
with(obj.style) {
top = obj.offsetTop + obj.speedY + "px";
left = obj.offsetLeft + obj.speedX + "px";
};
obj.speedY++;
(obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1))
};
!aChip[0] && clearInterval(timer);
}, 30)
})()
}
}, 30)
}
};
fgm.on(window, "load", function() {
var oTips = document.getElementById("tips");
var aBtn = oTips.getElementsByTagName("a");
var oFireWorks = new FireWorks();
fgm.on(oTips, "click", function(event) {
var oEvent = event || window.event;
var oTarget = oEvent.target || oEvent.srcElement;
var i = 0;
if(oTarget.tagName.toUpperCase() == "A") {
for(i = 0; i < aBtn.length; i++) aBtn[i].className = "";
switch(oTarget.id) {
case "manual":
oFireWorks.type = 1;
break;
case "auto":
oFireWorks.type = 2;
break;
case "stop":
oFireWorks.type = 0;
break;
}
oFireWorks.initialize();
oTarget.className = "active";
oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true
}
});
});
fgm.on(document, "contextmenu", function(event) {
var oEvent = event || window.event;
oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false
});
, IE , 20-30
Firefox, Chrome . By ― Ferris, QQ:21314130
본 논문 에서 말 한 것 이 여러분 의 자바 script 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.