JS的完美运动框架

function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}

//注意:在多物体运动框架中,所有东西都不能公用 !否则出问题,BUG;将必要的变量加到物体的属性中就行。即:属性与运动对象绑定:速度、其他属性值(如透明度等等)
function startMove(obj, json, fnEnd)//完美运动框架//换为json,如:startMove(oDiv, {width: 400, height: 400})
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){

var bStop=true;   //关键 //假设:所有的值都已经到了

for(var attr in json) //用一个循环,把原来的那套东西包在里面,每次定时器执行的时候,都会循环,循环的次数取决于json里面写了什么
{

var cur=0;

if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100); //因为这里,会出问题,小数
}
else
{
cur=parseInt(getStyle(obj, attr));
}

var speed=(json[attr]-cur)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur!=json[attr])
bStop=false;

if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;

}
else
{
obj.style[attr]=cur+speed+'px';
} 

}

if(bStop)//如果所有的值都到了,关闭定时器
{
clearInterval(obj.timer);

if(fnEnd) fnEnd();
}

}, 30);
}

说明 :

obj --------------->  进行运动的节点

json ------------>   要进行哪些运动   如:{width:300,height:200}  300 、200为目标点

fu  --------------->  运动结束后进行的 操作 如 :运动结束后出现一个弹窗什么的

这个JS完美运动框架是CSS2 的 ~

在CSS3里还有一套超越完美运动框架的框架~那套框架在CSS3和CSS2里面通吃~

时间: 2024-07-31 10:34:33

JS的完美运动框架的相关文章

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)

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

js实现的运动框架代码实例

js实现的运动框架代码实例:元素的运动效果在大量的场景中都有应用,最典型的一个就是网站的客服系统,一般都会随着滚动条运动,本章节就介绍一下js的一个运动框架实例,希望能够给需要的朋友带来借鉴作用.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwh

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

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

前面介绍了几个运动框架,但在实际中,有时不想运动一个接一个,而是希望多个属性同时变化,这时上面的那几个框架可能需要做出一些调整,这里我们又要接触一个比较实用的方法,就是json,json有点类似于数组,可以存储多个值,而且能进行遍历,如: var oJson = { a:12,b:15,c:20}; for( arr in oJson){ //对json进行遍历,注意json这能用 for in 进行遍历,没有.length 属性 alert(oJson[arr]); } 有了上面这个思路,我么