这篇文章的效果，需要看过以下3篇文章：

[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)

[js高手之路]打造通用的匀速运动框架

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>通用的面向对象匀速运动框架 - by ghostwu</title>

     <style>

         div {

             width: 200px;

             height: 200px;

             background: red;

             margin:20px;

         }

     </style>

     <script>

         ( function(){

             function css( obj, name ){

                 if ( obj.currentStyle ) {

                     return obj.currentStyle[name];

                 }else {

                     return getComputedStyle( obj, false )[name];

                 }

             }

             var ghostwu = {};

             ghostwu.linear = {

                 A : function( option ){

                     return new ghostwu.linear.init( option );

                 }

             };

             ghostwu.linear.init = function( option ){

                 this.opt = {

                     'selector' : '',

                     'css-name' : {},

                     'speed' : 10,

                     'cb' : undefined

                 }

                 for( var key in option ){

                     this.opt[key] = option[key];

                 }

                 this.ele = document.querySelector( this.opt['selector'] );

                 this.bindEvent();

             }

             ghostwu.linear.init.prototype.bindEvent = function() {

                 var _this = this;

                 this.ele.onmouseover = function(){

                     _this.animate( this );

                 };

                 this.ele.onmouseout = function(){

                     _this.animate( this );

                 }

             }

             ghostwu.linear.init.prototype.animate = function(){

                 var cur = 0, _this = this;

                 clearInterval(_this['ele'].timer);

                 _this['ele'].timer = setInterval(function () {

                     var bFlag = true;

                     for (var key in _this.opt['css-name']) {

                         if (key == 'opacity') {

                             cur = css(_this.ele, 'opacity') * 100;

                         } else {

                             cur = parseInt(css(_this.ele, key));

                         }

                         var target = _this.opt['css-name'][key];

                         if (cur != target) {

                             bFlag = false;

                             if (key == 'opacity') {

                                 _this['ele'].style.opacity = ( cur + _this.opt['speed'] ) / 100;

                                 _this['ele'].style.filter = "alpha(opacity:" + (cur + _this.opt['speed']) + ")";

                             } else {

                                 _this['ele'].style[key] = cur + _this.opt['speed'] + "px";

                             }

                         }

                     }

                     if (bFlag) {

                         clearInterval(_this['ele'].timer);

                         _this.opt['cb'] && _this.opt['cb'].call( _this['ele'] );

                     }

                 }, 1000 / 16 );

             }

             window.g = ghostwu;

         } )();

         window.onload = function() {

             g.linear.A({

                 'selector' : '#box',

                 'css-name' : {

                     'width' : 300,

                     'height' : 400

                 }

             });

             g.linear.A({

                 'selector' : '#box2',

                 'css-name' : {

                     'width' : 300,

                     'height' : 400

                 }

             });

         }

     </script>

 </head>

 <body>

     <div id="box"></div>

     <div id="box2"></div>

 </body>

 </html>

鼠标移动到div查看效果:

 
 

[js高手之路]面向对象版本匀速运动框架的更多相关文章

  1. [js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算

    到目前为止,我已经写完了面向对象完整的一个系列知识,前面基本属于理论,原理的理解,接下来,我们就用学到的知识来实战下吧. 看看理解原理和理论是否重要?例子从简单到复杂 一.单体(字面量)封装加减乘除 ...

  2. [js高手之路] javascript面向对象写法与应用

    一.什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, ...

  3. [js高手之路]打造通用的匀速运动框架

    本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...

  4. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  5. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  6. [js高手之路]设计模式系列课程-发布者,订阅者重构购物车

    发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...

  7. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

  8. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  9. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

随机推荐

  1. ZOJ 2859 二维RMQ（模板）

    这题求范围最小值,RMQ正好是用来解决这方面的.所以再适合只是了,又是离线静态输入输出的,所以时间比二维线段树快. #include<iostream> #include<cstdi ...

  2. 10_Eclipse中演示Git冲突的解决

     1 在user1中的readme.txt文件里先改动,而且commitand push 选中user1,右击team->Commit-à watermark/2/text/aHR0cDov ...

  3. POJ 2631 Roads in the North(树的直径)

    POJ 2631 Roads in the North(树的直径) http://poj.org/problem? id=2631 题意: 有一个树结构, 给你树的全部边(u,v,cost), 表示u ...

  4. IIS中遇到无法预览的问题（HTTP 错误 401.3 - Unauthorized 因为 Web server上此资源的訪问控制列表(ACL)配置或加密设置，您无权查看此文件夹或页面。）

    在IIS中  依次运行例如以下操作: 站点--编辑权限--共享(为了方便能够直接将分享对象设置为everyone)--安全(直接勾选 everyone )--应用--确定.

  5. HTTPS加密流程超详解（一）前期准备

    0.前言 前一阵子想写一个HTTPS的嗅探工具,之前只是大致了解SSL/TLS协议的加密流程,真正上起手来一步一步分析发现还是有点复杂的,于是我参考了wireshark的源码以及各种RFC,弄清楚了S ...

  6. Postgres中的物化节点之sort节点

    顾名思义,物化节点是一类可缓存元组的节点.在执行过程中,很多扩展的物理操作符需要首先获取所有的元组后才能进行操作(例如聚集函数操作.没有索引辅助的排序等),这时要用物化节点将元组缓存起来.下面列出了P ...

  7. ABP PUT、DELETE请求错误405.0 - Method Not Allowed 因为使用了无效方法(HTTP 谓词) 引发客户端错误 No 'Access-Control-Allow-Origin' header is present on the requested resource

    先请检查是否是跨域配置问题,请参考博客:http://www.cnblogs.com/donaldtdz/p/7882225.html 一.问题描述 ABP angular前端部署后,查询,新增都没问 ...

  8. Angular 报错 Can't bind to 'formGroup' since it isn't a known property of 'form'

    错误描述 当form表单加FormGroup属性时报错 Can't bind to 'formGroup' since it isn't a known property of 'form' < ...

  9. lua中易混淆函数

    lua中易混淆的函数 ipairs和pairs: ipairs只能顺序遍历table,遇到key不是数字就会退出 pairs可以遍历table中所有元素 ----------------------- ...

  10. 二分查找（折半查找）C++

    二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好,占用系统内存较少: 其缺点是要求待查表为有序表,且插入删除困难. 因此,折半查找方法适用于不经常变动而查找频繁的有序列表. 首先,假设表 ...