스크롤시 사라지는 jQuery 배너 플러그인
작성일 14-05-16 10:39
페이지 정보
작성자서방님 조회 288회 댓글 0건본문
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. 플러그인 제공
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>
첨부파일
- jquery.floatBanner.js (1.5K) 2회 다운로드 | DATE : 2014-05-16 10:39:39
댓글목록
등록된 댓글이 없습니다.