javascript 完美运动框架

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

function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var bStop=true; //这一次运动就结束了,所有值都到达了。
        for(var attr in json){

//1.取当前的值
            var iCur=0;
            if(attr == ‘opacity‘){
                iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
            } else{
                iCur=parseInt(getStyle(obj,attr));
            }

//2.算速度
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

//3.检测停止
            if(iCur!=json[attr]){
                bStop=false;
            }

if(attr==‘opacity‘){
                obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
                obj.style.opacity=(iCur+iSpeed)/100;
            } else{
                obj.style[attr]=iCur+iSpeed+‘px‘;
            }
        }

if(bStop){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30)
}

/*
调用
window.onload=function(){
    var oDiv=document.getElementByIdx_x(‘div1‘);
    oDiv.onmouseover=function(){
        startMove(oDiv, {width: 102, height: 200, opacity: 100});
    }
    oDiv.onmouseout=function(){
        startMove(oDiv, {width: 100, height: 100, opacity: 30});
    }    
};
 */

时间: 2024-10-07 22:22:53

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

JavaScript “完美运动框架”

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

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

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

完美运动框架(js)

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

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

JavaScript的运动框架学习总结

一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 7. 实现完美运动框架 二.内容 1. 入门案例——实现匀速运动 ①. 要求:只要简单的实现传入的对象和运动的最终目标,便能操作该对象的left属性的大小匀速的变化到目标大小. ②. 具体代码: 1 <!DOCTYPE html> 2 <html lang="en">

JS的完美运动框架

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

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

接近完美运动框架

//接近完美运动框架,支持同一对象属性同时进行运动.运动完成后执行方法 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,看看会有什么变化那?? 从图可以看出,当