Rumah > hujung hadapan web > tutorial js > Putaran 360 darjah imej produk berdasarkan jQuery Circlr plug-in_jquery

Putaran 360 darjah imej produk berdasarkan jQuery Circlr plug-in_jquery

WBOY
Lepaskan: 2016-05-16 15:38:38
asal
1712 orang telah melayarinya

Circlr ialah pemalam jQuery yang boleh memutar dan memaparkan imej produk 360 darjah. Circlr menggunakan gambar produk yang diambil secara tetap pada sudut tertentu untuk mencipta kesan memutarkan bingkai gambar demi bingkai menggunakan seret tetikus, roda tetikus dan sentuhan mudah alih. Berbanding dengan Rollerblade sebelumnya, animasinya lebih lancar dan lebih mudah dikawal. Pemalam ini sangat sesuai untuk paparan produk.

Ciri-cirinya ialah:

Menyokong putaran mendatar atau menegak.

Sokong acara sentuhan mudah alih.

Sokong acara tatal.

Pemprosesan pramuat imej.

Anda boleh memutar gambar secara terbalik dan gelung.

contoh tutorial jQ yang hebat: imej produk jQuery 360 ​​darjah putaran Circlr

Memperkenalkan fail teras

<script src='js/jquery.js'></script>  
<script src='js/circlr.js'></script>
Salin selepas log masuk

Untuk mencipta HTML, anda hanya perlu mencipta bekas DIV untuk meletakkan imej Sudah tentu, anda juga boleh menambah DIV yang dimuatkan untuk meningkatkan pengalaman.

<div id="circlr">
 <img data-src="picture/00.jpg">
 <img data-src="picture/01.jpg">
 <img data-src="picture/02.jpg">
 <img data-src="picture/03.jpg">
 <img data-src="picture/04.jpg">
 <img data-src="picture/05.jpg">
 <img data-src="picture/06.jpg">
 <img data-src="picture/07.jpg">
 <img data-src="picture/08.jpg">
 <img data-src="picture/09.jpg">
 <img data-src="picture/10.jpg">
 <img data-src="picture/11.jpg">
 <img data-src="picture/12.jpg">
 <img data-src="picture/13.jpg">
 <img data-src="picture/14.jpg">
 <img data-src="picture/15.jpg">
 <div id="loader"></div>
</div>
Salin selepas log masuk

Tulis JS dan mulakan pemalam

var crl = circlr(element, options); //调用方法
//element:放置图片的容器元素的ID。
//options:参数对象。 
//实例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });
Salin selepas log masuk

Parameter

tetikus: Sama ada hendak memutar imej melalui tetikus, nilai lalai adalah benar.

Tatal: Sama ada hendak memutar imej melalui tatal, nilai lalai adalah palsu.

menegak: Sama ada hendak memutar imej apabila menggerakkan tetikus ke arah menegak, nilai lalai adalah palsu.

terbalik: Sama ada hendak menterbalikkan arah, nilai lalai adalah palsu.

kitaran: Sama ada hendak mengitar imej, nilai lalai adalah benar.

mula: Mulakan bingkai animasi, nilai lalai ialah 0.

kelajuan: Kelajuan bingkai animasi ditukar melalui circlr.turn(i) Nilai lalai ialah 50 milisaat.

automain: Sama ada hendak melakukan putaran 360 darjah dan main balik imej secara automatik Nilai lalai adalah palsu.

playSpeed: Kelajuan main balik jujukan animasi, nilai lalai ialah 100 milisaat.

pemuat: ID elemen DOM yang dipramuat.

sedia: fungsi panggil balik selepas imej dimuatkan.

perubahan: Fungsi panggil balik selepas bingkai animasi disesuaikan (mengambil bingkai semasa dan jumlah bilangan bingkai sebagai parameter).

Kaedah

crl.el: Mengembalikan nod elemen DOM objek.

crl.length: Mengembalikan jumlah bilangan bingkai animasi objek.

crl.turn(i): Animasi berputar ke bingkai ke-i.

crl.go(i): Animasi melompat ke bingkai ke-i.

crl.play(): Mula memainkan urutan animasi.

crl.stop(): Hentikan main balik animasi.

crl.hide(): Sembunyikan nod elemen DOM objek.

crl.show(): Paparkan nod elemen DOM objek.

crl.set(options): Tukar parameter objek selepas pemalam dimulakan:

menegak

terbalik

kitaran

kelajuan

playSpeed

Kandungan di atas diperkenalkan dalam artikel ini untuk melaksanakan putaran 360 darjah imej produk berdasarkan pemalam jQuery Circlr saya harap anda menyukainya.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan