面向对象版本匀速运动框架_HTML/CSS_互联网开发技术网_传播最新的编程技术

面向对象版本匀速运动框架

时间：2017-10-19

共 816 人浏览

这篇文章的效果，需要看过以下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查看效果:

相关推荐

ajax请求加蒙层

vue 数组和对象不能直接赋值情况和解决方法

onclick方法和$"".click有不一样的地方

Angular获取项目中定义的json文件

原生JS实现音乐播放器！

Vue数据双向绑定

纯html+css+javascript实现楼层跳跃式的页面布局

你所不知道的全景图

es6 语法 （iterator和for...of循环）

checkbox复选框取值

angular1与swiper

flexbox布局

父类清除浮动的原因、（清除浮动代码，置于CSS中方便调用）

vue-cli生成的项目配置开发和生产环境不同的接口

2017web前端面试总结

BootStrap 标题设置跨行无效

介绍一款小众的IDE

echarts饼图扇区添加点击事件

弹性盒模型

常用数组函数

es6 语法（iterator和for...of循环）