jquery Show() 메서드를 사용하여 이미지의 백분율을 표시하는 방법

Question

모바일 브라우저에서 왼쪽 또는 오른쪽으로 스 와이프하면 동일한 멋진 효과 (예 : 크롬 데스크톱 버전)를 만들려고합니다. .

저는 자바 스크립트와 jQuery를 사용합니다. 이제 나는 스 와이프 할 때 화살표를 표시 할 수 있습니다. 나는 그럭저럭 쓸 거리의 거리를 가지고있을 수 있었다. 그러나 i는 거리와 관련하여 단지 화살의 일부를 보여줄 정도로 나는 2를 링크시키는 길을 발견 할 수 없다!

$('#arrow').show('slide',{direction: 'right'},1000); 
$('#arrow').fadeIn(); 
$('#arrow').fadeOut(); 

나는 애니메이션()와 또한 그것을 할 노력하고있어하지만 난 여전히 붙어있어 : S

덕분에 당신은 세 개의 값이 필요합니다

Answer 1

도움을 위해 : start, end을, current.

귀하의 경우, startend 값을 결정해야합니다.

나는 스 와이프 가능 영역 (화면) 너비를 사용하여 0 및 x (여기서 스 와이프 가능 영역의 너비는 x)이라고 말합니다. current은 이미 start 사이의 거리이며 실제 스 와이프가 끝나는 위치입니다 (스 와이프의 너비는 아마도?).

일단 이러한 값이 있으면 @ mikakun의 제안을 사용하여 퍼센트 (0에서 1 사이)를 화살표에 적용 할 수 있습니다. 화살표 그래픽은 컨테이너에 절대적으로 배치되거나 컨테이너의 배경 이미지로 설정되어야합니다. 그러면 컨테이너가 확장되어 더 많은 것을 드러내는 화살표의 비율 만 보게됩니다. 좋은 효과는 당신이 드러내고있는 것 뒤에서 반투명/회색으로 표시된 전체 화살 표 사본을 갖는 것입니다.