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;
}
