滑动事件左右滑动

来源:互联网 发布:淘宝智能版首页尺寸 编辑:程序博客网 时间:2024/03/28 22:25

滑动事件左右滑动:

function slideEvent(id) {    var UlWidth = 0;    var touchStart, touchEnd, moveLength, startML, maxML;    var $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);        })    }}slideEvent('shop2');

注:id 为绑定的 唯一标识如:

<div id="shop2"></div>