效果：

思路：

首先，多功能框架实现的功能是: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. IE主页被篡改为360导航终极处理办法

    不得不吐槽360真他妈是流氓至极,在不被用户许可的情况下直接修改用户浏览器默认主页,还不容易找到修改的地方. 以IE为例:我们将其首页设置为百度https://www.baidu.com/,终极处理办 ...

  2. 如何释放 DB_RECOVERY_FILE_DEST_SIZE

    转自原文 如何釋放 DB_RECOVERY_FILE_DEST_SIZE,有删减 oracle默認安裝之後,如何沒有手動設置歸檔路徑(alter system set log_archive_dest ...

  3. mysql分裤分表

    1.分库分表 很明显,一个主表(也就是很重要的表,例如用户表)无限制的增长势必严重影响性能,分库与分表是一个很不错的解决途径,也就是性能优化途径,现在的案例是我们有一个1000多万条记录的用户表mem ...

  4. 【mysql】更新“”空字符串为NULL

    mysql中NULL和“”是完全不同的概念,因此出现了“”导致NULL不可查的问题出现,那怎么能将一个字段设置为NULL呢? update goods_type gt set gt.parent_ui ...

  5. PTCRS 目前投资最成功的的PTC站点

    PTCRS算是我投资的比较成功的一个PTC网站,因此首先和大家介绍一下,因为PTC最开始的几个月盈利空间非常大,即使这样,在这20多天里面站长也已经稍微调低了盈利水平. 目前基本上Golden会员租赁 ...

  6. [转]SSIS高级转换任务—行计数

    本文转自:http://www.cnblogs.com/tylerdonet/archive/2011/06/19/2084780.html 在SSIS中的Row Count转换可以在数据流中计算数据 ...

  7. SEO之巴莱多定律

    SEO这个词在2007.2008年好像特别的火,尤其在2007年下半年至今,众多SEO爱好者发起了最大的一轮搜索引擎优化研究风暴,甚至最终逼迫百度等大型搜索引擎公司改变算法. SEO,确实能带来一些经 ...

  8. HDU5312 Sequence

    题意:t组数据,每组数据给个m.问m最少能由几项形如3*n*(n-1)+1的数表示 eg 7=1(n=1)+1(n=1)+1(n=1)+1(n=1)+1(n=1)+1(n=1)+1(n=1);     ...

  9. 转：Android 签名验证机制（相当不错，强烈推荐）

    转:  http://riusksk.blogbus.com/logs/272154406.html Android应用签名验证过程中,满足以下条件才能安装应用: 1.SHA-1(除META-INF目 ...

  10. HDU 1253 胜利大逃亡 NYOJ 523【BFS】

    胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...