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 相关文章推荐
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
vue开发中遇到的问题总结
Apr 07 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Python 正则表达式操作指南
2009/05/04 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python中的__slots__示例详解
2017/07/06 Python
import的本质解析
2017/10/30 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
python else语句在循环中的运用详解
2020/07/06 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
学生喝酒检讨书
2014/02/06 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2015暑假打工实践报告
2015/07/13 职场文书