pageScroll2.js

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

샘플영상

다운로드

pageScroll2.js V1.0 다운로드

설치/사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/pageScroll2.js"></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. 제이쿼리 설치가 필요 합니다.

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/pageScroll2.js"></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>

 

 

2. 다운로드 받은 pageScroll2.js를 설치 합니다.

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/pageScroll2.js"></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>

 

 

3. html 및 style을 위와 같이 작성 합니다. 기본 포맷 입니다.

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/pageScroll2.js"></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>

 

 

4. 페이지가 로딩 되었을때 바로 동작할수 있도록 작성해 줍니다. 버튼이 되는 이미지를 클릭하면 #container 내의 li가 움직이며 페럴렉스 동작을 합니다.

 

 

 

 

 

[옵션 설명]

 

$('#thumnail_list ul').pageScroll2({
        
container:'#container',
        speed:2000,
        compleate:function(data){
            alert(data);
        }
});

 

1. #thumnail_list ul 내에 버튼을 클릭하였을때 동작 시킬 대상을 설정하는 옵션 입니다.

 

 

 

$('#thumnail_list ul').pageScroll2({
        container:'#container',
        
speed:2000,
        compleate:function(data){
            alert(data);
        }
});

 

2. 페럴렉스 동작의 시간을 설정 합니다. (움직이는데 걸리는 시간)

 

 

 

$('#thumnail_list ul').pageScroll2({
        container:'#container',
        speed:2000,
        
compleate:function(data){
            alert(data);
        }

});

 

3. 정상적으로 페럴렉스 동작이 될때 원하는 스크립트를 넣어 수행 시킬수 있습니다. data는 현재 클릭한 버튼이 몇번째 버튼인지의 결과를 리턴해 줍니다.

 

* 플러그인 설치는 지원하지는 않습니다.
위로

잠시만 기다려주세요.