動畫原理
動畫基本原理.gif
人走路的時候缀皱， 步長
動畫的基本原理 ： 讓盒子的 offsetLeft + 步長
盒子 原來的位置 0 + 10 盒子現(xiàn)在的offsetLeft 10
動畫基本原理的完整源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button>開始</button>
<div></div>
</body>
</html>
<script>
//動畫的基本原理 盒子的 offsetLeft + 步長
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function() {
timer = setInterval(function() {
if(div.offsetLeft > 400)
{
clearInterval(timer);
}
div.style.left = div.offsetLeft + 10 + "px";
},20);
}
</script>
JS取絕對值：
Math.abs(-5) 取絕對值函數(shù)
|-5| = 5
1/基本動畫函數(shù)
基本動畫函數(shù).gif
基本動畫函數(shù)完整源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="run"></div>
</body>
</html>
<script>
function $(id) {return document.getElementById(id)}
$("btn200").onclick = function() {
animate($("run"),200); // animate 自定義函數(shù)
// 第一個參數(shù) 誰做動畫 第二參數(shù)目標(biāo)位置
}
$("btn400").onclick = function() {
animate($("run"),400);
}
var arr = [];
arr.index = 10; // 自定 屬性 arr 的 index arr 專屬
var index = 20; // 變量 miss 自由的 任何人都可以使用
// 運動函數(shù)
/* for(var i=0; i<lis.length;i++)
{
lis[i].index = i;
}*/
function animate(obj,target){
obj.timer = setInterval(function() { // 開啟定時器
if(obj.offsetLeft > target)
{
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 10 + "px";
},30)
}
</script>
2/勻速運動封裝函數(shù)
勻速運動封裝.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
#box1 {
position: absolute;
top: 150px;
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
<script>
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
btn200.onclick = function() {
animate(box,200);
animate(box1,500);
}
btn400.onclick = function() {
animate(box,400);
}
// 封裝勻速運動
function animate(obj,target){
clearInterval(obj.timer); // 先清除定時器
var speed = obj.offsetLeft < target ? 5 : -5; // 用來判斷 應(yīng)該 + 還是 -
obj.timer = setInterval(function() {
var result = target - obj.offsetLeft; // 因為他們的差值不會超過5
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result)<=5) // 如果差值不小于 5 說明到位置了
{
clearInterval(obj.timer);
obj.style.left = target + "px"; // 有5像素差距 我們直接跳轉(zhuǎn)目標(biāo)位置
}
},30)
}
</script>
三個取整函數(shù)
這三個函數(shù)都是 數(shù)學(xué)函數(shù)
Math
Math.ceil() 向上取整 天花板
比如說 console.log(Math.ceil(1.01)) 結(jié)果 是 2
console.log(Math.ceil(1.9)) 結(jié)果 2
console.log(Math.ceil(-1.3)) 結(jié)果 是 -1
Math.floor() 向下取整 地板
比如說 console.log(Math.floor(1.01)) 結(jié)果 是 1
console.log(Math.floor(1.9)) 結(jié)果 1
console.log(Math.floor(-1.3)) 結(jié)果 是 -2
Math.round() 四舍五入函數(shù)
console.log(Math.round(1.01)) 結(jié)果 是 1
console.log(Math.round(1.9)) 結(jié)果 是 2
緩動動畫原理
勻速動畫的原理： 盒子本身的位置 + 步長
緩動動畫的原理: 盒子本身的位置 + 步長 (不斷變化的)
緩動動畫原理.gif
緩動動畫原理的源碼：
<!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;
}
</style>
</head>
<body>
<button id="btn">開始</button>
<div id="box"></div>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var target = 400;
var timer = null;
btn.onclick = function() {
timer = setInterval(function() {
// 盒子本身的位置 + 步長 (不斷變化的)
var step = (target - box.offsetLeft) / 10; // 步長
console.log(step);
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 步長取整
box.style.left = box.offsetLeft + step + "px";
if(box.offsetLeft == target) // 判斷結(jié)束條件
{
clearInterval(timer);
alert("到目標(biāo)了")
}
},30)
}
</script>
緩動動畫封裝
( 缺陷：只能水平方向准浴！隨后的“封裝運動框架單個屬性會進一步改進”)
封裝函數(shù)動畫.gif
<!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;
opacity: 0.3;
}
</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,200);
}
btn400.onclick = function() {
animate(box,400);
}
// 封裝
function animate(obj,target){ // 第一個參數(shù) 動誰 第二個參數(shù) 動多少
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 計算步長 動畫的原理 盒子本身的位置 + 步長
var step = (target - obj.offsetLeft) / 10; // 步長
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 取整步長
// obj.style.left = 盒子本身的位置 + 步長
obj.style.left = obj.offsetLeft + step + "px";
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
},30)
}
</script>
js 常用 訪問 CSS 屬性
我們訪問得到css 屬性，比較常用的有兩種：
1. 利用點語法
box.style.width box.style.top
點語法可以得到 width 屬性 和 top屬性 ** 帶有單位的斤寇。 100px
但是這個語法有非常大的缺陷**桶癣， 不變的。
后面的width 和 top 沒有辦法傳遞參數(shù)的娘锁。
var w = width;
box.style.w
2. 利用 [] 訪問屬性
語法格式: box.style[“width”]
元素.style[“屬性”];
attr 即代表屬性
console.log(box.style["left"]);
最大的優(yōu)點 ： 可以給屬性傳遞參數(shù)
訪問CSS屬性的源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
left: 10px;
position: absolute;
top: 20px;
}
</style>
</head>
<body>
<div id="box" style="left:30px;width: 100px;height: 100px;"></div>
</body>
</html>
<script>
var box =document.getElementById("box");
console.log(box.style.left);
console.log(box.style["left"]);
function fn(attr){
console.log(box.style[attr]);
}
fn("height");
fn("width");
</script>
得到css 樣式
我們想要獲得css 的樣式牙寞， box.style.left 和 box.style.backgorundColor
但是它只能得到 行內(nèi)的樣式。
但是我們工作最多用的是 內(nèi)嵌式 或者 外鏈?zhǔn)?莫秆。
怎么辦间雀？
核心： 我們怎么才能得到內(nèi)嵌或者外鏈的樣式呢？
- obj.currentStyle ie opera 常用
外部（使用<link>）和內(nèi)嵌（使用<style>）樣式表中的樣式（ie和opera）
2 .window.getComputedStyle("元素", "偽類") w3c
兩個選項是必須的镊屎， 沒有偽類 用 null 替代
得到CSS樣式源碼 ie和opera 和w3c
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 200px;
background-color: pink;
left: 10px;
position: absolute;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
var demo = document.getElementById("demo");
console.log(demo.style.left); // 得到的是空值 只能取行內(nèi)
//console.log(demo.currentStyle.left); // ie這么寫
console.log(window.getComputedStyle(demo,null).left);
</script>
3 兼容寫法 ：
我們這個元素里面的屬性很多惹挟， left top width ===
我們想要某個屬性， 就應(yīng)該 返回該屬性缝驳，所有繼續(xù)封裝返回當(dāng)前樣式的 函數(shù)连锯。
得到css 樣式兼容性寫法：返回當(dāng)前樣式的函數(shù)★★★★★
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 200px;
position: absolute;
top: 10px;
left: 20px;
background-color: pink;
z-index: 2;
opacity: 0.4;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
var demo = document.getElementById("demo");
function getStyle(obj,attr) { // 誰的 那個屬性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
}
}
console.log(getStyle(demo,"width"));
</script>
封裝運動框架基本函數(shù)(單個屬性)★★★★★
<!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;
}
</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,"left",500);
}
btn400.onclick = function() {
animate(box,"top",400);
}
// 封裝單個屬性的運動框架
function animate(obj,attr,target) { // 給誰 什么屬性 改為多少
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//計算步長 動畫的原理 盒子本身的樣式 + 步長
//我們怎么知道我們當(dāng)前的樣式
// 先得到 當(dāng)前的樣式，然后 用 target 減去 就可以 除以 10 計算步長
var current = parseInt(getStyle(obj,attr)); // 得到當(dāng)前的樣式 別忘樂去掉px
var step = ( target -current ) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 要做動畫了
//obj.style.left = obj.offsetLeft + step + "px";
obj.style[attr] = current + step + "px";
if(current == target )
{
clearInterval(obj.timer);
}
//console.log(current);
} ,30)
}
function getStyle(obj,attr) { // 誰的 那個屬性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
}
}
</script>
JSON 遍歷
for in 關(guān)鍵字
for ( 變量 in 對象)
{ 執(zhí)行語句; }
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr = [1,3,5,7,9];
console.log(arr[3]);
for(var i = 0; i< arr.length;i++) // 遍歷數(shù)組
{
console.log(arr[i]);
}
var json = {width:200,height:300,left:50}
console.log(json.width);
for(var k in json)
{
console.log(k); // k 遍歷的是json 可以得到的是 屬性
console.log(json[k]); // json[k] 得到 是屬性的 值
}
</script>
</body>
</html>
千萬要記得 每個 的意思 ： 那是相當(dāng)重要
k 是 屬性
json[k] 得到的是屬性值
封裝運動框架基本函數(shù)(多個屬性)
<!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: 800,left: 200});
}
btn400.onclick = function() {
animate(box,{top:500});
}
// 多個屬性運動框架
function animate(obj,json) { // 給誰 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//開始遍歷 json
for(var attr in json){ // attr 屬性 json[attr] 值
// 計算步長 用 target 位置 減去當(dāng)前的位置 除以 10
// console.log(attr);
var current = parseInt(getStyle(obj,attr)); // 數(shù)值
// console.log(current);
// 目標(biāo)位置就是 屬性值
var step = ( json[attr] - current) / 10; // 步長 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px" ;
}
},30)
}
function getStyle(obj,attr) { // 誰的 那個屬性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
}
}
</script>
封裝運動框架基本函數(shù)(添加停止定時器)
<!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: 800,left: 200});
}
btn400.onclick = function() {
animate(box,{top:500});
}
// 多個屬性運動框架
function animate(obj,json) { // 給誰 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//開始遍歷 json
var flag = true; // 用來判斷是否停止定時器 一定寫到遍歷的外面
for(var attr in json){ // attr 屬性 json[attr] 值
// 計算步長 用 target 位置 減去當(dāng)前的位置 除以 10
// console.log(attr);
var current = parseInt(getStyle(obj,attr)); // 數(shù)值
// console.log(current);
// 目標(biāo)位置就是 屬性值
var step = ( json[attr] - current) / 10; // 步長 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px" ;
console.log(current);
if(current != json[attr]) // 只要其中一個不滿足條件 就不應(yīng)該停止定時器 這句一定遍歷里面
{
flag = false;
}
}
if(flag) // 用于判斷定時器的條件
{
clearInterval(obj.timer);
//alert("ok了");
}
},30)
}
function getStyle(obj,attr) { // 誰的 那個屬性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
}
}
</script>
flag在js中一般作為開關(guān)用狱，進行判斷运怖。
回調(diào)函數(shù)
等動畫執(zhí)行完畢再去執(zhí)行的函數(shù)回調(diào)函數(shù)
我們怎么知道動畫就執(zhí)行完畢了呢？
很簡單當(dāng)定時器停止了夏伊。 動畫就結(jié)束了
完整源碼：
<!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: 800,left: 200},function(){alert("我來了")});
}
btn400.onclick = function() {
animate(box,{top:500});
}
// 多個屬性運動框架 添加回調(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 位置 減去當(dāng)前的位置 除以 10
// console.log(attr);
var current = parseInt(getStyle(obj,attr)); // 數(shù)值
// console.log(current);
// 目標(biāo)位置就是 屬性值
var step = ( json[attr] - current) / 10; // 步長 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px" ;
console.log(current);
if(current != json[attr]) // 只要其中一個不滿足條件 就不應(yīng)該停止定時器 這句一定遍歷里面
{
flag = false;
}
}
if(flag) // 用于判斷定時器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很簡單 當(dāng)定時器停止了摇展。 動畫就結(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>
案例：仿照360開機效果
仿360開機效果.gif
案例源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width:30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<span></span>
<div class="hd" id="t">
[站外圖片上傳中……(1)]
</div>
<div class="bd" id="b">
[站外圖片上傳中……(2)]
</div>
</div>
</body>
</html>
<script>
var b = document.getElementById('b');
var closeAd = document.getElementsByTagName("span")[0];
closeAd.onclick = function() {
animate(b,{height: 0},function(){
animate(b.parentNode,{width:0});
});
}
// 多個屬性運動框架
function animate(obj,json,fn) { // 給誰 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//開始遍歷 json
var flag = true; // 用來判斷是否停止定時器 一定寫到遍歷的外面
for(var attr in json){ // attr 屬性 json[attr] 值
// 計算步長 用 target 位置 減去當(dāng)前的位置 除以 10
// console.log(attr);
var current = parseInt(getStyle(obj,attr)); // 數(shù)值
// console.log(current);
// 目標(biāo)位置就是 屬性值
var step = ( json[attr] - current) / 10; // 步長 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px" ;
console.log(current);
if(current != json[attr]) // 只要其中一個不滿足條件 就不應(yīng)該停止定時器 這句一定遍歷里面
{
flag = false;
}
}
if(flag) // 用于判斷定時器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很簡單 當(dāng)定時器停止了溺忧。 動畫就結(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>
in 運算符
in運算符也是一個二元運算符，但是對運算符左右兩個操作數(shù)的要求比較嚴(yán)格砸狞。in運算符要求第1個（左邊的）操作數(shù)必須是字符串類型或可以轉(zhuǎn)換為字符串類型的其他類型捻勉，而第2個（右邊的）操作數(shù)必須是數(shù)組或?qū)ο蟆Ｖ挥械?個操作數(shù)的值是第2個操作數(shù)的屬性名刀森，才會返回true，否則返回false
// in 可以用用來判斷 json 里面有沒有某個屬性
案例源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
var json = {name: "劉德華",age : 55};
// in 可以用用來判斷 json 里面有沒有某個屬性
if("andy" in json)
{
console.log("yes"); // 返回的是 yes
}
else
{
console.log("no");
}
</script>
封裝運動框架基本函數(shù) (添加透明度和zindex)★★★★★
<!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});
}
// 多個屬性運動框架 添加回調(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 位置 減去當(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; // 步長 用目標(biāo)位置 - 現(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) // 很簡單 當(dāng)定時器停止了报账。 動畫就結(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>
（依據(jù)距離封裝完成）★★★★★★★★★★【重點】以上源碼下面部分直接存為animate.js使用
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 位置 減去當(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; // 步長 用目標(biāo)位置 - 現(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) // 很簡單 當(dāng)定時器停止了埠偿。 動畫就結(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 瀏覽器
}
}
今日仿照360圖片素材獲劝窕蕖：
鏈接：http://pan.baidu.com/s/1miEvqoo 密碼：7fv8
