關於錯位動畫的練習，原生js編寫

最近在網上看到乙個關於錯位動畫的文章，感覺非常有趣，便自己練習了一下，文章連線：

基本由原生js編寫，**如下：

<

html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
style
>
body
.body
.mainbox
.mainbox2
.childbox
style
>
head
>
<
body
>
<
button
>開啟動畫
button
>
<
div 
class
="body"
>
div>
<
script
>
window.onload 
=function
()                 
//主要的兩個div
function
createmaindiv(classname) 
//動畫小方塊
function
createchilddiv(classname, row, col) 
//4*4的方塊方陣
function
createchildtable() }}
//行動畫
function
animationrow(row, col) 
varstopboxsvalue 
=stopboxs();
settimeout(
function
() , 
100*
math.abs(a_row 
+a_col 
-stopboxsvalue) );
}//已經結束的方塊數
function
stopboxs()  
else
if(modenumber 
<0&&
boxleft 
<
col_index *50
+5)                         }
}return
stopboxsvalue;
}//列動畫
function
animationcolumn(r, col_index)  
else
if(modenumber 
<0&&
boxleft 
<
col_index *50
+5)  else
//如果動畫結束或者 停止 ，則中斷settimeout
if(isok 
||isstop) 
settimeout(
function
() , 
500/60*
math.sin(boxleft 
/left 
*modenumber));
}//動畫
function
animation() }}
varbutton 
=document.getelementsbytagname(
"button");
button[
0].onclick 
=function
()                     
this
.isrun 
=true
;                    animation();
};createmaindiv(
"mainbox");
createmaindiv(
"mainbox mainbox2");
createchildtable();
}script
>
body
>
html
>

自己練習的無縫滾動原生JS

看了妙趣的課堂自己練習的，因為牽涉到遠端就沒利用 title 無標題文件title style div,ul,li,a ul,li roll prev,next prev next scroll scrollul scrollli style script window.onload functio...

原生js關於倒計時的原理

倒計時經常會在專案中或者電商類 比如 或者拼單等等中會有出現，今天就了解一下它的原理，然後寫乙個簡單的倒計時例子。其實關於倒計時原理很簡單 就是用未來的時間減去去現在的時間然後換算即可。未來的時間點 不變 減現在的時間點 在變 來看簡單的例子 計算一下距離今年五一還有多長時間？直接來看 布局 spa...

基於canvas與原生JS的H5動畫引擎

前一段時間專案組裡有一些h5動畫的需求，由於沒有專業的前端人員，便交由我這個做後台的研究相關的h5動畫技術。通過初步調研，h5動畫的實現大概有以下幾種方式 1 基於css實現 這種方式比較簡單易學，但是能實現的效果也相對簡單。一般都是對h5元素的平移，旋轉，縮放等。適用於網頁中的一些簡單動畫，對於由...