一、json 遍历
for in 关键字
for ( 变量 in 对象)
{ 执行语句; }
例如：
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] 得到 是属性的 值
}
二、回调函数
等动画执行完毕再去执行的函数 回调函数
很简单 当定时器停止了。 动画就结束了
三、 in 运算符
in运算符也是一个二元运算符。in运算符要求第1个（左边的）操作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的）操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名，才会返回true，否则返回false
// in 可以用用来判断 json 里面有没有某个属性
var json = {name: "刘德华",age : 55};
// in 可以用用来判断 json 里面有没有某个属性
if("andy" in json)
{
console.log("yes"); // 返回的是 yes
}
else
{
console.log("no");
}
四、案例
1、返回当前样式的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 200px;
position: absolute;
top:10px;
left:20px;
background-color: yellow;
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){
return obj.currentStyle[attr];//ie
}else{
return window.getComputedStyle(obj,null)[attr];//w3c
}
}
console.log(getStyle(demo,"width"));// 调用 width必须加引号
</script>
2、封装运动框架单个属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 50px;
left:0;
opacity: 0.5;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
//获取CSS属性函数
function getStyle(obj,attr){//谁的 属性
if(obj.currentStyle){
return obj.currentStyle[attr];//ie
}else{
return window.getComputedStyle(obj,null)[attr];//w3c
}
}
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var box = document.getElementById("box");
btn200.onclick = function() {
animate(box,"width",500);
}
btn400.onclick = function() {
animate(box,"top",400);
} //封装单个属性运动框架
function animate(obj,attr,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//计算步长 盒子本身的样式+步长
var current=parseInt(getStyle(obj,attr));//获取当前样式 调用getStyle 去掉px
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
//开始动画
obj.style[attr]=current+step+"px";
if(current==target){
clearInterval(obj.timer);
}
},30)
}
</script>
3、封装运动框架多个属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 50px;
left:0;
opacity: 0.5;
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:500,top:200,left:400,opacity:40,zIndex:3},function(){alert("我来了")});//function()回调函数
}
btn400.onclick = function() {
animate(box,{top:200,left:200});
} //封装多个属性运动框架
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//开始遍历json
var flag=true;//判断是否停止定时器 一定写到遍历外面
for(var attr in json){//attr属性 json[attr]属性值
var current=0;
if(attr=="opacity"){
current=parseInt(getStyle(obj,attr)*100)||0;//数值
}else{
current=parseInt(getStyle(obj,attr));//数值
//console.log(current);
}
//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=(current+step)/100;//W3C
}else{
obj.style.filter="alpha(opacity="+(current+step)+")";//IE
} }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);
if(fn){//定时器停止就是动画结束了 再执行fn
fn();//调用函数
}
} },30)
} //获取CSS属性函数
function getStyle(obj,attr){//谁的 属性
if(obj.currentStyle){
return obj.currentStyle[attr];//ie
}else{
return window.getComputedStyle(obj,null)[attr];//w3c
}
} </script>
3、仿360开机效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>仿360开机效果</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">
<img src="data:images/t.jpg" alt=""/>
</div>
<div class="bd" id="b">
<img src="data:images/b.jpg" alt=""/>
</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(){alert(11)})
})
} //封装多个属性运动框架
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//开始遍历json
var flag=true;//判断是否停止定时器 一定写到遍历外面
for(var attr in json){//attr属性 json[attr]属性值
var current=parseInt(getStyle(obj,attr));//数值
//目标位置就是属性值
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);
if(fn){//定时器停止就是动画结束了 再执行fn
fn();//调用函数
}
} },30)
} //获取CSS属性函数
function getStyle(obj,attr){//谁的 属性
if(obj.currentStyle){
return obj.currentStyle[attr];//ie
}else{
return window.getComputedStyle(obj,null)[attr];//w3c
}
}
</script> 运行效果：
