首页 > 技术文章 > jQuery:手機端可移動標題

mandongpiaoxue 2017-10-09 17:30 原文

function touchTitle(obj,fun){            
    var startX=0,startY=0,moveX=0,moveY=0,endX=0,endY=0,changeX=0,changeY=0;
    var ele=obj.ele!==undefined?$(obj.ele):false;
    var length=obj.length!==undefined?obj.length:false;
    var fun=fun!==undefined?fun:false;
    var child=ele.children('li');
    var width=child.eq(0).width();
    var height=child.eq(0).outerHeight();            
    var len=child.length;
    ele.width(length*width);
    if(len>length){
        for (i=0;i<len;i++){            
            if (Math.floor(i/length)>0){
                child.eq(i).css('margin-top',-height+'px');
                child.eq(i).css('margin-left',i*width+'px');
            };
            child.eq(i).css('float','left');
        };
        ele.on('touchstart',function(e){                
            marginLeft=parseInt(ele.css('margin-left'));
            startX = e.originalEvent.changedTouches[0].pageX;
            startY = e.originalEvent.changedTouches[0].pageY;
        });
        ele.on('touchmove',function(e){
            moveX = e.originalEvent.changedTouches[0].pageX;
            moveY = e.originalEvent.changedTouches[0].pageY;
            changeX=moveX-startX;
            changeY=moveY-startY;
            if ((marginLeft>=0)&&(changeX>0)){
                    ele.css('margin-left',0);
            }else if ((marginLeft<=(length-len)*width)&&(changeX<0)){           
                ele.css('margin-left',(length-len)*width);
            }else{
                if (marginLeft+changeX>=0){                        
                      ele.css('margin-left',0);
                }else if((marginLeft+changeX<=(length-len)*width)){
                    ele.css('margin-left',(length-len)*width);
                }else{
                    ele.css('margin-left',marginLeft+changeX+'px');
                };
            };
        });
        ele.on('touchend',function(e){
            endX = e.originalEvent.changedTouches[0].pageX;
            endY = e.originalEvent.changedTouches[0].pageY;
            if (changeX<0){
                ele.marginLeft=(marginLeft-width)+'px';
            }
            if (changeX>0){
                ele.marginLeft=(marginLeft+width)+'px';
                marginLeft=parseInt(ele.css('margin-left'));
            };
        });
    };            
    if(fun!==false){fun();};
};

 

推荐阅读