效果：

思路：

首先，多功能框架实现的功能是: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. 用 Jenkins + .netcore 2.0 构建

    上一篇是关于 .net framework 框架的, 今天是关于 .netcore 2.0 的 这里为大家分享 配置中踩到的坑 cd %WORKSPACE%\"需要还原的项目目录" ...

  2. mysql的锁定问题

    1.锁定这个问题,是mysql自动产生的,不用程序猿自己加锁 答:默认情况下,档执行insert/update操作时,mysql会自动进行表锁定.从而此时读取操作只能等待. 2.mysql, 需要添加 ...

  3. iOS开发利器-CocoaPods安装和使用教程

    新博客http://www.liuchendi.com 开发iOS项目时肯定会用到许多第三方项目,比如说:ASIHttprequest,JSONKit等等,一些类库可能又关联着其他类库,如果超过一定的 ...

  4. JStorm模型设计

    问题描述 1.在流式计算中经常需要对一批的数据进行汇总计算,类似SQL中的GROUP BY.在用JStorm来实现这一条简单的SQL时,面对的是一条一条的数据库变化的消息(这里需要保证有序消费),其实 ...

  5. window环境下备份与恢复(实际操作)

    C:\Documents and Settings\xuzhengzhu>sqlplus /nolog SQL*Plus: Release 10.2.0.1.0 - Production on ...

  6. SQL手工注入小结

    第一步先把IE菜单=>工具=>Internet选项=>高级=>显示友好 HTTP 错误信息前面的勾去掉.否则,不论服务器返回什么错误,IE都只显示为HTTP 500服务器错误, ...

  7. PostgreSQL 9.5，带来 UPSERT 等新特性

    PostgreSQL 9.5于2016年1月7日正式发布,此版本主要带来了以下几个方面的特性: UPSERT, Row Level Security, and Big Data 1)UPSERTUPS ...

  8. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  9. 转: codereview 工具平台建设

    一.  Rietveld  code review  (一套工具系统与平台) 1. http://www.cnblogs.com/fang9159/archive/2012/07/20/2591690 ...

  10. iOS 中 JSON 数据交换格式

         JSON (JavaScript Object Notation)是一种轻量级的数据交换格式. JSON 的详细教程,能够參见 JSON 中国:http://www.json.org.cn/ ...