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


Posted in Javascript onMay 08, 2013

封装好的运动框架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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
js实现动态显示时间效果
Mar 06 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery输入城市查看地图使用介绍
May 08 #Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 #Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 #Javascript
jQuery cdn使用介绍
May 08 #Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 #Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 #Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 #Javascript
You might like
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
iframe实用操作锦集
2014/04/22 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
深入理解vue Render函数
2017/07/19 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
详解Python中的条件判断语句
2015/05/14 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
公司授权委托书
2014/04/04 职场文书
日语系毕业求职信
2014/07/27 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
户外拓展训练感想
2015/08/07 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书