그냥 개발자 블로그

커지는 배너 구현 제이쿼리(jquery) 플러그인 본문

소식/플러그인소식

커지는 배너 구현 제이쿼리(jquery) 플러그인

마음이파파 2015. 9. 22. 09:58

오늘은 일단 동영상부터 보실까요? ㅎㅎ





아! 위 영상은 네이버가 아니에요. 네이버와 같이 비슷한 환경을 만든거에요 ㅋㅋ


동영상에서와 같이 각종 포털 사이트에서 작은배너를 큰배너로 확장시켜주는 영역들이 존재하는데요.


수요가 늘고 있어서 간단하게 제이쿼리(jquery) 플러그인으로 만들어봤어요.


플러그인은 홈페이지에서 다운받아 이용해보실수 있게 해놨어요.


이름은 bigbanner.js 라고 찾으시면 나올거에요 ㅎㅎ


그렇다면 이제 사용법에 대해서 한번 볼게요.





<style>

#bigbanner1{width:300px; height:150px; position:relative; overflow:hidden;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="bigbanner.js"></script>


<script>

$(function(){

$('#bigbanner1').bigbanner({

btn:{path:'btnbig.png'}

});

});

</script>


<body>

<div id="bigbanner1">

<a href="#"><img src="small.jpg"></a>

<img src="" class="btnbig">

<div class="areabig">

<a href="#">

<img src="big.jpg">

</a>

</div>

</div>

</body> 


먼저 위과 같이 html을 작성해주셔야 하는데요.


id는 어떤것이든 원하는것로 해주시고요.


첫번째 a태그 안에는 작은배너 이미지를 넣어주시고요.


areabig 클래스 안에는 큰 배너이미지 또는 별도로 html 내용을 넣어주세요.






 

<style>

#bigbanner1{width:300px; height:150px; position:relative; overflow:hidden;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="bigbanner.js"></script>


<script>

$(function(){

$('#bigbanner1').bigbanner({

btn:{path:'btnbig.png'}

});

});

</script>


<body>

<div id="bigbanner1">

<a href="#"><img src="small.jpg"></a>

<img src="" class="btnbig">

<div class="areabig">

<a href="#">

<img src="big.jpg">

</a>

</div>

</div>

</body> 



CSS는 작은배너 사이즈에 맞춰서 width, height 을 넣어주시고요.

 


position과 overflow는 필수이고 불변이에요.


 




<style>

#bigbanner1{width:300px; height:150px; position:relative; overflow:hidden;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="bigbanner.js"></script>


<script>

$(function(){

$('#bigbanner1').bigbanner({

btn:{path:'btnbig.png'}

});

});

</script>


<body>

<div id="bigbanner1">

<a href="#"><img src="small.jpg"></a>

<img src="" class="btnbig">

<div class="areabig">

<a href="#">

<img src="big.jpg">

</a>

</div>

</div>

</body> 

그렇다면 이제 bigbanner.js 제이쿼리(jquery) 플러그인을 가져와 연결해야겠죠?

 



 



<style>

#bigbanner1{width:300px; height:150px; position:relative; overflow:hidden;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="bigbanner.js"></script>


<script>

$(function(){

$('#bigbanner1').bigbanner({

btn:{path:'btnbig.png'}

});

});

</script>


<body>

<div id="bigbanner1">

<a href="#"><img src="small.jpg"></a>

<img src="" class="btnbig">

<div class="areabig">

<a href="#">

<img src="big.jpg">

</a>

</div>

</div>

</body> 

다음과 같이 docuemnt가 로딩이 완료되었을때 실행되게 해주면 끝이에요.

 


path에 btnbig.png는 버튼 이미지를 경로를 넣어주시면 되고요.


그럼 끝!


나머지  html과 css 그외에 동작 쿼리는 bigbanner.js 플러그인이 알아서 해줄꺼에요.


테스트는 ie11,크롬,파폭에서 해봤는데 정상적이었구요.


추후에 여러버전으로 내놓으려고 생각중이에요.





저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

이미지 벽돌 처럼 쌓는 제이쿼리(jquery) 플러그인  (0) 2015.09.23
토스트 팝업 간단히 표현하는 제이쿼리(jquery) 플러그인  (0) 2015.09.22
쇼핑몰 상단배너 만드는 간단한 제이쿼리(jquery) 플러그인  (0) 2015.09.22
간단한 제이쿼리(jquery) 슬라이드 플러그인 공유  (19) 2015.09.21
모바일웹에서 싸인을 받을수 있을까? 제이쿼리(jquery)  (1) 2015.09.21
'소식/플러그인소식' Related Articles more