快捷導(dǎo)航

原生JS封裝animate運(yùn)動(dòng)框架的實(shí)例

更新時(shí)間：2017年10月12日 08:34:30 作者：Dragon_web

下面小編就為大家?guī)?lái)一篇原生JS封裝animate運(yùn)動(dòng)框架的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var box = document.getElementById("box");
btn200.onclick = function() {
animate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert("我來(lái)了")});
}
btn400.onclick = function() {
animate(box,{top:500,opacity:10});
}
// 多個(gè)屬性運(yùn)動(dòng)框架 添加回調(diào)函數(shù)
function animate(obj,json,fn) { // 給誰(shuí) json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用來(lái)判斷是否停止定時(shí)器 一定寫(xiě)到遍歷的外面
for(var attr in json){ // attr 屬性 json[attr] 值
//開(kāi)始遍歷 json
// 計(jì)算步長(zhǎng) 用 target 位置 減去當(dāng)前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // 數(shù)值
}
// console.log(current);
// 目標(biāo)位置就是 屬性值
var step = ( json[attr] - current) / 10; // 步長(zhǎng) 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判斷透明度
if(attr == "opacity") // 判斷用戶有沒(méi)有輸入 opacity
{
if("opacity" in obj.style) // 判斷 我們?yōu)g覽器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}

if(current != json[attr]) // 只要其中一個(gè)不滿足條件 就不應(yīng)該停止定時(shí)器 這句一定遍歷里面
{
flag = false;
}
}
if(flag) // 用于判斷定時(shí)器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很簡(jiǎn)單 當(dāng)定時(shí)器停止了。 動(dòng)畫(huà)就結(jié)束了 如果有回調(diào)，就應(yīng)該執(zhí)行回調(diào)
{
fn(); // 函數(shù)名 + （） 調(diào)用函數(shù) 執(zhí)行函數(shù)
}
}
},30)
}
function getStyle(obj,attr) { // 誰(shuí)的 那個(gè)屬性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回傳遞過(guò)來(lái)的某個(gè)屬性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
}
}
</script>

以上這篇原生JS封裝animate運(yùn)動(dòng)框架的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: