<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="//work6.kr/plugin/plugin_link/43"></script> <script> $(function(){ /* 메뉴 클릭시 스크롤 이동 */ $('#thumnail_list ul').pageScroll2({ container:'#container', speed:2000, compleate:function(data){ alert(data); } }); }); </script> <style> #thumnail_list{ position:fixed; width:112px; height:100%; background:#222222; left:4%; overflow:hidden; } #thumnail_list .container{ width:112px; padding-right:20px; height:100%; position:relative; overflow-y:auto; } #thumnail_list li{ margin:10px 10px; cursor:pointer; } #thumnail_list li img{ width:88px; border:2px solid #fff; } #container{ overflow:hidden; } #container ul li:nth-child(1){ width:100%; background:url('../img/img1.jpg') no-repeat; background-position:center center; background-size:contain; } #container ul li:nth-child(2){ width:100%; background:url('../img/img2.jpg') no-repeat; background-position:center center; background-size:contain; } #container ul li:nth-child(3){ width:100%; background:url('../img/img3.jpg') no-repeat; background-position:center center; background-size:contain; } </style> <div id="thumnail_list"> <div class="container"> <ul> <li> <img src="./img/img1.jpg" alt="img1"> </li> <li> <img src="./img/img2.jpg" alt="img2"> </li> <li> <img src="./img/img3.jpg" alt="img3"> </li> </ul> </div> </div> <div id="container"> <ul> <li></li> <li></li> <li></li> </ul> </div>
설치방법
1. Line1 : 제이쿼리를 설치 및 연결 합니다.
2. Line2 : 플러그인 사용하기 후 도메인을 등록 합니다. 코드를 복사 그리고 붙여넣기 합니다.
3. Line4 ~ 13 : 스크립트를 복사 그리고 붙여넣기 합니다.
4. Line17 ~ 62 : 스타일을 복사 그리고 붙여넣기 합니다. 기본 형식 입니다.
5. Line65 ~ 90 : html을 복사 그리고 붙여넣기 합니다. 기본 형식 입니다.
6. Line7 : 버튼 클릭시 동작 대상 입니다.
7. Line8 : 속도를 조절 합니다.
8. Line9 ~ 11 : 동작 완료 후 동작을 만들 수 있습니다.
1. Line1: Install and connect to Jquery.
2. Line2: Register the domain after using the plug-in. Copy and paste code.
3. Line4 ~ 13: Copy and paste the script.
4. Line 17 ~ 62: Copy and paste the style. The default format.
5. Line 65 ~ 90: Copy and paste html. The default format.
6. Line7: It is the operation target when button is clicked.
7. Line8: Adjust the speed.
8. Line9 ~ 11: Motion can be created after completion of motion.