그냥 개발자 블로그

dropdownbanner.js - 쇼핑몰 상단배너 플러그인 본문

소식/플러그인소식

dropdownbanner.js - 쇼핑몰 상단배너 플러그인

마음이파파 2016. 8. 2. 23:53








사이트 최상단에 위치하여 본문을 아래로 밀어내는 기능을 가지고 있으면 오늘은 그만 보기 기능도 가지고 있는 플러그인

<style>
    #banner1{height:100px;}
</style>

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

<script>
    $(function(){
        $('#banner1').dropdwonbanner({
            todayClose:'.todayclose',
            close:'.close',
            speed:300
        });
    });
</script>

<body>
    <div id="banner1">
        <div class='bannerimg' style="overflow:hidden; height:79px; position:relative;">
            <a href="#">
                <img src="" style="position:absolute;">
            </a>
        </div>
        <div>
            오늘은 더이상 보지 않기
            <input class="todayclose" type='checkbox' value="todayclose">
            <button type="button" class="close">닫기</button>
        </div>
    </div>
</body> 

 

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

 

 

 

 

<style>
    #banner1{height:100px;}
</style>

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

<script>
    $(function(){
        $('#banner1').dropdwonbanner({
            todayClose:'.todayclose',
            close:'.close',
            speed:300
        });
    });
</script>

<body>
    <div id="banner1">
        <div class='bannerimg' style="overflow:hidden; height:79px; position:relative;">
            <a href="#">
                <img src="" style="position:absolute;">
            </a>
        </div>
        <div>
            오늘은 더이상 보지 않기
            <input class="todayclose" type='checkbox' value="todayclose">
            <button type="button" class="close">닫기</button>
        </div>
    </div>
</body> 

 

2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. )


 

 

 

 

<style>
    #banner1{height:100px;}
</style>

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

<script>
    $(function(){
        $('#banner1').dropdwonbanner({
            todayClose:'.todayclose',
            close:'.close',
            speed:300
        });
    });
</script>

<body>
    <div id="banner1">
        <div class='bannerimg' style="overflow:hidden; height:79px; position:relative;">
            <a href="#">
                <img src="" style="position:absolute;">
            </a>
        </div>
        <div>
            오늘은 더이상 보지 않기
            <input class="todayclose" type='checkbox' value="todayclose">
            <button type="button" class="close">닫기</button>
        </div>
    </div>
</body> 

 

3. 상단 배너 기본구조의 html 태그를 위와 같이 작성 합니다.

 

 

 

 

<style>
    #banner1{height:100px;}
</style>

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

<script>
    $(function(){
        $('#banner1').dropdwonbanner({
            todayClose:'.todayclose',
            close:'.close',
            speed:300
        });
    });
</script>

<body>
    <div id="banner1">
        <div class='bannerimg' style="overflow:hidden; height:79px; position:relative;">
            <a href="#">
                <img src="" style="position:absolute;">
            </a>
        </div>
        <div>
            오늘은 더이상 보지 않기
            <input class="todayclose" type='checkbox' value="todayclose">
            <button type="button" class="close">닫기</button>
        </div>
    </div>
</body> 

 

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

 

 

 

 

$('#banner1').dropdwonbanner({
            todayClose:'.todayclose', //오늘은 더 이상 보지 않기 버튼을 설정 합니다.
            close:'.close', //닫기 버튼을 설정 합니다.
            speed:300 //상단배너 열릴때 속도를 설정 합니다.
});

 

5. 옵션을 적절하게 설정 합니다.

 

 

 

6. 소스는 여기서 다운로드 받을수 있습니다.




[문의하기]


copyright ⓒ 2017. 워크식스


저작자표시 비영리 변경금지 (새창열림)

'소식 > 플러그인소식' 카테고리의 다른 글

book.js 플러그인 - 책 넘기는 효과  (0) 2016.08.03
pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인  (0) 2016.08.02
slidebanner.js 플러그인 - 슬라이드 배너 플러그인  (3) 2016.08.02
thinScrollbar.js 플러그인 - 스크롤바 스타일 바꾸기  (0) 2016.06.07
designSelect.js 플러그인 - select box 스타일 적용 (크로스브라우징 가능)  (0) 2016.05.16
'소식/플러그인소식' Related Articles more