jQuery 레이어 팝업, jquery 이미지 배너 슬라이드,div 이동 및 애니메이션 효과

1. jQuery 레이어 팝업 라이브러리
2. jquery 이미지 배너 슬라이드 소개
3. jquery div 이동 및 애니메이션 효과

 

jQuery 레이어 팝업 라이브러리

 

http://dinbror.dk/bpopup/

 

1. 라이브러리 include

<script src='http://code.jquery.com/jquery-1.8.3.js'></script>

<script type='text/javascript' src='jquery.bpopup.min.js'></script>

 

2. 팝업이 뜰 div 지정

<div id='pop_up_banner' style='display:none; width:1024px'>
  <span class='button b-close' style='border-radius:7px 7px 7px 7px;box-shadow:none;font:bold 131% sans-serif;padding:0 6px 2px;position:absolute;right:28px;top:1px; background-color:#2b91af; color:#fff; cursor: pointer; display: inline-block; text-align: center;'><span>X</span></span> <!-- 닫기 버튼 (스타일은 알아서 지정) -->
  <div class='content_js_popup'></div> <!-- 컨텐츠가 들어갈 영역 지정 (이미지, html 등.. 여러가지를 동적으로 부를수 있다. -->
 </div>

 

3. 호출하기

// 팝업 JS 코드 시작 2014-06-23

$(function() {
 var xx;
 xx = Math.round($("#main-new_pg-container").offset().left-301);

 if (xx < 0)
  xx = 0;

 $('#pop_up_banner').bPopup({
  //content:'image', //'ajax', 'iframe' or 'image'  이미지인 경우 사용
  follow: [false, false], //x, y
  position: [xx, 197], //x, y
  contentContainer:'.content_js_popup',
  loadUrl:'summer_20140623.htm'  // DIV_summer_20140623.png 이미지인 경우 주소 대신에 입력
 });
});

// 위 소스는 팝업 위치를 원하는 div 를 기준을 계산한 값
// 원 소스의 경우 한 가운데에 표시

$(window).resize(function() {
 var xx;
 xx = Math.round($("#main-new_pg-container").offset().left-301);

 if (xx < 0)
  xx = 0;

 $('#pop_up_banner').offset({top:197,left:xx});
});
// 팝업 JS 코드 끝

참고 : http://fsteam.tistory.com/72

jQuery 레이어 팝업 라이브러리

 

jquery.bpopup.min.js

0.00MB

 

 

jquery 이미지 배너 슬라이드 소개

 

홈페이지에 배너 이미지 슬라이드 기능을 사용하기 위해 jquery 소스를 검색했다.

그중에서 마음에 드는 것이 있어 소개합니다.

 

활용했던 부분은 carousel-slider 인데 너무 편리하고 마음에 드네요.

제작사 사이트 : http://www.jssor.com/

Responsive Touch Slider/Gallery/Carousel/Banner/Slideshow html

 

 

jquery div 이동 및 에니메이션 효과

 

모바일 환경에서 사용하기 위한 div 레이이 이동 및 에니메이션 효과 구현 jquery 소스입니다.

소스가 최적화가 되어 있지 않고 급하게 홈피에서 사용하려고 했기 때문에 지저분합니다.

이점 이해해주세요 ㅠㅠ

 

t4.htm

0.01MB