javascriptt切换组件MyTab.js封装

之前做的大多数是jquery的插件，就优雅性来说，我觉得还是原生的代码，写起来更舒服一点，虽然麻烦很多。

之前写了一个利用完美运动框架的轮播效果，因为使用的是原生的代码，因为不懂原生对象封装的原因一直耽搁了。

今天群里有人问了iScroll.js的问题，我看了下他发的图，感觉正事现在自己想要的例子。

通过自己的理解和其中的代码，思绪本来很清楚的，但是看了一会又乱了，其实我也应该想到，通过构造函数和原形的模式把

私有属性和公有方法，属性，以构造函数和原形模式的混合式开发封装,

这个组件很简单，但是也算是一个开始吧，至少其中大概自己是了解了些了，接着就是封装以前的轮播了。

先上js吧

javascript：

	//MyTab构造函数+原型模式
    (function(window){
		function MyTab(id,options){
			var that = this,
			    doc = document;
			that.wrapper = typeof id == 'object' ? id : doc.getElementById(id);

            //选项
			that.options = {
				moveStep:330,
				intMove:0,
			}

			//返回核心函数，不用在外部重新调用
			return this.tabAni();
		}
		MyTab.prototype = {

			//获取css类名称函数
			getClass : function(oParent,tClass){

				//保存目标到数组
				var arrResult = [];

				//获取父级元素
				var  oClass = oParent.getElementsByTagName('*');

				//在全部的父级元素循环
				for(var i= 0 ;i<oClass.length ;i++){

				    //通过空格获取每个classname
					var tempArr = oClass[i].className.split(/\s+/);
					for(var j = 0 ;j < tempArr.length ; j++){
						if(tempArr[j] == tClass){
							arrResult.push(oClass[i]);
						}
					}

				}
				return arrResult;
			},

			//获取css样式函数
			getStyle : function(obj, attr){
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				} else {
					return getComputedStyle(obj, false)[attr];//获取样式的最终值，改变之后的值，没有的话就获取css样式的值
				}
			},

			//动画函数
			moveStart : function(obj,json,fn){
				var that = this;
	            clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					var bStop = true;
					for (attr in json) {
						var icur = 0;
						icur = (attr == 'opacity') ? Math.round(that.getStyle(obj, attr) * 100) : parseInt(that.getStyle(obj, attr));
						//icur 不断变化
						//json[attr]值写死，1920

						var iSpeed = (json[attr] - icur) / 8;
						// alert('iSpeed'+iSpeed)
						iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
						if (icur != json[attr]) {
							bStop = false;
						}
						if (attr == 'opacity') {
							obj.style.filter = 'alpha(opacity:' + (icur + iSpeed) + ')';
							obj.style.opacity = (icur + iSpeed) / 100;
						} else {
							obj.style[attr] = icur + iSpeed + 'px';
						}
					}
					if (bStop) {
						clearInterval(obj.timer);
						if (fn) {
							    fn();
						}

					}
				}, 30);
			},

			//运动核心函数
			tabAni:function(){
				var that = this;
				that.tabNav = that.getClass(that.wrapper,'tab-nav')[0].getElementsByTagName('li');
			    that.tabTxt = that.getClass(that.wrapper,'txt');
				for(var i = 0 ;i < that.tabNav.length ; i++){
			    	that.tabNav[i].onclick = (function(arg){
			            return function(){
				    		for(var j = 0 ; j < that.tabTxt.length ; j++){
				    			if(that.tabTxt[j].style.left == '0px' && j == arg){
				    				console.log(that.tabTxt.length)
				    				return false;
				    			}

				                that.moveStart(that.tabTxt[j],{left:-that.options.moveStep},function(){
				                	that.moveStart(that.tabTxt[arg],{left:that.options.intMove})
				                })
				            }
			            }
			    	})(i);
			    }
			}
		}

		//输出对象
		if(typeof exports !== 'undefined'){
			exports.MyTab = MyTab;
		}else{
			window.MyTab = MyTab;
		}
	})(window)

    //对象实例化
	var tab = new MyTab('myTab',{moveStep:300,intMove:0});

html：

				<div class="gnrl-list myTab" id="myTab">
					<div class="tab-cont">
						<div class="date">
	                        19<span>/02</span>
						</div>
						<div class="txt" style="left:0px">
							<p class="caption">南油-内参-02月19日早评策略</p>
							<p class="text">美国劳工部公布的美国11月14日当周初请失业金人数数据显示，美国11月14日当周初请失业金人数降至27.1万，表明美国劳动力市场强劲升。</p>
						</div>
						<div class="txt">
							<p class="caption">粤贵银-内参-02月19日早评策略</p>
							<p class="text">美国劳工部公布的美国11月14日当周初请失业金人数数据显示，美国11月14日当周初请失业金人数降至27.1万，表明美国劳动力市场强劲升。</p>
						</div>
						<div class="txt">
							<p class="caption">邮币卡-内参-02月19日早评策略</p>
							<p class="text">美国劳工部公布的美国11月14日当周初请失业金人数数据显示，美国11月14日当周初请失业金人数降至27.1万，表明美国劳动力市场强劲升。</p>
						</div>
						<div class="txt">
							<p class="caption">本周环球视觉-内参-02月19日早评策略</p>
							<p class="text">美国劳工部公布的美国11月14日当周初请失业金人数数据显示，美国11月14日当周初请失业金人数降至27.1万，表明美国劳动力市场强劲升。</p>
						</div>
					</div>
					<div class="tab-nav">
						<ul>
							<li class="active">南油</li>
							<li>粤贵银</li>
							<li>邮币卡</li>
							<li>本周环球视觉</li>
						</ul>
					</div>
				</div>

　　

css：

.main .general-box .myTab{
    border-top: 1px solid #e4e4e4;
    overflow: hidden;
    background: #F9F9F9 url(../images/tabbg.png) no-repeat left bottom;;
    height: 309px;

    border-bottom: 1px solid #e4e4e4;
}
.main .general-box .myTab .tab-cont{
	float: left;
	width:290px;
	position: relative;
}
.main .general-box .myTab .tab-nav{
	float: right;
	width:175px;
}
.main .general-box .myTab .tab-nav li{
    width: 100%;
    height: 76px;
    border-bottom: 1px solid #eee;
    display: block;
    background: #fff;
    color:#363b52;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    line-height: 76px;
}

.main .general-box .myTab .tab-nav li.active{
	height:78px;
}
.main .general-box .myTab .tab-nav li:hover{
	color:#2f86bf;

}
.main .general-box .myTab .tab-cont .date{
	padding:20px;
	color:#2f86bf;
	font-size: 40px;
	font-weight: bold;
	background: url(../images/calendar.png) no-repeat 200px center;
}
.main .general-box .myTab .tab-cont .date span{
	color:#666666;
	font-size: 20px;
	vertical-align: top;
    line-height: 40px;
    margin-left:10px;
}
.main .general-box .myTab .txt{
	margin-top:20px;
	padding:20px;
	width:250px;
	position: absolute;
	left:-330px;

}
.main .general-box .myTab .txt .caption{
	color:#363b52;
	font-size: 18px;
	text-align: justify;
	height:50px;

}