<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>任意值的运动框架</title>

    <style>

        div {

            float: left;

            width: 200px;

            height: 200px;

            margin: 20px;

            background-color: yellow;

            border: 1px solid black;

            font-size: 14px;

            filter: alpha(opacity=30); /*IE*/

            opacity: 0.3; /*火狐,chrome*/

        }

    </style>

    <script>

        window.onload = function () {

//Div变高

            var oDiv1 = document.getElementById('div1');

            oDiv1.onmouseover = function () {

                startMove(this, 'height', 400);

            };

            oDiv1.onmouseout = function () {

                startMove(this, 'height', 200);

            };

//Div变宽

            var oDiv2 = document.getElementById('div2');

            oDiv2.onmouseover = function () {

                startMove(this, 'width', 400);

            };

            oDiv2.onmouseout = function () {

                startMove(this, 'width', 200);

            };

//改变文字大小

            var oDiv3 = document.getElementById('div3');

            oDiv3.onmouseover = function () {

                startMove(this, 'fontSize', 30);

            };

            oDiv3.onmouseout = function () {

                startMove(this, 'fontSize', 14);

            };

//修改透明度

            var oDiv4 = document.getElementById('div4');

            oDiv4.onmouseover = function () {

                startMove(this, 'opacity', 100);

            };

            oDiv4.onmouseout = function () {

                startMove(this, 'opacity', 30);

            };

        };

//属性值的获取函数

        function getStyle(obj, name) {

            if (obj.currentStyle) {

                return obj.currentStyle[name];

            }

            else {

                return getComputedStyle(obj, false)[name];

            }

        }

//运动框架

        var timer = null;

        function startMove(obj, attr, iTarget) {    //obj代表对象,attr代表目标属性,iTarget代表设定的属性目标值

            clearInterval(obj.timer);       //每次执行函数之前清除定时器,保证每次只有一个定时器在工作

            obj.timer = setInterval(function () {

                var cur = 0;

                if (attr == 'opacity') {        //透明度属性的获取

                    cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);   //Math.round针对IE7出现小数的问题

                }

                else {

                    cur = parseInt(getStyle(obj, attr));     //非透明度的属性值获取

                }

                var speed = (iTarget - cur) / 6;

                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //向上取整（速度为正值）和向下取整（速度为负值）

                if (cur == iTarget) {

                    clearInterval(obj.timer);       //达到目标值时清除定时器

                }

                else {

                    if (attr == 'opacity') {

                        obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';    //IE浏览器

                        obj.style.opacity = (cur + speed) / 100;      //火狐,chrome

                    }

                    else {

                        obj.style[attr] = cur + speed + 'px';   //非透明度属性值

                    }

                }

            }, 30);

        }

    </script>

</head>

<body>

<div id="div1">变高</div>

<div id="div2">变宽</div>

<div id="div3">I Love JavaScript!</div>

<div id="div4">修改透明度</div>

</body>

</html>

关于JS运动框架，需要注意的点如下：

1. 透明度和非透明度属性值的获取和赋值需要分开设置；一般属性的单位值为px，透明度没有单位；

2. 透明度有兼容性问题;IE浏览器: filter:alpha(opacity=30); 火狐和chrome: opacity = 0.3; 因为透明度的值为小数，所以获取时需要使用parseFloat方法而非parseInt，后者会将透明度的值取0，从而设置无效；

3. 在IE7下，parseFloat（）*100得出的值可能为非整数，需要使用Math.round进行四舍五入做兼容处理；

4. speed = iTarget - cur, 得出的值可能为正或为负的小数，如果为正需要向上取整，为负向下取整，如果不进行此操作，将永远无法达到目标值，计算机关于属性值最小计算单位为1px,当 var speed = (iTarget - cur) / 6 的值小于0.5时会被忽略，具体请参考如下例子，当speed=0.4和0.5时，点击按钮时文本框内数值的变化。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #div1{

            width:100px;

            height:50px;

            background-color: yellow;

        }

    </style>

    <script>

       window.onload = function () {

           var oDiv = document.getElementById('div1');

           var oBtn = document.getElementById('btn1');

           oBtn.onclick = function () {

               var speed = 0.5;

//               var speed = 0.4;

               oDiv.style.width = oDiv.offsetWidth + speed + 'px';

               document.getElementById('text1').value = oDiv.offsetWidth;

           };

       }

    </script>

