skyBnner.js
샘플영상
다운로드
skyBnner.js V1.0 다운로드설치/사용법
<style>
body{padding:0; margin:0}
#body{width:900px; height:1900px; background:#bbb; margin:0 auto;}
#skybanner{width:80px; height:290px; background:#555}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="skybanner.js"></script>
<script>
$(function(){
$('#skybanner').skyBanner({
body:'#body',
local:'right',
margintop:100
});
});
</script>
<div id="body">
내용
</div>
<div id="skybanner">
1. 제이쿼리 설치가 필요 합니다.
<style>
body{padding:0; margin:0}
#body{width:900px; height:1900px; background:#bbb; margin:0 auto;}
#skybanner{width:80px; height:290px; background:#555}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="skybanner.js"></script>
<script>
$(function(){
$('#skybanner').skyBanner({
body:'#body',
local:'right',
margintop:100
});
});
</script>
<div id="body">
내용
</div>
<div id="skybanner">
2. 다운로드 받은 플러그인을 설치 합니다.
<style>
body{padding:0; margin:0}
#body{width:900px; height:1900px; background:#bbb; margin:0 auto;}
#skybanner{width:80px; height:290px; background:#555}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="skybanner.js"></script>
<script>
$(function(){
$('#skybanner').skyBanner({
body:'#body',
local:'right',
margintop:100
});
});
</script>
<div id="body">
내용
</div>
<div id="skybanner">
3. 기본 레이아웃을 작성 합니다.
<style>
body{padding:0; margin:0}
#body{width:900px; height:1900px; background:#bbb; margin:0 auto;}
#skybanner{width:80px; height:290px; background:#555}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="skybanner.js"></script>
<script>
$(function(){
$('#skybanner').skyBanner({
body:'#body',
local:'right',
margintop:100
});
});
</script>
<div id="body">
내용
</div>
<div id="skybanner">
4. 자동으로 실행될 수 있도록 함수를 작성 합니다.
$('#skybanner').skyBanner({
body:'#body', // 내용이 될 영역의 아이디 또는 클래스
local:'right', // 스카이 배너 위치 (왼쪽 : left, 오른쪽 : right)
margintop:100 // 화면 상단으로 부터 배너 시작 위치
});
5. 옵션을 설정 합니다.