Pemalam jQuery bgStretcher.js melaksanakan effect_jquery latar belakang skrin penuh

bgStretcher 2011 (Background Stretcher) ialah pemalam jQuery yang boleh menambah berbilang imej latar belakang pada halaman web anda, dan berbilang imej latar belakang boleh ditukar secara automatik Pada masa yang sama, saiz imej latar belakang boleh disesuaikan dengan saiz tetingkap penyemak imbas. Kesan penukaran imej latar belakang termasuk fade in dan fade out, menatal dan tayangan slaid Apabila menatal dan tayangan slaid dipilih, anda boleh memilih arah, atas, bawah, kiri atau kanan, atau kiri atas, kanan bawah, kanan atas. , kiri bawah. Urutan penukaran gambar juga boleh ditetapkan ke hadapan, belakang atau rawak. Lebih banyak pilihan terpulang kepada anda untuk menyelidik secara perlahan.

bgStretcher ialah pemalam jQuery yang membolehkan anda menambah imej besar (atau sekumpulan imej) pada latar belakang halaman web anda dan akan mengubah saiz imej secara berkadar untuk mengisi keseluruhan kawasan tetingkap. Pemalam ini akan bertindak sebagai tayangan slaid jika menggunakan berbilang mod imej (kelajuan dan tempoh tayangan slaid boleh dikonfigurasikan).

Ciri pemalam:

Fail skrip ringkas dan mudah disediakan; menyokong semua pelayar baharu;

Penggunaan pemalam:

Pertama sekali, sudah tentu anda perlu memuat turun pemalam terlebih dahulu Pakej pemalam sudah mengandungi fail JS yang diperlukan.

Kemudian, masukkan kod berikut antara 93f0f5c25f18dab9d176bd4f6de5d30e dan 9c3bca370b5104690d9ef395f2c5f8d1 supaya pemalam itu boleh digunakan kemudian laluan relatif atau laluan mutlak, ia bergantung pada keperluan sebenar anda.

<link rel="stylesheet" type="text/css" href="./main.css" />
<link rel="stylesheet" type="text/css" href="../bgstretcher.css" />
<script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>

Kemudian masukkan kod berikut selepas kod di atas untuk memulakan pemalam bgStretcher Anda perlu memberitahu elemen pemalam yang berfungsi dan mengkonfigurasi pilihan pemalam. Begitu juga, berhati-hati untuk tidak membuat kesilapan dengan laluan imej dalam kod.

<script type="text/javascript">
 $(document).ready(function(){
 
  // Initialize Backgound Stretcher 
 $('.demoo').bgStretcher({
 images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
 imageWidth: 800, 
 imageHeight: 400, 
 slideDirection: 'N',
 slideShowSpeed: 1000,
 transitionEffect: 'fade',
 sequenceMode: 'normal',
 });
 
 });
</script>

Pemalam ini bukan sahaja digunakan untuk latar belakang keseluruhan halaman web, tetapi juga boleh digunakan untuk elemen halaman web tertentu, sekurang-kurangnya elemen ini boleh menetapkan latar belakang, seperti DIV dan sebagainya . Elemen halaman web dipilih melalui ID atau Kelas Nama elemen BODY harus menjadi satu-satunya nama elemen dalam halaman web, yang bermaksud menetapkan latar belakang untuk keseluruhan halaman web. Jika anda menetapkan latar belakang untuk blok DIV tertentu pada halaman, anda perlu menentukan ID untuk DIV atau mengetahui nama kelas gaya ID dan nama kelasnya mestilah unik, jika tidak, kesannya akan menjadi menakjubkan.

Pilihan pemalam:

Pilihan Konfigurasi	Nilai lalai	Penerangan Pilihan
bekas imej	bgstretcher	bgStretcher akan membina struktur secara automatik untuk senarai imej dalam pepohon DOM Parameter ini ialah ID untuk pemegang imej Cuba periksa pepohon dengan FireBug. to get an idea how it's constructed.
resizeProportionally	true	Indicates if background image(s) will be resized proportionally or not.
resizeAnimate	false	Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images	empty	An array containing list of images to be displayed on page's background.
imageWidth	1024	Original image's width.
imageHeight	768	Original image's height.
maxWidth	auto	Maximum image's width.
maxHeight	auto	Maximum image's height.
nextSlideDelay	3000 (3 seconds)	Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed	normal	Numeric value in milliseconds or jQuery string value (‘fast', ‘normal', ‘slow'). The parameter sets the speed of transition between images.
slideShow	true	Allows or disallows slideshow functionality.
transitionEffect	fade	Transition effect (use also: none, simpleSlide, superSlide).
slideDirection	N	Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode	normal	Sequence mode (use also: back, random)
buttonPrev	empty	Previous button CSS selector
buttonNext	empty	Next button CSS selector
pagination	empty	CSS selector for pagination
anchoring	‘left top'	Anchoring bgStrtcher area regarding window
anchoringImg	‘kiri atas'	Melabuhkan imej berkenaan tetingkap
pramuatImg	palsu	Untuk imej Pramuat gunakan benar
stratElementIndex	0	Indeks elemen mula
fungsi panggil balik	null	Nama fungsi panggil balik

Plug-in-Methode:

Methodenname Methodenbeschreibung
$(objID).bgStretcher.play()                                                                                         $(objID).bgStretcher.pause()                                                                                                         $(objID).bgStretcher.sliderDestroy() Hintergrund-Diashow zerstören

Browserkompatibilität:

MS Internet Explorer 6, 7, 8, 9

Mozilla Firefox 2, 3, 4

Opera 9
Apple Safari
Google Chrome

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.