效果：

思路：

首先，多功能框架实现的功能是:css中所有的属性都可以添加进去（也可以把方法作为参数传递过去！），然后进行缓冲运动，比如：物体的高度、长度、颜色、字体大小、透明度等，都可以直接传入参数然后进行运动，简单的说是利用json字符串把数据拼接起来，然后进行传参，参数传入进去到函数以后，根据参数的对象，还有属性，还有函数方法，然后再利用setInterval进行缓冲运动，最后判断运动什么时候结束。有一点要注意的是先用getStyle方法获取非行间样式！！！

代码：

 <head id="Head1" runat="server">

     <title></title>

     <style type="text/css">

         div

         {

             width: 100px;

             height: 100px;

             background: #00FF00;

             left: ;

             position: absolute;

             font-size: ;

             opacity: 0.3;

         }

     </style>

     <script type="text/javascript">

         window.onload = function () {

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

             divOn.timer = null;

             divOn.onmouseover = function () {

                 move(divOn, { width: , height: , fontSize: , opacity:  });

             };

             divOn.onmouseout = function () {

                 move(divOn, { opacity: , height: , fontSize: , width:  });

             };

         }

 //-----以下为多功能缓冲框架部分---------------------------------------------------------------------------------------------------------

         //获取非行间样式

         function getStyle(ojb, name) {

             if (ojb.currentStyle) {

                 return ojb.currentStyle[name];

             }

             else {

                 return getComputedStyle(ojb, false)[name];

             }

         }

         //缓冲运动json的应用

         //json{attr,finsh}

         //json{width:200,height:200}

         function move(obj, json, fnName) {      //obj是对象，Json是对象的属性， fnName是函数

             clearInterval(obj.timer);           //关闭之前的计时器

             obj.timer = setInterval(function () {

                 var timeStop = true;        //记录属性是否都已经执行完成

                 for (var attr in json) {        //遍历json中的数据

                     var oGetStyle = ;

                     if (attr == 'opacity') {  //判断透明度

                         oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * );      //透明度取整，然后转换完后赋值

                     }

                     else {

                         oGetStyle = parseInt(getStyle(obj, attr));

                     }

                     var speed = (json[attr] - oGetStyle) / ;       //求速度

                     speed = speed >  ? Math.ceil(speed) : Math.floor(speed);  //进位取整

                     //            if (oGetStyle == json[attr]) {      //如果到达，则关闭计时器

                     //                clearInterval(obj.timer);

                     //                if (fnName) {       //当关闭计时器后要执行的函数

                     //                    fnName();

                     //                }

                     //            }

                     //            else {

                     if (oGetStyle != json[attr])

                         timeStop = false;

                     if (attr == 'opacity') {    //透明度

                         obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')';    //给透明度赋值

                         obj.style.opacity = (oGetStyle + speed) / ;

                     }

                     else {

                         obj.style[attr] = oGetStyle + speed + 'px';     //移动div

                     }

                     //            }

                 }

                 if (timeStop) {     //如果所有属性都已经执行完成，那么就关闭计时器

                     clearInterval(obj.timer);

                     if (fnName) {       //当关闭计时器后要执行的函数

                         fnName();

                     }

                 }

             }, )

         }

  //-----------------------------------------------------------------------------------------------------------------------

         </script>

 </head>

 <body>

     <div id="div1">

         青苹果

     </div>

 </body>

点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)的更多相关文章

  1. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  2. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  3. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  4. 点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计

    效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup=&qu ...

  5. 【翻译】要理解Ext JS 5小工具

    原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...

  6. Js的小技巧

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

  7. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  8. amazeui中的js插件有哪些（详解功能）

    amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...

  9. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

随机推荐

  1. s3c2440对nandflash的操作

    转:http://blog.csdn.net/zhaocj/article/details/5795254 nandflash在对大容量的数据存储中发挥着重要的作用.相对于norflash,它具有一些 ...

  2. 安装Ubuntu Linux分区的推荐方案和方法

    在安装Ubuntu Linux之前,你必须先取得安装软件,(网络上有许多mirror站台可供下载,下载ISO文件后自行刻录光盘或采用硬盘安装).当一切都准备就绪后,我们还得先了解该如何规划我们的硬盘. ...

  3. Visual Studio中 sln 和 suo 文件

    我们通过双击.sln加载出我们的工程,Visual Studio采用两种文件类型(.sln和.suo)来存储解决方案的设置,它们总称为解决方案文件. .sln文件 solution,即解决方案.它引用 ...

  4. 用javac编译整个j2ee项目

    转自:http://www.blogjava.net/zhyiwww/archive/2011/10/13/361145.html 我们做项目,可能会使用ant做系统集成和部署.其实ant在编译项目时 ...

  5. Unity 加密解密

    解密无非就为了 修改游戏功能数据.提取游戏资源.加入自己想加的广告...加密就是保护游戏不被恶意修改,经常看到有人说:"加什么密,你以为自己写的代码很NB?见不得人?"我只想说,加 ...

  6. Linux now!--网络配置

    第一种:使用命令修改(直接即时生效,重启失效) #ifconfig eth0 192.168.0.1 netmask 255.255.255.0 up 说明: eth0是第一个网卡,其他依次为eth1 ...

  7. OpenGL ES入门09-GLSL实现常见特效 [转]

    本文转自简书,原文地址http://www.jianshu.com/p/e4a8c83cd37 本文是关于OpenGL ES的系统性学习过程,记录了自己在学习OpenGL ES时的收获. 这篇文章的目 ...

  8. gdc skin

    https://www.gdcvault.com/play/1024410/Achieving-High-Quality-Low-Cost 这篇是教美术怎么用做地形那种方法 复用贴图 做skin的 做 ...

  9. PLSQL Developer连接远程Oracle方法（非安装client）

    远程连接Oracle比較麻烦,通常须要安装oracle的客户端才干实现. 通过instantclient能够比較简单的连接远程的Oracle. 1.新建文件夹D:\Oracle_Cleint用于存放相 ...

  10. eslint 错误

    是因为你使用了eslint,这个是eslint的规范报错,能不用分号就不用分号. 去掉封号就醒了. 另外,方法的()前面也要有空格,不然页报错: indentifier is not in a cam ...