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定时保存表单数据的代码
Mar 17 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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 全局变量范围分析
2009/08/07 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
python实现备份目录的方法
2015/08/03 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Django实现学生管理系统
2019/02/26 Python
更新修改后的Python模块方法
2019/03/03 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
总经理工作职责范文
2014/03/14 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
投标担保书范文
2014/04/02 职场文书
2014年司法局工作总结
2014/12/11 职场文书
质量保证书格式
2015/02/27 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis
Moment的feature导致线上bug解决分析
2022/09/23 Javascript