PLUGIN

플러그인 사용을 위해선 도메인을 등록해야 합니다.
플러그인을 설치할 사이트의 도메인을 등록 후 사용법에 따라 이용해 주세요.

pageScroll2.js

이미지를 클릭하여 페이지를 이동 시키는 플러그인

사용법

<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 : 동작 완료 후 동작을 만들 수 있습니다.

 

 
 
 
 
 
Install
 

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.

 
 
 
 
 
 
※ 플러그인 문의는 CONTACT US를 이용해 주세요.