js 컬러 불규칙 삼각형 흩날리네 ~
//
function ColorBar(obj,timer){
this.target = obj;
this.i = 0;
this.wind = 0;
this.timer = timer || 100;
this.other = 0;
this.init();
}
ColorBar.prototype = {
init:function(){
this.createElem();
this.snowRun();
},
getRndAndFillZero :function (){
var str=Math.ceil(Math.random()*16777215).toString(16);
while(str.length<6){
str='0'+str;
}
return str;
},
createElem : function(){
var self = this,
box = self.target,
wind = self.wind;
var s01 = Math.random()*10,
s02 = Math.random()*10,
s03 = Math.random()*10,
s04 = Math.random()*10;
var $oDiv = $('<div class="snow" id="snow'+this.i+'"></div>');
if(wind != 0){
var snow_left = Math.random() > Math.abs(wind*0.025) ? Math.random() : (wind > 0 ? 0 : 1) ;
}else{
var snow_left = Math.random();
}
snow_left = snow_left * parseInt(box.width());
var snow_top = -10,
borderColor = 'transparent transparent #' + self.getRndAndFillZero();
if (Math.random() < 0.5) {
borderColor = '#' + self.getRndAndFillZero()+' transparent transparent';
};
if (Math.random() > 0.5 && Math.random() < 0.8) {
borderColor = '#' + self.getRndAndFillZero()+' transparent transparent';
};
if (Math.random() > 0.8) {
borderColor = 'transparent #' + self.getRndAndFillZero()+' transparent transparent';
};
$oDiv.css({
position:"absolute",
top: snow_top + "px",
left:snow_left + "px",
zIndex:'-1',
borderTopWidth:s01 + "px",
borderBottomWidth:s02 + "px",
borderLeftWidth:s03 + "px",
borderRightWidth:s04 + "px",
borderColor : borderColor
});
box.append($oDiv);
self.snowGoDown('snow'+this.i,8*Math.random());
this.i++;
var randomNum = 50 * Math.random()* Math.random();
setTimeout(function(){
self.createElem();
},randomNum);
},
snowGoDown:function(snow_id,speed){
if(speed < 3){
speed = 3;
}
var self = this,
box = self.target,
timer = self.timer;
var $snow_div = $("#"+snow_id);
var snowTop = parseInt($snow_div.offset().top);
var snowHeight = parseInt(box.height());
var snowNewTop = snowTop + speed;
$snow_div.css({
top:snowNewTop+"px"
});
var n = snow_id;
if(snowTop < snowHeight){
snow_id = setTimeout(function(){
self.snowGoDown(n,speed);
},timer);
}else{
clearTimeout(snow_id);
$snow_div.remove();
speed=null;
this.other++;
};
},
snowRun:function(){
var self = this,
box = this.target;
var wind_time;
var snows = box.find(".snow");
for(var i = 0;i<snows.length;i++){
var snowLeft = parseInt(snows.offset().left) + this.wind +'px'
snows.eq(i).css('left',snowLeft);
};
if(Math.abs(this.wind) > 0.1){
wind_time = setTimeout(function(){
self.snowRun();
},this.timer)
}else{
clearTimeout(wind_time);
this.wind = 0;
};
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.