Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
Tags
- 3D프린터
- JQuery
- 사이트제작
- 쇼핑몰
- 홈페이지제작
- 포트폴리오
- 홈페이지구축
- 프로그래머
- 웹디자이너
- jQuery Plugin
- PHP
- 웹에이전시
- 웹퍼블리싱
- CSS
- 워크식스
- 플러그인
- 홈페이지
- 쇼핑몰제작
- 웹퍼블리셔
- 튜닝
- 제이쿼리
- 개발자
- 안드로이드
- 웹디자인
- 커스터마이징
- 쇼핑몰구축
- 고도몰
- work6.kr
- 웹개발자
- plugin
Archives
- Today
- Total
그냥 개발자 블로그
dropdownbanner.js - 쇼핑몰 상단배너 플러그인 본문
사이트 최상단에 위치하여 본문을 아래로 밀어내는 기능을 가지고 있으면 오늘은 그만 보기 기능도 가지고 있는 플러그인
<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 |