移动端,做滑动效果需要有触摸误差范围
// nav宽度太小的时候,控制nav可以左右滑动查看地址
$('.touch-move').bind('touchstart', function (event) {
// 控制只有iPhone5才需要左右滚动,其他手机的屏幕够宽了
if (parseInt($(this).css('width'), 10) > 320) {
return;
}
nav_is_moving = true;
start_position = {
offsetX: $(this).offset().left,
x: event.changedTouches[0].clientX
}
})
$('.prompt-select-fixed').bind('touchmove', function (event) {
event.preventDefault();
if (!nav_is_moving) {
return;
}
// 计算拉动的距离
var offset = event.changedTouches[0].clientX - start_position.x + start_position.offsetX;
$('.touch-move').css({
'-webkit-transform': 'translateX(' + offset + 'px)',
'transform': 'translateX(' + offset + 'px)'
})
})
$('.prompt-select-fixed').bind('touchend', function (event) {
if (!nav_is_moving) {
return;
}
var fixedOffset;
nav_is_moving = false;
// 用于判断滑动方向
var offset = event.changedTouches[0].clientX - start_position.x;
// 当未选择区县时,长度不会超出;且向右滑时,滚回0的位置
if (!$('#district').val() || offset >= 5) {
$('.touch-move').css({
'-webkit-transform': 'translateX(' + 0 + 'px)',
'transform': 'translateX(' + 0 + 'px)'
})
}
// 当右边距离"确定"太远 的情况下;且向左滑时,回滚到"确定"左边... -5是用于触摸的误差尺寸范围
else if($('#district').val() && offset < -5){
fixedOffset = parseInt($('.prompt-select-back').css('width'), 10);
$('.touch-move').css({
'-webkit-transform': 'translateX(-' + fixedOffset + 'px)',
'transform': 'translateX(-' + fixedOffset + 'px)'
})
}
})