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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
js select option对象小结
Dec 20 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
js微信分享API
Oct 11 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
谈谈PHP语法(4)
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/11/24 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php防止用户重复提交表单
2015/11/02 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
理解javascript async的用法
2017/08/22 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python中for循环控制语句用法实例
2015/06/02 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python中turtle库的使用实例
2019/09/09 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
护理自荐信范文
2013/10/05 职场文书
大学生志愿者感言
2014/01/15 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
好的促销活动方案
2014/08/21 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
抗洪救灾标语
2014/10/08 职场文书