原生js---烟花效果
common.js
/**
* created by jameswatt2008 on 2017/5/2.
*///獲取計算 樣式 顯示樣式
function getstyle(obj)
else
}
/**
* created by jameswatt2008 on 2017/5/2.
*///封裝運動 動畫 度屬性
function animate(box,obj,callback)
else
//停止定時器 ，必要所有的屬性 都到達目的地以後才能停止
if(current != target)
} //如果全部都到達目的地 就可以清除定時器
if(falg == true)
},50)
;}
"container"
>
.container
.fire
window.onload = function();
//建立烟花物件
new fireworks(this, target);}
} //烟花建構函式
function fireworks(obj, target)
//烟花的移動方法
this.move = function(
), function())
} //**效果
this.boom = function();
//在contenter內 產生隨機座標，讓fire 運動該位置
target.left = math.round(math.random(
) * (this.obj.offsetwidth - 10))
; target.top = math.round(math.random(
) * (this.obj.offsetheight - 10))
; animate(fire, target, function())
;}} this.randomcolor = function(
) this.getstyle = function(obj, attr)
} //移動開始；
this.init();
this.move();
};function
$(select
)
JS原生 之 放烟花嘍
move.js param obj 目標物件 param json 要改變的屬性 param extend 當buffer為true時為彈性運動 callback會在運動結束時，被執行 animate obj,buffer true function animate obj,json,extend ...
原生JS實現彈幕效果
純屬無聊寫的，可能有很多問題，歡迎批評指教。效果圖 圖一是預設的一些彈幕，圖二是自己發射的彈幕，效果是一樣的。demo位址 首先是彈幕的位置，是要從最右滑到最左，為了防止隨機高度彈幕會覆蓋的問題，設定了通道。每乙個通道是從左到右的一條，高度固定，這樣不同通道的彈幕不會相互覆蓋。彈幕滑動就是簡單設定c...
原生js實現簡單動畫效果
實現動畫效果可以用jquery提供的animate方法，或一些外掛程式來實現，但是隨著前端元件化開發的流行，jquery大量的dom操作已經顯得十分多餘，正在逐漸從前端技術棧中被淘汰，下面我們使用原生js實現簡單的勻速動畫效果和緩動效果 勻速動畫實現水平移動 css樣式 box line400 li...