skyBnner.js

스카이배너 구현을 좀 더 쉽게 가능하게 해주는 플러그인

샘플영상

다운로드

skyBnner.js V1.0 다운로드

설치/사용법

<style>
      body{padding:0; margin:0}
    #body{width:900px; height:1900px; background:#bbb; margin:0 auto;}
    #skybanner{width:80px; height:290px; background:#555}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="skybanner.js"></script>

<script>
    $(function(){
        $('#skybanner').skyBanner({
            body:'#body',
            local:'right',
            margintop:100
        });
    });
</script>

<div id="body">
    내용
</div>


<div id="skybanner">

 

1. 제이쿼리 설치가 필요 합니다.

 

 

 

 

<style>
      body{padding:0; margin:0}
    #body{width:900px; height:1900px; background:#bbb; margin:0 auto;}
    #skybanner{width:80px; height:290px; background:#555}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="skybanner.js"></script>

<script>
    $(function(){
        $('#skybanner').skyBanner({
            body:'#body',
            local:'right',
            margintop:100
        });
    });
</script>

<div id="body">
    내용
</div>


<div id="skybanner">

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<style>
      body{padding:0; margin:0}
    #body{width:900px; height:1900px; background:#bbb; margin:0 auto;}
    #skybanner{width:80px; height:290px; background:#555}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="skybanner.js"></script>

<script>
    $(function(){
        $('#skybanner').skyBanner({
            body:'#body',
            local:'right',
            margintop:100
        });
    });
</script>

<div id="body">
    내용
</div>


<div id="skybanner">

 

3. 기본 레이아웃을 작성 합니다.

 

 

 

 

<style>
      body{padding:0; margin:0}
    #body{width:900px; height:1900px; background:#bbb; margin:0 auto;}
    #skybanner{width:80px; height:290px; background:#555}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="skybanner.js"></script>

<script>
    $(function(){
        $('#skybanner').skyBanner({
            body:'#body',
            local:'right',
            margintop:100
        });

    });
</script>

<div id="body">
    내용
</div>


<div id="skybanner">

 

4. 자동으로 실행될 수 있도록 함수를 작성 합니다.

 

 

 

 

$('#skybanner').skyBanner({
            body:'#body',    // 내용이 될 영역의 아이디 또는 클래스
            local:'right',    // 스카이 배너 위치 (왼쪽 : left, 오른쪽 : right)
            margintop:100    // 화면 상단으로 부터 배너 시작 위치
});

 

5. 옵션을 설정 합니다.

 

 

 

 

플러그인 설치/보수는 무료로 지원 하지 않습니다.
위로

잠시만 기다려주세요.