JavaScript 创建运动框架的实现代码

 更新时间:2013年05月08日 17:38:21   作者:   我要评论
本篇文章是对,在JavaScript中创建运动框架的实现方法进行了介绍。需要的朋友参考下

封装好的运动框架Move(obj,attr,iTarget),可直接调用:

可用于设置width、border、fontSize、marginLeft、opacity等许多常见属性值的变速变化,实现各种有趣效果。

兼容IE和FF。

复制代码 代码如下:

/****************
    *
    *   IE-BUG:
    *   在IE中,设置opacity属性时,元素样式中需要设置opacity属性,才能读取到opacity值。
    *
    *   obj:元素对象。   attr:用引号包围的属性名。   iTarget:属性目标值。
    *
    *****************/


    function Move(obj,attr,iTarget){
        clearInterval(obj.timer);//关闭前一个定时器,解决对同个对象同时调用多个Move()时,定时器叠加问题。使用obj.timer给每个调用Move()的对象赋予各自的定时器,防止多个对象同时调用Move()时,同用一个定时器,而导致相关干扰问题。
        obj.timer=setInterval(function(){
            var cur=0;//创建一个变量,用于存储 attr属性每时每刻的值
            if(attr=="opacity"){
            //针对在FF中opacity属性值为浮点数值问题,将属性值 四舍五入、转换成浮点型。乘以100,使opacity属性值与IE统一为百分数
                cur=Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                cur=parseInt(getStyle(obj,attr));//将除opacity外的属性(width/fontSize/MarginLeft等)的初始值 转换为整型
            }
            var speed=(iTarget-cur)/10;//创建 递减的速度speed变量。实现属性值的变速改变

            speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整,解决浏览器忽略小于1px的数值 导致运动结束时,离目标值Itarget少几个像素的问题

            if(iTarget==cur){//当目标值等于目标值时,结束定时器
                clearInterval(obj.timer);
            }else{
                    cur+=speed;//当前值cur 加上 递减的速度值speed
                if(attr=="opacity"){
                    // 分别对IE和FF设置opacity属性值
                    obj.style.filter="alpha(opacity:"+cur+")"; //for IE
                    obj.style.opacity=cur/100;   //for FF
                }else{
                    obj.style[attr]=cur+"px"; //给指定属性attr 添加值cur+speed
                }
            }
        },30);
    }
    //getStyle()函数 用于兼容IE和FF:获取 对象的 非行间样式中的属性的值。 obj:元素对象。 name:属性名。
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];//for IE
        }else{
            return getComputedStyle(obj,false)[name];//for FF
        }
    }

相关文章

  • javascript常用方法汇总

    javascript常用方法汇总

    本文给大家汇总了一些自己整理的在项目中经常能够用到的javascript小方法,基本都是短小精悍型,方便大家快速开发。
    2014-12-12
  • javascript中字符串的定义示例代码

    javascript中字符串的定义示例代码

    javascript中字符串如何定义,下面有个不错的示例,大家可以学习下
    2013-12-12
  • Javascript 复制数组实现代码

    Javascript 复制数组实现代码

    Javascript 复制数组实现代码,需要的朋友可以参考下。
    2009-11-11
  • JavaScript DOM学习第四章 getElementByTagNames

    JavaScript DOM学习第四章 getElementByTagNames

    HTML有一些相关有不同tag名字的相关元素,比如H1-H6或者input,select和TEXTAREA。getElementByTagName只能取得那些有相同tag名称的元素,所以你不能用他来取得所有的标题或者整个表单内容。
    2010-02-02
  • JS数组(Array)处理函数整理

    JS数组(Array)处理函数整理

    这篇文章主要整理了一下JS数组(Array)处理函数,常用的都汇总了一下,推荐给大家。
    2014-12-12
  • 详解JavaScript中shift()方法的使用

    详解JavaScript中shift()方法的使用

    这篇文章主要介绍了详解JavaScript中shift()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • javascript的函数作用域

    javascript的函数作用域

    javascript中没有块级作用域。取而代之的javascript使用的是函数作用域(function scope):变量在声明它的函数体以及这个函数体嵌套的任意函数体内都是有定义的。
    2014-11-11
  • JS函数实现动态添加CSS样式表文件

    JS函数实现动态添加CSS样式表文件

    有时会使用一些改变心情方面的想法,比如JS函数实现动态添加CSS样式表文件,这样就可以做到随机加载心情文件,需要的朋友可以了解下
    2012-12-12
  • js Date概念详细介绍

    js Date概念详细介绍

    Date 对象用于处理日期和时间,Date对象会自动把当前日期和时间保存为其初始值,本文整理了一些,喜欢的朋友可以收藏下
    2013-11-11
  • 浅谈JavaScript数据类型及转换

    浅谈JavaScript数据类型及转换

    本文向大家简单介绍了javascript的数据类型以及他们直接的转换方法,虽然没有太多示例,但是也是个人的一些经验总结,这里推荐给大家。
    2015-02-02

最新评论