码迷,mamicode.com
首页 > Web开发 > 详细

简单模拟jQuery创建对象的方法,以及封装一个js动画框架

时间:2018-03-27 01:57:18      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:style   void   else   有一个   targe   pac   回调   成就   int   

今天无事点开了N年未点开的慕课网,看了一个js动画框架的视频,心血来潮用jQuery的方法封装了一下,虽然不如jQuery,但是还是有点点所获。

什么都不说,直接上代码:

/**

 * 这是框架的唯一对象,使用jQuery框架的创建方法

 * @class MyAnimation

 * @constructor 

 */
function MyAnimation(Selector){
	//返回MyAnimation原型链中init()方法创建的对象
	return new MyAnimation.prototype.init(Selector); 
}

/**

 * 这是对象的初始化方法

 * @method init

 * @param {string} Selector 选择对象
 
 * @return 

 */
function init(Selector){
  var el = null;
  var identifier = "(?:\\\\.|[\\w-]|[^\0-\\xa0])+";	
  var match = {
	"all": new RegExp( "^\\.(" + identifier + ")" )
  }; 		
	
  //匹配
  if(match["all"].exec(Selector) != null){
	  el = document.querySelectorAll(Selector);
  }else{
	  el = document.querySelector(Selector);
  }


 /**
  *	实现css样式的改变

  * @method changeStyle

  * @for MyAnimation

  * @param {Object} obj 元素对象(带timer)
   
  * @param {json} json json对象格式 --> {attr(String):String}(同时变化的属性和值)
  
  * @param {function} callback 回调函数,用于链式动画
  
  * @return {void}
  
  */
  //jQuery --> animate this.changeStyle = function(obj, json, callback){ clearInterval(obj.timer); var _this = this; //保存init() //一个定时器监视所有属性变化 obj.timer = setInterval(function(){ var flag = true; //判断是否所以的运动都完成了 for(var attr in json){ //初始值 var icur = 0; //判断属性,分别处理 if(attr == "opacity"){ //0.07 * 100 --> 7.000000001 --> round --> 7 icur = Math.round(parseFloat(_this.getStyle(obj, attr)) * 100); }else{ //console.log(_this); icur = parseInt(_this.getStyle(obj, attr)); } //计算速度 var speed = (json[attr] - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); /* 以下代码是不对的,因为当有一个运动到达目标,就关闭了定时器 if(icur == json[target]){ clearInterval(timer); } */ //有运动未完成就会设置为false if(icur != json[attr]){ flag = false; } if(icur == "opacity"){ obj.style.filter = ‘alpha(opacity:‘+ icur + speed +‘)‘; obj.style.opacity = (icur + speed) / 100; }else{ obj.style[attr] = icur + speed + ‘px‘; } } //已经遍历了attr,判断是否所有运动都完成了 if(flag){ clearInterval(obj.timer); //回调 if(callback){ console.log(_this); callback(_this); } } }, 30); } /** * 获取style属性值 * @method getStyle * @for MyAnimation * @param {Object} obj 元素对象 * @param {String} attr 元素对象属性值 */ this.getStyle = function(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } } MyAnimation.prototype.init = init; //使init()创建的对象指向MyAnimation MyAnimation.prototype.init.prototype = MyAnimation.prototype; //创建一个名为MA的MyAnimation外部对象引用 var MA = window.MyAnimation;  

简单模拟jQuery创建对象的方法,以及封装一个js动画框架

标签:style   void   else   有一个   targe   pac   回调   成就   int   

原文地址:https://www.cnblogs.com/githubMYL/p/8654677.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!