关于完美运动框架的一些思路

前面介绍了几个运动框架,但在实际中,有时不想运动一个接一个,而是希望多个属性同时变化,这时上面的那几个框架可能需要做出一些调整,这里我们又要接触一个比较实用的方法,就是json,json有点类似于数组,可以存储多个值,而且能进行遍历,如:

var oJson = { a:12,b:15,c:20};

for( arr in oJson){            //对json进行遍历,注意json这能用 for in 进行遍历,没有.length 属性

alert(oJson[arr]);

}

有了上面这个思路,我么可以将json作为一个参数传给前面的setMove()函数作为传值参数,这样用户也能同时改变多个值。

时间: 2024-10-06 00:10:50

关于完美运动框架的一些思路的相关文章

JS 之完美运动框架

完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; oDiv.onmouseover=function(){ move(this,{width:200,height:200}); } } function getStyle(obj,attr){ if (obj.currentStyle) { r

JS的完美运动框架

function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } //注意:在多物体运动框架中,所有东西都不能公用 !否则出问题,BUG:将必要的变量加到物体的属性中就行.即:属性与运动对象绑定:速度.其他属性值(如透明度等等) function startMove(obj, jso

完美运动框架(js)

一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ clearInterval(obj.timer);//若物体之前开有定时器则先关闭 obj.timer = setInterval(function(){ var bStop = true; //假设所有的属性值运动到了目标值 for(var attr in json){//遍历物体传过来的json值

2015.8.2js-19(完美运动框架)

1 /*完美运动框架*/ 2 //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity 3 function startMove(obj,json,fnEnd){ 4 clearInterval(obj.timer); 5 obj.timer = setInterval(function(){ 6 var bStop = true; //假设所有的属性都达到目标值 7 for(a

JavaScript “完美运动框架”

/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height:200},fnEnd) * obj: 运动物体 * json: 运动属性和运动目标值的json集合,{'width':200,'height':200} * sv: 运动的速度,speed-value,值越小速度越大 * fnEnd: 运动结束后的回调函数 */ function move(obj

接近完美运动框架

//接近完美运动框架,支持同一对象属性同时进行运动.运动完成后执行方法 function goChange(obj, josn, fn) {//obj:传入对象实参:josn:传入{属性/属性值,...}的josn串:fn传入需要在执行完运动后被执行的函数 clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; for (var attr in josn) { var iCour=0; if

js运动-完美运动框架

在上一篇的<js运动-同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacity:30}); } 在鼠标移入的时候,我们让width不变成300,而是变成204,看看会有什么变化那?? 从图可以看出,当

Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理

大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMov

JS完美运动框架

/*---------------------------------------------------------------------------- 功能: 获取某个节点下的所有ClassName为'sClass'的元素输入: oParent:要获取的class元素的父级节点 sClass:要获取的元素的class名称输出: 获取到的节点数组 --------------------------------------------------------*/ function getEl