javascript运动框架

//运动框架
//使用json传参的方式
function sportFrame(obj,json,fun){
    var timer;
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var Stop=true;
        for(var name in json){
            var val=0;
            //判断是不是透明度
            if(name==‘opacity‘){
                val=Math.round(parseFloat(cssStyle(obj,name))*100);
            }else{
                val=parseInt(cssStyle(obj,name));
            }
            //缓冲速度
            var speed=(json[name]-val)/10;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(val!=json[name]){
                if(name=="opacity"){
                    obj.style.filter=‘alpha(opacity:‘+val+speed+‘)‘;//IE
                    obj.style.opacity=(val+speed)/100;
                }else{
                    cssStyle(obj,name,val+speed+‘px‘);
                }
            }
        }
        //判断是否达到终点
        if(Stop){
            clearInterval(timer);        
            if(fun){
                fun();
            }
        }    
    },30);
}

//获取属性值和设置属性值框架
function cssStyle(obj,prop,value){
    //style只能获取写在html标签中的写在style属性中的值(style=”…”),
    //而无法获取定义在<style type="text/css">里面的属性
    //currentStle,getComputedStyle方法可以获取内联或者外部的样式
    //获取样式
    if(arguments.length==2){
        if(obj.currentStyle){
            return obj.currentStyle[prop];  //IE
        }else{
            return getComputedStyle(obj,false)[prop];  //Fire
        }
    }
    //设置样式
    else{
        if(arguments.length==3){
            obj.style[prop]=value;
        }
    }
}

时间: 2024-08-10 21:29:17

javascript运动框架的相关文章

【repost】JavaScript运动框架之速度时间版本

一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之后停止 位移 top,left 折叠 width,height 淡入淡出 opacity 时间有关系 setInterval setTimeout 用javascript直接获取行间样式很容易,但如果要获取非行间样式那我们只能借助函数了.我这里编写了一个名为getStyle的函数,专门处理取非行间的

转 JavaScript 运动框架 Step by step

1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后 一翻书,就看见小人在动.js动画也一样.不同状态的DOM,用定时器控制,就能得到动画效果. [javascript] view plain copy window.onload = function(){ var oBtn = document.getElemen

【原生JS组件】javascript 运动框架

大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,需要写很多运动的细节以及兼容. 然而,当你的BOSS不让你使用庞大的JQ框架,而且你开发的产品也需要在一些不兼容CSS3的浏览器运行的时候,你是否觉得每次都要开个定时器来琢磨运动该怎么进行,是件很费力的事情呢? 那么福利来了,笔者最近总结了两个常用的运动框架,并将其写成组件, 只要按照下面的方法调用,即可方便使用.

JavaScript 运动框架(介绍及原理)

1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后一翻书,就看见小人在动.js动画也一样.不同状态的DOM,用定时器控制,就能得到动画效果. 1 window.onload = function(){ 2 var oBtn = document.getElementById('btn'); 3 oBtn.oncli

javascript运动框架(二)

紧接着上面写的... 给div加一个边框,border:1px solid black window.onload = function(){      var div = document.getElementById('div1'); div.onclick = function(){          setInterval(function(){               div.style.width = div.offsetWidth-1+'px'                 

适用于CSS2的各种运动的javascript运动框架

1 <script> 2 window.onload = function() { 3 //var oDiv1 = document.getElementById('box1'); 4 //var oDiv2 = document.getElementById('box2'); 5 // oDiv1.timer = null; 6 var oDiv = document.getElementsByTagName('div'); 7 8 for (var i = 0; i < oDiv.l

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

所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动.这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascript 代码 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } funct

Javascript 可同时变大边框等一系列效果运动框架——逐行分析代码,让你轻松了运动的原理

等待已久的可同时变大边框等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.height=oDiv.style[‘height’] 那么,我们把要运动的属性作为一个参数,传入到之前函数中即可. 透明度呢,需要单独处理,判断下即可. 直接上代码. <style type="text/css"> div { width: 200px; height: 200

javascript实现的运动框架详解

javascript实现的运动框架详解: 所谓的运动框架简单的说就是让元素的某一个属性值能够有渐进性的变化.运动框架的使用在实际功能中有大量的应用,最常见的比如客服系统,当拖动滚动条的时候,一般客服系统能够以弹性方式跟随,下面就简单介绍一下如何实现此效果: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author"