</head>

<body>

<div id="div1"></div>

<input type="button" id="btn1" value="按钮">

<input type="text" id="text1">

</body>

</html>

关于小数取整的例子

5. 关于定时器：在每次执行运动框架内的定时器之前，应当清除所有定时器，保证每次只有一个定时器在运作，否则多个定时器同时工作会出bug，运行速度越来越快。

6. 当出现相同冗余代码时，可以适当引入参数，简化代码。

JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）的更多相关文章

  1. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  2. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  3. 并发编程学习笔记(12)----Fork/Join框架

    1. Fork/Join 的概念 Fork指的是将系统进程分成多个执行分支(线程),Join即是等待,当fork()方法创建了多个线程之后,需要等待这些分支执行完毕之后,才能得到最终的结果,因此joi ...

  4. Quartz学习笔记：集群部署&高可用

    Quartz学习笔记:集群部署&高可用 集群部署 一个Quartz集群中的每个节点是一个独立的Quartz应用,它又管理着其他的节点.这就意味着你必须对每个节点分别启动或停止.Quartz集群 ...

  5. Knockout.js快速学习笔记

    原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...

  6. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  7. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  8. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  9. handlebars.js基础学习笔记

    最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...

随机推荐

  1. Android Activity界面切换添加动画特效（转）

    在Android 2.0之后有了overridePendingTransition() ,其中里面两个参数,一个是前一个activity的退出两一个activity的进入, @Override pub ...

  2. 【JavaScript】停不下来的前端，自动化流程

    http://kb.cnblogs.com/page/501270/ 流程 关于流程,是从项目启动到发布的过程.在前端通常我们都做些什么? 切图,即从设计稿中获取需要的素材,并不是所有前端开发都被要求 ...

  3. Windows平台下libevent库的使用

    1     引子 手头上有一个使用了4个年头的HttpClient库,自己封装的,对于集成了IE浏览器的应用程序很友好.但最近想把产品扩展到Chrome和FireFox阵营,萌发了重构HttpClie ...

  4. percona-xtrabackup 文档

    https://www.percona.com/doc/percona-xtrabackup/2.4/index.html

  5. Laravel 5.0 之命令及处理程序

    本文译自 Matt Stauffer 的 系列文章 . 本文中涉及的新功能都是关于 Commands 的,这些特性在 Laravel 旧版本中已经有了,但是在 Laravel 5.0 中变得更加好用了 ...

  6. cocos2dx3.0-执行cocos compile -p win32 命令出现错误 MSB8020 以及编译出来的exe 无法打开的问题

    本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ 当博主准备把cocos工程用cocos命令行编译出来的时候,报出了MSB8020的错误,具体如下 ...

  7. ASP.NET 批量更新

    ASP.NET三种常用批量操作: 一.SqlBulkCopy copy = new SqlBulkCopy("");(优先考虑 性能最优) SqlBulkCopy可以将一个Data ...

  8. Linux_内存查询

    查询磁盘使用情况: [root@css-management ~]# df -hl 文件系统 容量 已用 可用 已用% 挂载点 Filesystem Size Used Avail Use% Moun ...

  9. (ASP.NET)总结MVC中@Html表单用法

    1.当type类型是text时:@Html.TextBoxFor(model => Model.Name,new{@style = "width: 50px;", @clas ...

  10. CentOS 6.5_X64下安装MongoDB数据库

    1.下载MongoDB 官网下载地址:https://www.mongodb.org/downloads 具体链接:https://fastdl.mongodb.org/linux/mongodb-l ...