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) {
            return currentStyle(obj)[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    }
    function move(obj,json,fn){
            obj.timer=setInterval(function(){
                for (var attr in json){
                    var iCur=0;
                    if (attr == ‘opacity‘) {
                        iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
                    }else{
                        iCur=parseInt(getStyle(obj,attr));
                    }
                    var speed=(json[attr]-iCur)/8;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if (iCur == json[attr]) {
                        clearInterval(obj.timer);
                        fn&&fn();
                    }else{
                        obj.style[attr]=iCur+speed+‘px‘;
                    }

                }
        },30);

    }
时间: 2024-07-31 14:31:38

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

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值

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]); } 有了上面这个思路,我么