반응형
최근에 포함하는 div의 배경색을 변경하는 데 유용한 리소스를 찾았습니다. 이것은 이미지에서 가장 지배적 인 색상을 검색하고 요소 배경을 포함하는 색상을이 색상으로 변경하는 jQuery 플러그인입니다. 단 몇 줄의 Javascript로 멋진 쇼케이스 페이지를 만들 수 있습니다. 이 플러그인을 jQuery Adaptive Background Plugin이라고합니다.
이 jQuery 플러그인을 사용하려면 다음과 같이 div를 감싸는 많은 이미지가 있는 페이지가 있어야합니다.
<div class="page-slide">
<img src="./images/water.jpg" alt="Water" data-adaptive-background='1'/>
</div>
<div class="page-slide">
<img src="./images/water2.jpg" alt="Water 2" data-adaptive-background='1'/>
</div>
<div class="page-slide">
<img src="./images/water3.jpg" alt="Water 3" data-adaptive-background='1'/>
</div>
<div class="page-slide">
<img src="./images/water4.jpg" alt="Water 4" data-adaptive-background='1'/>
</div>
<div class="page-slide">
<img src="./images/water5.jpg" alt="Water 5" data-adaptive-background='1'/>
</div>
플러그인이 실행되면 data-adaptive-background 속성을 가진 이미지를 검색하고 이 이미지에서 지배적인 색상을 찾습니다. 다음을 사용하도록 Javascript를 설정하려면 먼저 Github 프로젝트 페이지에서 플러그인을 다운로드해야합니다. 적응형 배경 플러그인인은 JQuery 플러그인이므로 사용하기 전에 페이지에로드되는 jQuery에 의존합니다.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="./js/jquery.adaptive-backgrounds.js"></script>
</head>
적응형 배경 플러그인이 페이지에 로드된 상태에서 adaptiveBackground 메소드를 실행하여 플러그인을 시작하면됩니다.
<script>
$(document).ready(function(){
$.adaptiveBackground.run()
});
</script>
반응형
'SW > JavaScript' 카테고리의 다른 글
| jQuery, Java Script : Form에 삭제 확인 모달 추가 : 예제, 구현 (0) | 2020.06.08 |
|---|---|
| Java Script, jQuery : 스크립트 동적 로드 : 방법, 예제, 구현 (0) | 2020.06.07 |
| Java Script, jQuery : 클립보드 복사 : 예제, 구현, 방법 (0) | 2020.05.30 |
| Java Script, jQuery : element 크기 변경 : 방법, 예제, 구현 (0) | 2020.05.29 |
| Java Script, jQuery : 암호 강도 표시 기능 : 예제, 구현, 방법 (0) | 2020.05.28 |