动画原理
动画基本原理.gif
人走路的时候， 步长
动画的基本原理 ： 让盒子的 offsetLeft + 步长
盒子 原来的位置 0 + 10 盒子现在的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) 取绝对值函数
|-5| = 5
1/基本动画函数
基本动画函数.gif
基本动画函数完整源码：
<!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 自定义函数
// 第一个参数 谁做动画 第二参数目标位置
}
$("btn400").onclick = function() {
animate($("run"),400);
}
var arr = [];
arr.index = 10; // 自定 属性 arr 的 index arr 专属
var index = 20; // 变量 miss 自由的 任何人都可以使用
// 运动函数
/* 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/匀速运动封装函数
匀速运动封装.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; // 用来判断 应该 + 还是 -
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像素差距 我们直接跳转目标位置
}
},30)
}
</script>
三个取整函数
这三个函数都是 数学函数
Math
Math.ceil() 向上取整 天花板
比如说 console.log(Math.ceil(1.01)) 结果 是 2
console.log(Math.ceil(1.9)) 结果 2
console.log(Math.ceil(-1.3)) 结果 是 -1
Math.floor() 向下取整 地板
比如说 console.log(Math.floor(1.01)) 结果 是 1
console.log(Math.floor(1.9)) 结果 1
console.log(Math.floor(-1.3)) 结果 是 -2
Math.round() 四舍五入函数
console.log(Math.round(1.01)) 结果 是 1
console.log(Math.round(1.9)) 结果 是 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) // 判断结束条件
{
clearInterval(timer);
alert("到目标了")
}
},30)
}
</script>
缓动动画封装
( 缺陷：只能水平方向！随后的“封装运动框架单个属性会进一步改进”)
封装函数动画.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){ // 第一个参数 动谁 第二个参数 动多少
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 没有办法传递参数的。
var w = width;
box.style.w
2. 利用 [] 访问属性
语法格式: box.style[“width”]
元素.style[“属性”];
attr 即代表属性
console.log(box.style["left"]);
最大的优点 ： 可以给属性传递参数
访问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
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办？
核心： 我们怎么才能得到内嵌或者外链的样式呢？
- obj.currentStyle ie opera 常用
外部（使用<link>）和内嵌（使用<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); // 得到的是空值 只能取行内
//console.log(demo.currentStyle.left); // ie这么写
console.log(window.getComputedStyle(demo,null).left);
</script>
3 兼容写法 ：
我们这个元素里面的属性很多， left top width ===
我们想要某个属性， 就应该 返回该属性，所有继续封装返回当前样式的 函数。
得到css 样式兼容性写法：返回当前样式的函数★★★★★
<!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>
封装运动框架基本函数(单个属性)★★★★★
<!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() {
//计算步长 动画的原理 盒子本身的样式 + 步长
//我们怎么知道我们当前的样式
// 先得到 当前的样式，然后 用 target 减去 就可以 除以 10 计算步长
var current = parseInt(getStyle(obj,attr)); // 得到当前的样式 别忘乐去掉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 关键字
for ( 变量 in 对象)
{ 执行语句; }
<!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++) // 遍历数组
{
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>
千万要记得 每个 的意思 ： 那是相当重要
k 是 属性
json[k] 得到的是属性值
封装运动框架基本函数(多个属性)
<!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 位置 减去当前的位置 除以 10
// console.log(attr);
var current = parseInt(getStyle(obj,attr)); // 数值
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 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>
封装运动框架基本函数(添加停止定时器)
<!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 位置 减去当前的位置 除以 10
// console.log(attr);
var current = parseInt(getStyle(obj,attr)); // 数值
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px" ;
console.log(current);
if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
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中一般作为开关，进行判断。
回调函数
等动画执行完毕再去执行的函数回调函数
我们怎么知道动画就执行完毕了呢？
很简单当定时器停止了。 动画就结束了
完整源码：
<!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});
}
// 多个属性运动框架 添加回调函数
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 = parseInt(getStyle(obj,attr)); // 数值
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px" ;
console.log(current);
if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数
}
}
},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 位置 减去当前的位置 除以 10
// console.log(attr);
var current = parseInt(getStyle(obj,attr)); // 数值
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px" ;
console.log(current);
if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数
}
}
},30)
}
function getStyle(obj,attr) { // 谁的 那个属性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}
</script>
in 运算符
in运算符也是一个二元运算符，但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个（左边的）操作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的）操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名，才会返回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>
封装运动框架基本函数 (添加透明度和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});
}
// 多个属性运动框架 添加回调函数
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)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断 我们浏览器是否支持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]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数 暂且这样替代
}
}
},30)
}
function getStyle(obj,attr) { // 谁的 那个属性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}
</script>
（依据距离封装完成）★★★★★★★★★★【重点】以上源码下面部分直接存为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 位置 减去当前的位置 除以 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)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断 我们浏览器是否支持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]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数
}
}
},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
