<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').dropdownbanner({
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').dropdownbanner({
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').dropdownbanner({
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').dropdownbanner({
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').dropdownbanner({
todayClose:'.todayclose', //오늘은 더 이상 보지 않기 버튼을 설정 합니다.
close:'.close', //닫기 버튼을 설정 합니다.
speed:300 //상단배너 열릴때 속도를 설정 합니다.
});
5. 옵션을 적절하게 설정 합니다.