1. 플러그인 개요
화면 특정 위치에 배너를 고정하고 스크롤시 배너가 스르륵 사라졌다가 스크롤이 끝나면 다시 스르륵 나타나도록 하는 jQuery 플러그인입니다.
2. 메커니즘
jQuery에 있는 scroll 내장함수와 JavaScript의 Interval 기능을 조합하였습니다.
3. 사용법
배너를 감싸고 있는 division에 floatBanner 메소드를 걸어줍니다.
wrapperId : division 이름
animateTime : 배너가 완전히 사라지는데까지 혹은 나타나는데까지 걸리는 시간
intervalTime : 스크롤이 멈추고 배너가 나타는대까지 시간
bottom : 배너의 위치
width : 배너의 크기
$("#pop").floatBanner({
"wrapperId" : "pop",
"animateTime" : "500",
"intervalTime" : "500",
"bottom" : "10px",
"width" : "100%"
});
4. 플러그인 제공
jquery.floatBanner.js
5. HTML 소스
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" name="viewport">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="/js/jquery.floatBanner.js"></script>
<script>
$(document).ready(function(){
$("#pop").floatBanner({
"wrapperId" : "pop",
"animateTime" : "500",
"intervalTime" : "500",
"bottom" : "10px",
"width" : "100%"
});
});
</script>
</head>
<body>
<div class="cContents">
<ul class="cWrapper">
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img1.jpg" /></li>
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img2.jpg" /></li>
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img3.jpg" /></li>
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img4.jpg" /></li>
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img5.jpg" /></li>
</ul>
</div>
<ul class="dotWrap cdot">
<li class="dotList active"></li>
<li class="dotList"></li>
<li class="dotList"></li>
<li class="dotList"></li>
<li class="dotList"></li>
</ul>
<div>
<input type="button" value="left" class="cLeft" />
<input type="button" value="right" class="cRight" />
</div>
<div id="pop" style="text-align:center;background-color: yellow;">
<img src="/img/img1.jpg" />
</div>
</body>
</html>
'Programing > HTML' 카테고리의 다른 글
| [CSS3] Notes on browser support (0) | 2014.02.26 |
|---|---|
| [CSS3] CSS Animation (0) | 2014.02.26 |
| [CSS3] CSS 3D Transforms (0) | 2014.02.26 |
| [CSS3] CSS 2D Transforms (0) | 2014.02.26 |
| [CSS3] CSS Transitions (0) | 2014.02.26 |
| [JS] jQuery를 이용한 스크롤배너 플러그인 (0) | 2013.07.22 |
| [JS] HTML5 WebStorage (0) | 2013.06.28 |
| [JS] IOS Safari에서 화면회전시 가로 스크롤이 생기는 버그 해결방법 (0) | 2013.06.26 |
| [JS] 브라우저에서 마우스 우클릭을 사용하지 못하도록 하기 (0) | 2013.06.26 |
| [JS] input타입이 파일인 항목을 ajaxForm으로 전달하기 (0) | 2013.06.26 |
