项目中有一个待办模块，其中由于待办过多，需要做一个左移动和右移动，此处移动模块为li，即每点击一次移动一个li的位置，li长度自适应。
?
AP.widget.TodoLableMove = new AP.Class({
??? /*移动窗体的父(外层显示)dom对象；必填；传入参数为parentId*/
??? parentDom:null,
??? /*移动窗体dom对象；必填；传入参数为moveId*/
??? moveDom:null,
??? /*左移动按钮；可填；传入参数为leftId*/
??? moveLeftDom:null,
??? /*右移动按钮；可填；传入参数为rightId*/
??? moveRightDom:null,
??? /*每次移动宽度，如果为-1则移动显示中第一个标签的宽度；可填；传入参数为moveSize*/
??? moveSize:-1,
??? /*移动速度，值越大越慢；可填；传入参数为setTime*/
??? setTime:10, //移动速度
??? showSize:4,//最多显示数
??? lables:null,//标签列表
??? firstIndex:0,//显示的第一个的li
??? lastIndex:0,//显示的最后一个的li
??? timeIndex:0,//滚动计数
??? outWidth:0,//外层宽度
??? innerWidth:0,//内层宽度
??? scrolln:0,
??? //构造函数
??? initialize : function(_arg){
??? ??? //复制参数。
??? ??? AP.hashExtend(this,_arg);
??? ???
??? ??? if(_arg.parentId){
??? ??? ??? this.parentDom=D.get(_arg.parentId);
??? ??? ??? this.outWidth=this.parentDom.offsetWidth;
??? ??? }
??? ??? if(_arg.moveId){
??? ??? ??? this.moveDom=D.get(_arg.moveId);
??? ??? }
??? ??? if(_arg.leftId){
??? ??? ??? this.moveLeftDom=D.get(_arg.leftId);
??? ??? ??? E.on(this.moveLeftDom,"click",this._moveLeft,this);
??? ??? }
??? ??? if(_arg.rightId){
??? ??? ??? this.moveRightDom=D.get(_arg.rightId);
??? ??? ??? E.on(this.moveRightDom,"click",this._moveRight,this);
??? ??? }
??? },
??? /*
??? ?* 初始化
??? ?*/
??? _setLable:function(){
??? ??? this.lables = new Array();
??? ??? var lables=D.query("li",this.moveDom);
??? ??? var j=0;
??? ??? this.innerWidth=0;
??? ??? this.scrolln=0;
??? ??? this.firstIndex=0;
??? ??? this.lastIndex=0;
??? ??? for(var i=0;i<lables.length;i++){
??? ??? ??? if(!lables[i].style.display) this.lables[j++]=lables[i];
??? ??? }
??? ??? for(var i=this.firstIndex;i<this.lables.length;i++){
??? ??? ??? this.innerWidth=this.innerWidth+this.lables[i].offsetWidth;
??? ??? }
??? ??? this.moveLeftDom.style.display="none";
??? ??? this._IsRightShow();
??? } ,
??? ?
??? /*左移动函数*/
??? _moveLeft:function(e,f){
??? ??? f.timeIndex=0;
??? ??? f.lastIndex--;
??? ??? f._setScroll_L();
??? ??? f._IsleftShow();
??? },
??? /*右移动函数*/
??? _moveRight:function(e,f){
??? ??? f.timeIndex=0;
??? ??? f.firstIndex++;
??? ??? f._setScroll_R();
??? ??? f._IsRightShow();
??? },
??? //左移动
??? _setScroll_L:function(){
??? ??? var width = this.lables[this.firstIndex].offsetWidth;
??? ??? this.scrolln ++;
??? ??? if(this.scrolln>=0){//滚到最左边时
??? ??? ??? this.moveLeftDom.style.display="none";
??? ??? ??? this.moveRightDom.style.display="";
??? ??? ??? return
??? ??? }else if((this.scrolln+this.innerWidth)<=this.outWidth){//滚到最右边时
??? ??? ??? this.moveLeftDom.style.display="";
??? ??? ??? this.moveRightDom.style.display="none";
??? ??? ??? this.moveDom.style.left=this.scrolln+"px";
??? ??? ??? if(this.timeIndex<width) this.timeIndex++;
??? ??? }else{//在滚动区域内
??? ??? ??? this.moveLeftDom.style.display="";
??? ??? ??? this.moveRightDom.style.display="";
??? ??? ??? this.moveDom.style.left=this.scrolln+"px";
??? ??? ??? if(this.timeIndex<width) this.timeIndex++;
??? ??? ??? else return
??? ??? }
??? ??? var o = this;
??? ??? function m(){o._setScroll_L();}
??? ??? setTimeout(m,this.setTimeOut);
??? },
??? //右移动
??? _setScroll_R:function(){
??? ??? var width = this.lables[this.firstIndex-1].offsetWidth;
??? ??? this.scrolln --;
??? ??? if(this.scrolln>=0){//滚到最左边时
??? ??? ??? this.moveLeftDom.style.display="none";
??? ??? ??? this.moveRightDom.style.display="";
??? ??? ??? return
??? ??? }else if((this.scrolln+this.innerWidth)<=this.outWidth){//滚到最右边时
??? ??? ??? this.moveLeftDom.style.display="";
??? ??? ??? this.moveRightDom.style.display="none";
??? ??? ??? this.moveDom.style.left=this.scrolln+"px";
??? ??? ??? if(this.timeIndex<width) this.timeIndex++;
??? ??? ??? else return
??? ??? }else{//在滚动区域内
??? ??? ??? this.moveLeftDom.style.display="";
??? ??? ??? this.moveRightDom.style.display="";
??? ??? ??? this.moveDom.style.left=this.scrolln+"px";
??? ??? ??? if(this.timeIndex<width) this.timeIndex++;
??? ??? ??? else return
??? ??? }
??? ??? var o = this;
??? ??? function m(){o._setScroll_R();}
??? ??? setTimeout(m,this.setTimeOut);
??? },
??? //左移动时标签显示
??? _IsleftShow:function(){
??? ??? var inner_Width=0;
??? ??? for(var i=this.lastIndex;i>=0;i--){
??? ??? ??? this.lables[i].style.display="";
??? ??? ??? inner_Width=inner_Width+this.lables[i].offsetWidth;
??? ??? ??? if(inner_Width<this.outWidth){
??? ??? ??? ??? this.firstIndex=i;
??? ??? ??? }
??? ??? }
??? ??? this._IsRightShow();
??? },
??? //右移动时标签显示
??? _IsRightShow:function(){
??? ??? var inner_Width=0;
??? ??? if(this.firstIndex==0) this.moveLeftDom.style.display="none";
??? ??? else this.moveLeftDom.style.display="";
??? ??? for(var i=this.firstIndex;i<this.lables.length;i++){
??? ??? ??? this.lables[i].style.display="";
??? ??? ??? inner_Width+=this.lables[i].offsetWidth;
??? ??? ??? if(inner_Width<this.outWidth){
??? ??? ??? ??? this.lastIndex=i;
??? ??? ??? ??? this.moveRightDom.style.display="none";
??? ??? ??? }else{
??? ??? ??? ??? this.lables[i].style.display="none";
??? ??? ??? ??? this.moveRightDom.style.display="";
??? ??? ??? }
??? ??? }
??? }
});
?
欢迎讨论