导航条滑动效果

最新推荐文章于 2022-01-19 19:38:34 发布

weixin_33924770

最新推荐文章于 2022-01-19 19:38:34 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/hellobajie/p/6957631.html

版权

一、无回弹效果

　　 function slide(id) {
        var UlWidth = 0;
        var touchStart, touchEnd, moveLength, startML, maxML; 
        $shop2 = $('#' + id);
        $shop2.find('li').each(function(){
            UlWidth += $(this).outerWidth();
        })
        $shop2.width(UlWidth);
        maxML = UlWidth - $(window).width();
        if(maxML > 0){
            $shop2.bind('touchstart', function(e){
                touchStart = e.originalEvent.targetTouches[0].pageX;   
                startML = $shop2.css('margin-left');
            }).bind('touchmove', function(e){
                touchEnd = e.originalEvent.targetTouches[0].pageX; 
                moveLength = touchEnd - touchStart + parseInt(startML) ;
                if(moveLength > 0){
                    moveLength = 0;
                }else if(moveLength < -maxML){
                    moveLength = -maxML;
                }
                $shop2.css('margin-left', moveLength)
            })
        }
    }

二、有回弹效果

　　function slide(id) {
        var UlWidth = 0;
        var touchStart, touchEnd, moveLength, startML, maxML; 
        $shop2 = $('#' + id);
        $shop2.find('li').each(function(){
            UlWidth += $(this).outerWidth();
        })
        $shop2.width(UlWidth);
        maxML = UlWidth - $(window).width();
        if(maxML > 0){
            $shop2.bind('touchstart', function(e){
                touchStart = e.originalEvent.targetTouches[0].pageX;   
                startML = $shop2.css('margin-left');
            }).bind('touchmove', function(e){
                touchEnd = e.originalEvent.targetTouches[0].pageX; 
                moveLength = touchEnd - touchStart + parseInt(startML);
                $shop2.css('margin-left', moveLength)
            }).bind('touchend', function(){
                if(moveLength > 0){
                    moveLength = 0;
                }else if(moveLength < -maxML){
                    moveLength = -maxML;
                }
                $shop2.animate({'marginLeft': moveLength}, 200);
            })
        }
    }