jQuery latar belakang pemalam regangan belakang panduan_jquery

1. Fungsi pemalam regangan belakang

Optimumkan penampilan tapak web. Ia digunakan terutamanya untuk menetapkan imej latar belakang halaman, dan juga boleh menetapkan imej latar belakang elemen html. Imej latar belakang berbilang boleh ditetapkan dan dipaparkan dalam kitaran dalam selang waktu.

Nota

Tetapi apabila menetapkan imej latar belakang, jika imej terlalu besar dan sumber yang digunakan oleh tapak web adalah terhad, saiz imej harus dimampatkan. Jika tidak, pemuatan imej akan menjadi sangat perlahan. Saya menguji demo laman web rasmi Gambarnya agak besar, dan beberapa gambar melebihi 400kb Apabila laman web dibuka di ruang maya, pemuatan gambar agak perlahan.

Kesan tangkapan skrin demo pemalam tidak jelas, jadi saya tidak akan menyiarkannya dalam artikel ini Anda boleh pergi ke demo rasmi untuk melihatnya, atau di bawah artikel ini, terdapat juga kes penggunaan yang saya uji pemalam ini Anda boleh melihat demo bahasa Cina.

Gambar yang digunakan dalam kes ujian datang dari Internet, dan saiznya melebihi 100kb Gunakan gambar rasmi. Memandangkan ia hanyalah pemalam ujian, imej tidak dimampatkan.

2.alamat rasmi regangan belakang

Terdapat arahan terperinci untuk menggunakan pemalam di alamat rasmi: https://github.com/srobbin/jquery-backstretch

3. Cara menggunakan regangan belakang

1. Fail rujukan
52e62332c39d4ec6db9dd445d9b9aea82cacc6d41bbb37262a98f745aa00fbf0
9c2bf07c01e954ef586369d1fe9461502cacc6d41bbb37262a98f745aa00fbf0
2. Gaya yang digunakan untuk menguji

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 digunakan. Plugin ini sangat mudah digunakan.

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

Malah, terdapat banyak cara untuk menyesuaikan latar belakang halaman web Dengan kuasa jQuery, kami juga boleh menggunakan beberapa contoh kesan penukaran imej yang dilaksanakan oleh jQuery untuk mengubah suai dan melaksanakan penukaran imej dinamik anda semua sukakannya!

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.