resizable를 응용한 UI 기능 따라하기 (이미지 겹쳐서 좌/우 이동)
페이지 정보
작성자 서방님 댓글 0건 조회 78회 작성일 21-01-21 15:57본문
깨톡 에서 기사 같은거 보게 되면 두 사진을 비교할때 이전에는 위아래로 위치 시켰었잖아요??
하지만 요즘에는 그렇지 않습니다. 두 사진을 한 곳에 겹쳐 놓고 좌우로 왔다 갔다 하면서 사진을 비교할 수 있게 해놨죠.
지금 제가 하는 기술은 누가 만들어놓은 API 아닙니다. 그래서 터치 방식은 아직 안됩니다. ㅠㅠ 웹에서만 가능한 기술이니 참고하시고~
터치 방식도 잘만 하면 될 거 같기도 하니 나중에 올려보겠습니다.
API 가 아니다 보니 제가 일일히 설명 좀 하겠습니다.
우선 jquery.ui 스크립트를 가져와야 합니다. css 도 마찬가지겠죠.
html의 head 부분에 넣어 주겠습니다.
1 2 3 | <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | cs |
저 3개를 포함시켜주시고 ~
코드 작성에 앞서 Jquery.UI 가 있는 홈페이지를 한번 가서 쭉 둘러보고 오시는게 좋습니다.
이제 코드작성을 해보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <style> .node_LR_width_x {width:500px; height:400px; position:relative;} .node_LR_width_x img{width:500px ; height:400px} .node_LR_width_x #LR_width_x_1 { width:250px; height:400px; overflow:hidden; position:absolute; border-right:3px solid black; } </style> <script> $(function(){ // 여기가 실질적인 기술 $("#LR_width_x_1").resizable({ handles : 'e,w', maxWidth: 500, minWidth: 0, maxHeight: 400, minHeight: 400, }) }) </script> <body> <div style="padding-top:100px" class="node_LR_width_x"> <div id="LR_width_x_1"> <img src="../usi/bird2.jpg"/> <!-- 이미지님 구독자들이 알아서 처리하시고 --> </div> <img src="../usi/bike.jpg" /> <!-- 이미지님 구독자들이 알아서 처리하시고 --> </div> </body> </html> | cs |
우리가 사용할 Jquery 기술은 resizable 입니다.
textarea 태그 다들 아시죠?? 그걸 이미지나 div 태그에도 붙일 수 있는겁니다.
css 중에서는 resize 속성이 있겠네요.
상세 설명 들어갑니다.
첫번째 이미지 bird2 에는 position : absolute 가 주어져 있습니다. 그럼 이미지가 절대적인 위치로 가겠죠??
그리고 그 다음 이미지에는 아무것도 없습니다. 왜냐하면 ~ 두번째 것 마저 절대적인 위치를 줘버리면 하단이 슉 하고 올라와서 이미지가
하단을 덮쳐버리는 괴기한 현상이 일어납니다. 물론 첫번째 div 인 class="node_LR_width_x" 에 relative 를 줘서 막아봤지만 그렇게
하면 이미지 두개가 엇나가서 따로 조정해야하는 불편함이 있어서 어차피 하나는 절대적 위치에 있으니 하나만 그 위로 올리면 된다고
생각하시면 이해가 빠르실겁니다.
다음 이미지 세팅을 했으니 숨겨지는 걸 해야겠죠. 그래서 첫번째 이미지에 div를 감싼겁니다.
그 div 에 따로 width 와 height 를 주고 overflow: hidden 을 하면 !!! 현재 div 의 width 는 250px 이미지는 500px 이니까 250px가
hidden 즉 , 숨겨지겠네요 그 상태가 현재 이런상태입니다.
사실상 이미지는 겹쳐져 있는 것 입니다.
bird 이미지는 분명 500px 이지만 id="LR_width_x_1" 를 가진 div라는 커튼으로 가려놨기 때문에 반밖에 보이지 않게 되는거죠.
그리고 거기에 border-right 를 주면 완전히 갈라선 것처럼 보입니다. 이제 이 div 에 기술을 주겠습니다.
$(function(){
$("#LR_width_x_1").resizable(function(){
});
});
위에가 기본틀 입니다. 기본은 vertical 상, 하 horizontal 좌, 우 전부 조정 가능하게 됩니다.
하지만 우린 여기에 옵션을 줍니다.
handles : 'e,w' // 이건 제 생각엔 east west 동, 서 를 가리키는 것 같습니다. 즉 !! 좌,우만 되게 해라 이겁니다.
상하는 n , s 일까요?? 해보지는 않았습니다. ㅋㅋㅋ
maxWidth // 최대 넓이
minWidth // 최소 넓이
maxHeight // 최대높이
minHeight // 최소 높이
jquery 홈페이지 가시면 옵션이 더 많으니까 찾아 보세용 .
이렇게 하면 이제 완성입니다.
예시를 보시면
왼쪽으로 ~
오른쪽으로 ~
근데 이게 커서유효성이 너무 작아서 좀 크게 할 방법이 없을까 합니다. 이게 원래 기술은 아니겠지만 한번 따라해봤습니다.
관련링크 (출처)
댓글목록
등록된 댓글이 없습니다.
