스크롤

Question

먼저 (불편을 끼쳐 드려 죄송합니다)이 이미지 animation effect

지금, 내 질문은을 참조하시기 바랍니다 스크롤 이미지를 효과는 중첩 : 내가 같은 효과를주고 싶다. 누구나 내가 할 수있는 기술을 알고 있습니까?

터치 장치 용입니다. 처음 사용자가 탭하면 이미지 격자가 표시되어 사용자가 이러한 이미지를 스크롤 할 수 있습니다.

기본적으로 속성을 사용하여 javascript 및 jquery 라이브러리를 사용하여 수행 할 수 있습니다. 그러나 나는 그러한 스크롤링 효과를내는 데 대한 충분한 지식이 없다. 도움이 될 것입니다. 감사합니다.

jsfiddle : check this jsfiddle

UPDATE : 코드 지금까지 (아주 기본 만 중첩 된 이미지를 표시)

HTML 부분

<div id="div1">You can also drag here!</div> 

       <div id="div2"> 
       <p>Scroll Me!</p>     

      <img src="images/2.jpg" id="drag22"> 
      <img src="images/3.jpg" id="drag32"> 


       </div> <!--div2--> 

스크립트 부분

<style type="text/css"> 
#div2 
{ 

    overflow-x: scroll; 
    overflow-y: scroll; 
    white-space:nowrap; 
    width: 500px; 
    height: 300px; 
    border:2px; 
    border-color:blue; 
    position:relative; 
} 


#drag22 { 
/* bird; */ 
z-index:22; 
position:absolute; 
top: 100px; 
left:10px; 
/* opacity:0.7; */ 
/* height:40px; */ 
/*float:right;*/ 
} 
#drag32 { 
/* graph */ 
z-index:21; 
position:absolute; 
top: 30px; 
left:60px; 
} 

</style> 

Answer 1

첫 번째 모든 것, 그것은 애니메이션이 아닙니다.

는 여기를 참조하십시오 http://jsfiddle.net/gRaDf/

var width =225; 
var height=95; 
for(var i=0;i<10;i++) { 
    clonedimage = $("img#"+i).clone(); 
    clonedimage.attr("id", i+1); 
    clonedimage.css("width", width-(i*10)); 
    clonedimage.css("height", height-(i*5)); 
    clonedimage.appendTo("div"); 

}