快捷導(dǎo)航

原生JS封裝animate運動框架的實例

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

下面小編就為大家?guī)硪黄鶭S封裝animate運動框架的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

如下所示：

<!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("我來了")});
}
btn400.onclick = function() {
animate(box,{top:500,opacity:10});
}
// 多個屬性運動框架 添加回調(diào)函數(shù)
function animate(obj,json,fn) { // 給誰 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用來判斷是否停止定時器 一定寫到遍歷的外面
for(var attr in json){ // attr 屬性 json[attr] 值
//開始遍歷 json
// 計算步長 用 target 位置 減去當前的位置 除以 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);
// 目標位置就是 屬性值
var step = ( json[attr] - current) / 10; // 步長 用目標位置 - 現(xiàn)在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判斷透明度
if(attr == "opacity") // 判斷用戶有沒有輸入 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]) // 只要其中一個不滿足條件 就不應(yīng)該停止定時器 這句一定遍歷里面
{
flag = false;
}
}
if(flag) // 用于判斷定時器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很簡單 當定時器停止了。 動畫就結(jié)束了 如果有回調(diào)，就應(yīng)該執(zhí)行回調(diào)
{
fn(); // 函數(shù)名 + （） 調(diào)用函數(shù) 執(zhí)行函數(shù)
}
}
},30)
}
function getStyle(obj,attr) { // 誰的 那個屬性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
}
}
</script>

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

您可能感興趣的文章: