jQuery 백그라운드 플러그인 backstretch 사용 가이드_jquery

1. 백스트레치 플러그인 기능

웹사이트 외관을 최적화하세요. 주로 페이지의 배경 이미지를 설정하는데 사용되며, html 요소의 배경 이미지도 설정할 수 있습니다. 여러 개의 배경 이미지를 일정 간격 내에서 주기적으로 설정하고 표시할 수 있습니다.

참고

그러나 배경 이미지를 설정할 때 이미지가 너무 크고 웹사이트에서 사용하는 리소스가 제한되어 있는 경우 이미지 크기를 압축해야 합니다. 그렇지 않으면 이미지 로딩이 매우 느려집니다. 공식 홈페이지 데모를 테스트해 보니 사진이 비교적 크고, 일부 사진은 가상 공간에서 홈페이지를 열면 사진 로딩이 좀 느립니다.

플러그인 데모의 스크린샷 효과는 명확하지 않으므로 이 글에는 게시하지 않겠습니다. 공식 데모로 이동하여 확인하실 수도 있고, 이 글 아래에 제가 테스트한 사용 사례도 있습니다. 이 플러그인을 보면 중국어 데모를 볼 수 있습니다.

테스트 케이스에 사용된 사진은 인터넷에서 가져온 것이며, 크기가 100kb 이상입니다. 공식 사진을 사용하세요. 단순한 테스트 플러그인이므로 이미지가 압축되지 않습니다.

2.backstretch 공식 주소

공식 주소에서 플러그인 사용에 대한 자세한 지침이 있습니다: https://github.com/srobbin/jquery-backstretch

3. 백스트레치 사용법

1. 참고자료


2. 테스트에 사용된 스타일

body { font-family: 微软雅黑; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
.container {
   width: 90%;
   margin: 20px auto;
   background-color: #FFF;
   padding: 20px;
 }
h1{
  font-weight:normal;
}
pre, code {
 font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
 font-size: 12px;
 color: #333;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
.other { height: 300px; color: #FFF; }
.other div {
 position: absolute;
 bottom: 0;
 width: 100%;
 background: #000;
 background: rgba(0,0,0,0.7);
}
.other div p { padding: 10px; }

3.js를 사용했습니다. 플러그인은 사용이 매우 간단합니다.

$(function(){
  $(".container").css({ opacity: .8 });  //设置透明度
  $.backstretch(["bg.jpg"]); //背景
  $(".other").backstretch(["b.jpg","a.jpg","coffee.jpg"],{duration:4000}); //元素背景，切换现实
});

실제로 웹페이지의 배경을 맞춤설정하는 방법은 여러 가지가 있습니다. jQuery의 힘으로 jQuery로 구현된 이미지 전환 효과의 몇 가지 예를 사용하여 동적 이미지 전환을 수정하고 구현할 수도 있습니다. 다들 좋아해요!

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.