原生js實現簡單動畫效果

實現動畫效果可以用jquery提供的animate方法，或一些外掛程式來實現，但是隨著前端元件化開發的流行，

jquery大量的dom操作已經顯得十分多餘，正在逐漸從前端技術棧中被淘汰，下面我們使用原生js實現簡單的勻速動畫效果和緩動效果

勻速動畫實現水平移動

css樣式

#box 

.line400 
.line800 
<
/style>

"box"

>
<
/div>
="line400"
>
<
/div>
="line800"
>
<
/div>
"button" value=
"右移400" id=
"r1"
>
"button" value=
"右移800" id=
"r2"
>
var box = document.
getelementbyid
("box");
var box2 = document.
getelementbyid
("box2");
var btnr1 = document.
getelementbyid
("r1");
var btnr2 = document.
getelementbyid
("r2");
btnr1.onclick =
function()
; btnr2.onclick =
function()
;// 封裝動畫函式
function
animation
(ele, target)},
50)}<
/script>
<
/body>

緩速運動 ： 每次移動的距離 = (目標位置 - 當前位置) / 10

特點：沒有誤差，準確到達目標位置後期接近目標都是1px移動 不會有誤差，但還需要清除定時器 終點檢測

還是上面的樣式結構

js**

"box"

>
<
/div>
="line400"
>
<
/div>
="line800"
>
<
/div>
"button" value=
"緩速移動400" id=
"r1"
>
"button" value=
"緩速移動800" id=
"r2"
>
var box = document.
getelementbyid
("box");
var btn1 = document.
getelementbyid
("r1");
var btn2 = document.
getelementbyid
("r2");
btn1.onclick =
function()
btn2.onclick =
function()
// 緩動距離方法
function
slowmove
(ele, target)},
10)}<
/script>
<
/body>

以上動畫方法只能實現簡單的屬性(帶px單位)動畫

要實現其他屬性的動畫要先了解乙個獲取屬性的方法

getcomputedstyle() : 獲取元素所有樣式 全域性方法（ie8不支援）

引數1: 要獲採樣式的物件

引數2: 偽元素 ，一般不傳 預設為null

返回值: 樣式物件

特點：1.可以獲取行內樣式，也可以獲取行外樣式

2.獲取的是string型別 帶單位

3.獲取的元素唯讀，不可修改

ie8使用currentstyle屬性

這裡做一下相容

// 獲取元素屬性的ie8相容

/** @param ele 需要查詢的元素
@param attr 需要獲取到的屬性 string型別
*/function
getelestyle
(ele,attr)
else
}

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
#box 
#box1
<
/style>
<
/head>
"box"
>
<
/div>
"box1"
>
<
/div>
"button" value=
"緩速移動屬性" id=
"r2"
>
"animation.js"
>
<
/script>
var box = document.
getelementbyid
("box");
var btn1 = document.
getelementbyid
("r1");
var btn2 = document.
getelementbyid
("r2");
btn2.onclick =
function()
,function()
,function()
,function()
,function()
)})}
)})}
);}// 緩動屬性方法
function
slowmove
(obj, attrs, callback)
else
if(attr ==
"opacity")}
else}}
// 當所有屬性都到達終點時再清除定時器
if(isall)
,1000)}
}},10
)}// 獲取元素屬性的ie8相容
/** @param ele 需要查詢的元素
@param attr 需要獲取到的屬性 string型別
*/function
getelestyle
(ele, attr)
else
}<
/script>
<
/body>
<
/html>

原生JS實現彈幕效果

純屬無聊寫的，可能有很多問題，歡迎批評指教。效果圖 圖一是預設的一些彈幕，圖二是自己發射的彈幕，效果是一樣的。demo位址 首先是彈幕的位置，是要從最右滑到最左，為了防止隨機高度彈幕會覆蓋的問題，設定了通道。每乙個通道是從左到右的一條，高度固定，這樣不同通道的彈幕不會相互覆蓋。彈幕滑動就是簡單設定c...

Javascript原生動畫效果的實現

js框架越來越多，也越來越好用，如果了解了原生的js動畫的實現方式，能更好的有助於理解js框架。這裡介紹一種計時器。setinterval code,ms 週期性的執行一段 前乙個引數是週期執行的 後乙個是迴圈的週期，單位毫秒。clearinterval 清除計時器。利用計時器的迴圈，對元素的樣式進...

前端 原生js實現粒子效果

效果截圖 實現原始碼 doctype html content type content text html charset utf 8 demo title head overflow hidden background 000 container canvas var canvas docume...