проведите пальцем по панели в поле зрения

Question

Я пытаюсь разработать салфетки в панели, которые выходят в поле зрения по телу, когда пользователь пробирается прямо по телу.

Вот то, что я до сих пор (код ниже): http://jsfiddle.net/XrruK/1/

$("html, body").swipe({ 
    swipeRight:function(event, direction, distance, duration, fingerCount){ 
     $('#panel').css('right', 100 - distance/$(window).width()+'%'); 
    } 
}); 

Однако я встречая две проблемы с этим:

1. панель, #panel, ячмень вступает в Посмотреть. И когда я уменьшаю от 100 до 50 или меньше, он приходит слишком быстро и не чувствует пропорциональности расстояния прохождения.

2. Укладка происходит после того, как салфетка выполнена. Как я могу нарисовать панель, #panel, как происходит салфетка?

Я был бы весьма признателен любым и всей помощь, чтобы этот #panel прийти в поле зрения, как тело в настоящее время прокатывается справа

Answer 1

Попробуйте с, я думаю, что это то, что вы стремитесь к:

(100 - ((расстояние/$ (окно) .width())) * 100)

Я просто играл с формулой немного, чтобы сделать его более "пропорционально" т o расстояние, которое пользователь совершает:

Где первые 100 - это 100% ширины экрана. Затем вы получите расстояние по всей ширине, чтобы получить десятичное представление расстояния, пройденного по отношению к ширине экрана, скажем, 0,63, и умножьте его на 100, чтобы получить его в процентах. Затем просто вычтите два, а оставшееся - сколько будет вашего правого расстояния в процентах. Хитрость состоит в том, чтобы просто отменить проценты, чтобы получить расстояние от правого, а не от расстояния слева.