JS 緩慢動畫封裝案例

手風琴

1、排他思想

2、ul寬度需要大一點，防止li撐開跑下去

3、乙個變大其他所有變小，變小不能太小，不然會出現空白

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
* div 
ul li 
style
>
head
>
<
body
>
<
div>
<
ul>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
ul>
div>
<
script
>
vardiv 
=document.getelementsbytagname(
"div")[
0];varul 
=div.children[0];
varliarr 
=ul.children;
for(
vari =0
; i 
<
liarr.length; i
++) );
}animate(
this
, ) }
liarr[i].onmouseout 
=function
(ev) );}}
}//引數變為2個，將屬性atrr和值都儲存到json中
function
animate(ele, json, fn) 
if(math.abs(json[k] 
-leader) 
>
math.abs(step)) 
}console.log(1);
//只有所有的屬性都到了指定位置，bool值才不會變成false；
if(bool) 
clearinterval(ele.timer);
//所有程式執行完畢之後執行**函式
//現在只有傳遞了**函式，才能執行
if(fn) 
}}, 5);
}function
getstyle(ele, attr) 
return
ele.currentstyle[attr];
}script
>
body
>
html
>

2、本例子沒有用，最好盒子以形式為好

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
* .box 
span 
.up, .down 
style
>
head
>
<
body
>
<
div 
class
="box"
>
<
span
>×
span
>
<
div 
class
="up"
>上盒子
div>
<
div 
class
="down"
>下盒子
div>
div>
<
script
>
varspan 
=document.getelementsbytagname(
"span")[
0];varbox 
=span.parentnode;
vardown 
=box.children[2];
//開始讓下盒子的高度變成0 之後讓大盒子寬度變為0
span.onclick 
=function
() , 
function
() )
});}
//引數變為2個，將屬性atrr和值都儲存到json中
function
animate(ele, json, fn) 
if(math.abs(json[k] 
-leader) 
>
math.abs(step)) 
}console.log(1);
//只有所有的屬性都到了指定位置，bool值才不會變成false；
if(bool) 
clearinterval(ele.timer);
ele.style.display ="
none";
//所有程式執行完畢之後執行**函式
//現在只有傳遞了**函式，才能執行
JS動畫封裝
簡單的運動函式 var demo1 document.getelementbyid demo1 demo1.onmouseover function demo1.onmouseout function var timer 全域性變數 function startmove target else 變速...
js 簡單動畫函式封裝
動畫原理 核心原理 通過定時器setinterval 不斷移動盒子位置 實現步驟 1.獲得當前盒子位置 2.讓盒子在當前位置上加上移動距離 3.利用定時器不斷重複這個操作 4.加乙個結束定時器的條件 5.注意 此元素需要新增定位，才能使用element.style.left 函式封裝 簡單動畫函式封...
JS動畫之返回頂部案例
需求 一開始返回頂部圖示是隱藏的，當滾動到指定位置的時候，小圖示就會顯示出來，點選圖示，會緩動的返回頂部 技術點 window.scrollto x,y 瀏覽器顯示區域跳轉到指定的座標 我是最頂端.風吹馬尾千條線，雨打羊毛一片氈.風吹馬尾千條線，雨打羊毛一片氈.風吹馬尾千條線，雨打羊毛一片氈.風吹馬...