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 相关文章推荐
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
python中的json总结
2018/10/11 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
获奖的大学生创业计划书
2014/01/05 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
iPhone13再次曝光
2021/04/15 数码科技
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL