效果：

思路：

首先，多功能框架实现的功能是: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. NHibernate Linq查询 扩展增强 (第九篇)

    在上一篇的Linq to NHibernate的介绍当中,全部是namespace NHibernate命名空间中的IQueryOver<TRoot, TSubType>接口提供的.IQu ...

  2. CountDownLatch使用场景及分析 并发测试

    原文:https://www.cnblogs.com/bqcoder/p/6089101.html CountDownLatch使用场景及分析   JDk1.5提供了一个非常有用的包,Concurre ...

  3. 万里长征第二步——django个人博客（第二步 ——日志记录器）

    定义日志记录器 可以在setting.py里设置日志记录器 # 自定义日志输出信息 LOGGING = { 'version': 1, 'disable_existing_loggers': True ...

  4. rootkit后门之安装流程

    1.首先是获得远程服务器的root权限 2.然后下载rootkit程序,本文用到的是mafix (下载前最好把杀毒软件关掉,基本上会报毒的!) 3.开始安装 tar -xvzf mafix.tar.g ...

  5. jquery获取一组相同标签内没有class的标签

    $("ul>li[class!='pre'][class!='nex']").each(function(i){ $(this).html(i); });

  6. 理解Vue的计算属性

    计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...

  7. 深度增强学习--A3C

    A3C 它会创建多个并行的环境, 让多个拥有副结构的 agent 同时在这些并行环境上更新主结构中的参数. 并行中的 agent 们互不干扰, 而主结构的参数更新受到副结构提交更新的不连续性干扰, 所 ...

  8. [Webpack] Detect Unused Code with Webpack and unused-files-webpack-plugin

    As you refactor and modify applications, it's difficult to manage and keep track of files as they be ...

  9. Swing的GUI组件得到焦点

    Swing的GUI组件如JButtin,JTextArea,JRadioButton,JComboBox等,可以使用requestFocus()方法来获得焦点.

  10. 主动通知Android系统图库进行更新

    项目中遇到调用图库进行图片的选择,因为不能主动及时更新,遂实现代码调用实现主动及时更新. 废话不多刷,看代码. 方式一,发送一个广播, sendBroadcast(new Intent(Intent. ...