一、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> 运行效果:

第61天:json遍历和封装运动框架(多个属性)的更多相关文章

  1. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  2. 封装运动框架基本函数(多个属性包括透明度和zIndex)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JS封装运动框架(另一种写法)

    function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...

  4. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  5. 【repost】JavaScript完美运动框架的进阶之旅

    运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...

  6. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  7. 无限循环轮播图之运动框架(原生JS)

    封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...

  8. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  9. .NET3.5中JSON用法以及封装JsonUtils工具类

    .NET3.5中JSON用法以及封装JsonUtils工具类  我们讲到JSON的简单使用,现在我们来研究如何进行封装微软提供的JSON基类,达到更加方便.简单.强大且重用性高的效果. 首先创建一个类 ...

随机推荐

  1. 爬取 StackOverFlow 上有关于 Python 的问题

    给定起始页面以及爬取页数,要求得到每一个问题的标题.票数.回答数.查看数 stackflow <- function(page){ url <- "http://stackove ...

  2. SDWebImage的原理 和 实现机制 --- tableView 滑动卡的问题

    一.原理 1)当我门需要获取网络图片的时候,我们首先需要的便是URl没有URl什么都没有,获得URL后我们SDWebImage实现的并不是直接去请求网路,而是检查图片缓存中有没有和URl相关的图片,如 ...

  3. EF Core注意事项

    流程:https://docs.microsoft.com/en-us/ef/core/get-started/aspnetcore/new-db 1.Both Entity Framework 6. ...

  4. hdu1069Monkey and Banana(动态规划)

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  5. Qt-QML-Repeater-导航条

    上篇文章中,我写了一个自己的Button,也就是美化了一下QML自带的Button 就是上面的这个,剩下的就是放三张图片在上面就可以了,当然了,这个Button在后期,还是会加入更让多的美化,比如,可 ...

  6. SQL 从入门到 DBA 删库跑路

    SQL 从入门到 DBA 删库跑路 一.基础 人员信息表: ID 姓名 性别 出生 婚否 学历 工资 工会 35009449 孙xx 男 1978-2-17 未婚 中专 3000 TRUE 35000 ...

  7. 题解 CF191C 【Fools and Roads】

    树上差分半裸题 常规思路是进行三次DFS,然后常规运算即可 这里提供两次dfs的思路(wyz tql orz) 我们以样例2为例 我们考虑任意一条路径,令其起点为u终点为v,每走一次当前路径则v的访问 ...

  8. python切片技巧

    写一个程序,打印数字1到100,3的倍数打印“Fizz”来替换这个数,5的倍数打印“Buzz”,对于既是3的倍数又是5的倍数的数字打印“FizzBuzz” for x in range(101): p ...

  9. 树(Tree,UVA 548)

    题目描述: 题目思路: 1.使用数组建树 //递归 2.理解后序遍历和中序遍历,建立左右子树 3.dfs深度搜索找出权重最小的路径 #include <iostream> #include ...

  10. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...