JQuery와는

Question

나는 경우 문서 부하에 대한 요청이

function touchMove(event) { 
event.preventDefault(); 
if ((event.touches.length === 1) && (swipeDirection === 'down') && (swipeLength >= 90) && (swipeLength <= 120)) { 
    curX = event.touches[0].pageX; 
    curY = event.touches[0].pageY; 
    ('1.png').hover(function() { 
     $(this).stop().animate({ 
      "opacity": '1' 

     }); 

그리고이 CSS : 본문에 다음

<style> 
     #container { 
      background: transparent; 
      left: 5px; 
      top: 20px; 
      position: relative; 
      border: 1px dotted #ddd; 

     } 
</style> 

그리고이 :

<div id="swipe-frame" class="swipe-element" ontouchstart="touchStart(event,'swipe-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);" style="width:100%; height:100%; background: transparent; -webkit-user-select: none;padding-top:128px;"> 
</div> 

    <div id="container"> 
    <img src="1.png" alt="image" /> 
    <img src="2.png" alt="image" /> 
    <img src="3.png" alt="image" /> 
    <img src="4.png" alt="image" /> 
    <img src="5.png" alt="image" /> 
</div> 

5 개의 이미지를 서로 겹쳐서로드하면 하나의 이미지 인 것처럼 보이므로 문서가로드되면 회색으로 표시됩니다. 그런 다음 사용자가 이미지 위에서 손가락을 움직이면 이미지는 정상 상태로 움직입니다. 그러나 아무것도 나타나지 않습니다. 아무도 이유를 아나요? http://tinyurl.com/62hakh2 찾아 주셔서 감사합니다.

Answer 1

#swipe-frame div에서 height:100%을 제거해보세요. 그러면 div가 전체 화면을 차지하게되고 #container div가 바로 뒤에 오게됩니다.

Answer 2

이미지를 서로 위에로드하려는 경우 컨테이너가 아닌 스타일을 적용해야합니다. 시도 :

#container img { 
    background: transparent; 
    left: 5px; 
    top: 20px; 
    position: relative; 
    border: 1px dotted #ddd;  
    }