Mari kita perkenalkan rendering dinding foto yang saya sadari sesuai dengan penjelasan video online.
Efek terakhir adalah sebagai berikut:
• Ketika sebuah gambar diklik, gambar bergerak ke area tengah dan memperbesar. Saat gambar diklik, sisi depan dan belakang dialihkan ke ditampilkan.
• Ketika gambar tertentu diklik, posisi semua gambar diatur ulang secara acak
• Ketika tombol kontrol diklik, gambar yang sesuai ditampilkan di tengah, dan tombol kontrol mengubah gaya yang sesuai. Saat tombol kontrol diklik terus menerus, gambar akan mengganti sisi depan dan belakang dengan klik tombol
Dekomposisi VCD dari seluruh efek, seperti yang ditunjukkan pada gambar di bawah ini:
Mengurai kasus dengan cara yang dapat dipahami komputer.
• Lihat Visi: HTML + CSS Template Antarmuka Dasar CSS
• Pengontrol: Pemrosesan konten JavaScript, pemrosesan acara
• Data data: data.js tidak diperlukan, membantu memahami
Data data sangat umum digunakan. Jika Anda menulis konten ke tampilan, yaitu, HTML, Anda harus memodifikasi HTML ketika Anda ingin mengubah konten, tetapi jika Anda menggunakan VCD, Anda hanya perlu memodifikasi bagian data. Pada saat yang sama, bagian data umum dihasilkan oleh latar belakang, sehingga penggantian seperti itu lebih nyaman. Poster -poster dalam kasus ini semua dihasilkan oleh templat plus data.
Bagian Lihat
Area efek didekomposisi menjadi tiga bagian berikut:
• Area poster saat ini
Pusat horizontal dan vertikal
Memungkinkan untuk ditampilkan & dibalik oleh <Control Bar Button>
• Area penyimpanan kiri dan kiri
Bagilah ke dalam area kiri dan kanan dengan <area poster saat ini>
Itu untuk menyimpan poster lain
Setiap poster diposisikan secara acak dan miring
• Area batang kontrol
Kontrol & Tampilkan poster yang sesuai
Balikkan sakelar <Poster Tampilan Saat Ini> Depan dan Belakang
Kode HTML yang diimplementasikan adalah sebagai berikut:
<body onselectStart = 'return false;'> <!-di sini untuk mencegah teks halaman dari dipilih-> <!-2. Tulis ulang tampilan sebagai string templat-> <div id = "wrap"> <!-div.photo bertanggung jawab untuk translasi dan rotasi-> <div onClick = "turn (this)" id = "photo o foto {{{{" turn (turn "{{turns) Membalikkan bagian depan dan belakang -> <dv> <p> <img src = "photo/{{img}}"> </p> <p> {{caption}} </p> </div> <p> <p> {{desc} </div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div>Di sini, {{img}}, {{caption}}, dan {{desc}} adalah string templat, dan bagian data akan sesuai tetapi diganti nanti.
Gaya bagian tampilan adalah sebagai berikut:
<style type = "text/css"> *{padding: 0; Margin: 0; } body {background-color: #ffff; Warna:#555; Font-Family: 'Avenir Next', 'Lantinghei sc'; Ukuran font: 14px; -Moz-font-smoothing: Antialiased; -webkit-font-smoothing: Antialiased;/*font smooth*/} .wrap {// area gambar berpusat secara vertikal dalam lebar tubuh: 100%; Tinggi: 900px; Posisi: Absolute; /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- margin-top: -300px; /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /*Karena setiap poster diposisikan secara acak menggunakan atas dan kiri, atur posisi ke absolute*/ position: absolute; z-index: 1; Kotak-Shadow: 0 0 1px RGBA (0,0,0, .01); /*transformasi: rotate (30deg);*/ -moz -transisi: semua .6s; /*Biarkan poster bergerak untuk menghasilkan efek animasi*/ -webkit -transisi: semua .6s; } .photo .side {width: 100%; Tinggi: 100%; latar belakang-warna: #EEE; Posisi: Absolute; TOP: 0; Kanan: 0; padding: 20px; Ukuran kotak: kotak perbatasan; } .photo .side-front .image {lebar: 100%; Tinggi: 250px; Line-Height: 250px; meluap: tersembunyi; } .photo .side-front .image img {width: 100%; } .photo .side-front .caption {text-align: center; font-size: 16px; Line-Height: 50px; } .photo .side-back .desc {color:#666; Ukuran font: 14px; Line-Height: 1.5em; } /*Gaya poster yang saat ini dipilih* /.photo_center { /*--- Menerapkan metode pemusatan vertikal satu kiri: 50%; Atas: 50%; margin-kiri: -130px; margin-top: -160px; *//*Menerapkan metode pemusatan vertikal dua*/ atas: 0; Bawah: 0; Kiri: 0; Kanan: 0; margin: otomatis; z-index: 999; // Biarkan poster yang saat ini dipilih tidak dicakup oleh poster lain}/*bertanggung jawab untuk membalik*/.photo-wrap {position: absolute; Lebar: 100%; Tinggi: 100%; -Moz-Transform-style: perserve-3d; -webkit-transform-style: preserve-3d;/*Biarkan elemen-elemen di dalam mendukung efek 3D*/ transformasi-gaya: preserve-3d;/*Karena kalimat ini, bagian belakang firefox tidak dapat ditampilkan*/ -webkit-transisi: semua 1s; -Moz-transisi: semua 1s; Transisi: Semua 1s; } .photo-wrap .side {-moz-backface-visibility: tersembunyi; // sembunyikan saat layar tidak menghadap layar-webkit-backface-visibilitas: tersembunyi; Backface-Visibilitas: Tersembunyi; } .photo-wrap .side-front {-moz-transform: rotatey (0deg); -webkit-transform: rotate (0deg); transformasi: rotate (0deg); } .photo-wrap .side-back {-moz-transform: rotatey (180deg); -webkit-transform: rotate (180deg); Transformasi: Rotatey (180deg); } .photo-front .photo-wrap {-moz-transform: rotatey (0deg); -webkit-transform: rotate (0deg); transformasi: rotate (0deg); } .photo-back .photo-wrap {-moz-transform: rotatey (180deg); -webkit-transform: rotate (180deg); Transformasi: Rotatey (180deg); } /*Gaya tombol kontrol* / .nav {lebar: 40%; Tinggi: 30px; Line-Height: 30px; Posisi: Absolute; Kiri: 30%; Bawah: 20px; z-index: 999; /*latar belakang-warna: #fff;*/ text-align: center; } /*Gaya normal* / .nav .i {lebar: 30px; Tinggi: 30px; Tampilan: blok inline; kursor: pointer; latar belakang-warna: #aaa; Teks-Align: tengah; Border-Radius: 50%; -Moz-Transform: skala (.48); -webkit-transform: skala (.48); Transform: Skala (.48); -webkit-transisi: semua 1s; -Moz-transisi: semua 1s; } .nav .i: setelah {} /*gaya yang dipilih saat ini* / .nav .i_current {-moz -transform: skala (1); -webkit-transform: skala (1); } .nav .i_current: setelah {opacity: 1; } /*Back {-moz-transform: rotatey (-180deg); -webkit-transform: rotatey (-180deg); Latar Belakang-Color:#555; }/*Optimalisasi gaya,*/ .photo {/*definisi di bawah ini adalah untuk menghilangkan kilatan gambar yang tiba -tiba*/ kiri: 50%; Atas: 50%; margin: -160px 0 0 -130px; } .photo-wrap {-moz-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; } .photo-front .photo-wrap {-moz-transform: translate (0px, 0px) rotate (0deg); -webkit-transform: translate (0px, 0px) rotate (0deg); } .photo-back .photo-wrap {-moz-transform: translate (260px, 0px) rotate (180deg); -webkit-transform: translate (260px, 0px) rotate (180deg); }Berikut adalah beberapa bagian penting dari gaya.
Pengaturan dalam kasus: -webkit-perspektif: 800px;
Anda dapat melihat efek pengaturan ini dan kemudian mengatur Rotate (45deg). Jika -webkit -transform tidak diatur, efek rotasi tidak akan ditampilkan. Rotasi gambar hanya berputar di pesawat. Jika ditetapkan terlalu kecil, efeknya adalah sebagai berikut:
Div.Photo bertanggung jawab atas terjemahan dan rotasi gambar, sedangkan div.photo-wrap bertanggung jawab untuk flip 3D (switching depan dan belakang). Untuk mengaktifkan elemen-elemen di dalam untuk mendukung efek 3D, atur -webkit-transform-style: preserve-3d untuk div.photo-wrap.
.photo-wrap .side style -webkit-backface-visibilitas: tersembunyi; Tujuan dari kalimat ini adalah untuk bersembunyi ketika elemen tidak menghadap layar.
Untuk membuat gambar bergerak dan membalik efek animasi, atur -webkit-transisi untuk .photo-wrap: Mari kita lihat penjelasan transisi di bawah ini:
Gaya bar navigasi
/*Gaya normal*/ .nav .i {lebar: 30px; Tinggi: 30px; Tampilan: blok inline; kursor: pointer; latar belakang-warna: #aaa; Teks-Align: tengah; Border-Radius: 50%; -Moz-Transform: skala (.48); -webkit-transform: skala (.48); Transform: Skala (.48); -webkit-transisi: semua 1s; -Moz-transisi: semua 1s; } /*Gaya yang dipilih saat ini* / .nav .i_current {-moz -transform: skala (1); -webkit-transform: skala (1); } .nav .i_current: setelah {opacity: 1; } /*gaya belakang* / .nav .i_back {-moz-transform: rotatey (-180deg); -webkit-transform: rotatey (-180deg); Latar Belakang-Color:#555; }Diagram analisis bilah navigasi:
Tombol bilah navigasi juga dibagi menjadi depan dan belakang. Untuk membedakan efek dari depan dan belakang, mereka diatur untuk memiliki warna latar belakang yang berbeda, dan pada saat yang sama, efek flip diatur untuk mengurangi tombol normal - Transform: skala (.48), dan ketika tombol dipilih, skala (1). Alasan untuk memperbesar dan keluar dari tombol adalah untuk mengetahui dengan tepat apakah gaya keseluruhan akan dihancurkan ketika tombol saat ini dipilih.
Setelah semua gaya dasar ditetapkan, beberapa optimisasi akan dibuat untuk efek tersebut. Untuk membuat gambar terlihat sedikit diimbangi ke kanan seperti pintu saat beralih di depan dan belakang, Anda dapat menambahkan gaya berikut:
/*Optimalisasi Gaya,*/ .Photo {/*Definisi di bawah ini adalah untuk menghilangkan kilatan gambar yang tiba -tiba*/ kiri: 50%; Atas: 50%; margin: -160px 0 0 -130px; } .photo-wrap {-moz-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; } .photo-front .photo-wrap {-moz-transform: translate (0px, 0px) rotate (0deg); -webkit-transform: translate (0px, 0px) rotate (0deg); } .photo-back .photo-wrap {-moz-transform: translate (260px, 0px) rotate (180deg); -webkit-transform: translate (260px, 0px) rotate (180deg); }Bagian Data
Data ini terutama ditulis dalam data.js. Array data didefinisikan dalam data.js untuk menyimpan informasi 22 gambar. Struktur output array data adalah sebagai berikut:
Setiap objek yang disimpan dalam data mencakup tiga atribut: Caption, Desc, dan IMG. Isi masing -masing objek yang disimpan dalam data adalah output sebagai berikut. Bagian data terutama digunakan untuk mengganti string dalam templat.
Konten data.js adalah sebagai berikut:
var data = []; var dataStr = '1. Foto 1 <br>/<br>/sayuran hijau <br>/<br>/<br>/2. Foto 2 <br>/<br>/foto 2 <br>/<br>/<br>/3. Foto 3 <br>/<br>/<br>/<br>/4. Foto 4 <br>/<br>/<br>/<br>/4. Foto 4 <br>/<br>/<br>/5. Foto 5 <br>/<br>/<br>/<br>/<br>/6. Mainan beruang kecil super lucu <br>/<br>/mainan beruang kecil super lucu <br>/<br>/>/<br>/<br>/7, foto 7 <br>/<br>/<br>/<br>/8, foto 8 <br>/<br>/<br>/9, foto 9 <br>/<br>/<br>/<br>/9,/9, foto 9 <br>/<br>/<br>/<br>/9,/9, foto 9 <br>/<br>/<br>/<br>/9,/9, foto 9 <br>/<br>/<br>/<br>/<br>/9, foto 9 <br>/<br>/<br>/<br>/<br>/<br> 10<br>/<br>/<br>/11, Photo 11<br>/<br>/<br>/<br>/12, Photo 12<br>/<br>/<br>/ 12<br>/<br>/<br>/13, Photo 13<br>/<br>/<br>/<br>/14, Photo 14<br>/<br>/<br>/14, Photo 14<br>/<br>/<br>/15, Photo 15<br>/<br>/<br>/<br>/15, Photo 15<br>/<br>/<br>/<br>/16, Photo 16<br>/<br>/<br>/<br>/17, Photo 17<br>/<br>/<br>/<br>/17, Photo 17<br>/<br>/<br>/<br>/17, Photo 17 <br>/<br>/<br>/<br>/17, foto 17 <br>/<br>/<br>/<br>/17, foto 17 <br>/<br>/<br>/<br>/18, foto 18 <br>/<br>/foto 18 <br>/<br>/19, foto 19 <br>/<br> <br>/foto/<br> <br>/19, foto 19 <br>/<br> <br> 20 <br>/<br>/<br>/photo 20 <br>/<br>/21, foto 21 <br>/<br>/<br>/<br>/<br>/22, foto 22 <br> <br>/<br>/'; // kode berikut adalah untuk membagi konten dalam data menjadi <bray var d = datastr.split (' l.br> <br> <br> <br> <bray var v var d = datastr.split ('<br> <br> <br> <br> <br> <bray var d = datastr.split (' <br> <br> <br> <br> <br> <) <bray) <bray var d = datastr.split ('<br> <br> i ++) {var c = d [i] .split ('<br> <br>'); data.push ({img: 'img'+(i+1)+'. jpg', keterangan: c [0] .split (',') [1], desc: c [1]});}Kontrol Dekomposisi-Kontrol VCD
• Output semua konten poster (lihat template + data)
• Kontrol Alokasi Posisi (Posisi Pusat, Kedua Posisi Sisi)
• Output & Kontrol Bilah Kontrol (sakelar, flip)
Keluarkan semua poster, beralih melalui array data, dan isi konten ke dalam templat.
// 4. Output semua poster var data = data; function addphotos () {var template = $ ('#wrap'). html (); var html = []; var nav = []; untuk (s dalam data) {var _html = template.replace ('{{index}}', s) .replace ('{{img}}', data [s] .img) .replace ('{{{caption}', data [s]. .replace ('{{desc}}', data [s] .desc); html.push (_html); // Setiap poster memiliki tombol yang sesuai nav.push ('<span id = "nav _'+s+'" onclick = "turn (this)"> </span>'); } // Tulis kembali setelah traversal html.push ('<verv>'+nav.join ('')+'</div>'); $ ('#wrap'). html (html.join ('')); rsort (acak ([0, data.length])); }Poster sortir, diagram analisis adalah sebagai berikut:
Saat menyortir poster untuk partisi kiri dan kanan, pertama -tama analisis posisi poster untuk partisi kiri dan kanan sebagai berikut:
Gunakan nomor acak untuk menghasilkan posisi kiri dan atas dari poster saat ini
// Buat nilai acak, mendukung rentang nilai.random ([min, max]); fungsi acak (rentang) {var max = math.max (rentang [0], rentang [1]); var min = math.min (rentang [0], rentang [1]); var diff = max-min; var number = math.ceil (math.random ()*diff + min); nomor pengembalian; } // 6. Hitung kisaran partisi kiri dan kanan {kiri: {x: [min, max], y [min, max]}, kanan {x: [min, max], y: [min, max]}} range fungsi () {var ran = {kiri: {x: []}}}; var wrap = {w: $ ('#wrap'). width (), // w: 600, h: $ ('#wrap'). height ()} var photo = {w: $ ('. Foto') [0] .clientWidth, h: $ ('. 0 -photo, 0] .ClientHeight} ran.left.x = [photo 0 - ran.left.y = [0 - photo.h, wrap.h]; ran.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; ran.right.y = ran.left.y; Return Ran; }Lalu urutkan poster
//5.sorting fungsi poster rsort (n) {var _photo = $ ('. Foto'); var foto = []; untuk (var i = 0; i <_photo.length; i ++) {_photo [i] .className = _photo [i] .classname.replace (// s*photo_center/s*/, ''); _photo [i] .className = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .className = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .className = _photo [i] .className = _photo [i] .classname.replace (// s*photo-back/s*/, ''); // Karena foto-front dan foto-kembali diganti di atas, _photo [i] .className += 'foto-front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-moz-transform'] = _photo [i] .style ['transform'] = _photo [i] .Style ['-Webkit-Transform'] = 'Skala Rotate (0Deg) (1.3)'; photos.push (_photo [i]); } // var photo_center = $ ('#photo _'+n) [0]; var photo_center = document.geteLementById ('photo _'+n); var newclass = photo_center.classname + 'photo_center'; //console.log(photo_center.attr('class '); photo_center = photos.splice (n, 1) [0]; //photo_center.classname = newclass; $ ('#photo _'+n) .attr ('class', newclass); // Bagilah poster yang tersisa menjadi dua bagian var photos_left = photos.splice (0, math.ceil (photos.length/2)); var photos_right = foto; var ranges = range (); // penyortiran partisi kiri untuk (s in photos_left) {var photo = photos_left [s]; photo.style.left = acak (ranges.left.x) + 'px'; photo.style.top = acak (ranges.left.y) + 'px'; photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-Webkit-transform'] = 'rotate ('+acak ([-150.150])+'deg) skala (1)'; } // Sort Partisi Kanan untuk (S di FOTOS_RIGHT) {var photo = photos_right [s]; photo.style.left = acak (ranges.right.x) + 'px'; photo.style.top = acak (ranges.right.y) + 'px'; photo.style['-moz-transform'] = photo.style['transform'] = photo.style['-webkit-transform'] = photo.style['-webkit-transform'] = photo.style['-webkit-transform'] = 'rotate('+random([-100,100])+'deg) scale(1)'; } // pengendalian pemrosesan var navs = $ ('. I'); untuk (var i = 0; i <navs.length; i ++) {navs [i] .className = navs [i] .classname.replace (// s*i_current/s*/, ''); navs [i] .className = navs [i] .classname.replace (// s*i_back/s*/, ''); } // Tambahkan gaya i_current $ ('#nav _' +n) [0] .className += 'i_current'; }Efek switching dari sisi depan dan belakang poster dan efek switching dari tombol kontrol:
function turn (elem) {var cls = elem.classname; var n = elem.id.split ('_') [1]; if (! (/photo_center/.test (cls))) {rsort (n); } // ClassName diubah setelah eksekusi pernyataan IF di atas, karena saya tidak ingin ini // selalu ada kekurangan photo_center class var cs = $ ('#photo _'+n) [0]; cls = cs.classname; if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/, 'photo-back'); $ ('#nav _' +n) [0] .className += 'i_back'; } else {cls = cls.replace (/photo-back/, 'photo-front') $ ('#nav _'+n) [0] .className = $ ('#nav _'+n) [0] .classname.replace (// s*i_back/s*/, ''); } cs.classname = cls; }Anda dapat memahami poster mana yang merupakan poster yang saat ini ditampilkan berdasarkan N di Rsort (N), dan Anda juga dapat mengetahui tombol mana yang saat ini dipilih.
Di atas adalah analisis efek yang sesuai.
Meringkaskan:
Ide dan Metode untuk Menganalisis Kasus:
• Metode analisis modul
• Metode analisis VCD
Beberapa efek CSS baru
• Pengaturan Posisi Tampilan 3D & Dukungan Sub-Elemen 3D
• Bersembunyi saat terbalik tidak terlihat
• Gunakan rotasi CSS (sumbu y) dan perpindahan
• Animasi switching CSS
Keterampilan skrip front-end
• Fungsi template sederhana untuk penggantian string
• Dapatkan beberapa nomor acak sesuai dengan kisaran
• Gunakan skrip untuk mengubah className elemen dan atribut gaya spesifik
Selama proses implementasi, masalah yang saya temui adalah bahwa ketika membalik gambar, sisi sebaliknya tidak dapat disembunyikan di Firefox. Dengan kata lain, ada masalah dengan kode berikut, dan sudah lama diperiksa.
.photo-wrap .side {-moz-backface-visibility: tersembunyi; -webkit-backface-visibilitas: tersembunyi; Backface-Visibilitas: tersembunyi;}Ternyata: Saya melewatkan gaya transformasi: cagar alam . Jadi saat kompatibilitas browser, ingatlah untuk menulis gaya tanpa awalan
.photo-wrap {position: absolute; Lebar: 100%; Tinggi: 100%; -Moz-Transform-style: perserve-3d; -webkit-transform-style: cagar alam-3d;/*Biarkan elemen di dalam mendukung efek 3d*/<span style = "Color:#cc0000;"> Transform-style: Preserve-3d;/*Karena kalimat ini, bagian belakang firefox tidak dapat ditampilkan*/</span> -webkit-transisi: semua 1s; -Moz-transisi: semua 1s; Transisi: Semua 1s; }Akhirnya, kode JS lengkap dilampirkan:
<script type = "text/javascript"> // menghasilkan nilai acak secara acak, mendukung rentang nilai.random ([min, max]); fungsi acak (rentang) {var max = math.max (rentang [0], rentang [1]); var min = math.min (rentang [0], rentang [1]); var diff = max-min; var number = math.ceil (math.random ()*diff + min); nomor pengembalian; } // 4. Output semua poster var data = data; function addphotos () {var template = $ ('#wrap'). html (); var html = []; var nav = []; untuk (s dalam data) {var _html = template.replace ('{{index}}', s) .replace ('{{img}}', data [s] .img) .replace ('{{{caption}', data [s]. .replace ('{{desc}}', data [s] .desc); html.push (_html); // Setiap poster memiliki tombol yang sesuai nav.push ('<span id = "nav _'+s+'" onclick = "turn (this)"> </span>'); } html.push ('<div>'+nav.join ('')+'</div>'); $ ('#wrap'). html (html.join ('')); rsort (acak ([0, data.length])); } addPhotos () // 6. Hitung kisaran partisi kiri dan kanan {kiri: {x: [min, max], y [min, max]}, kanan {x: [min, max], y: [min, max]}} range fungsi () {var ran = {kiri: {x: []}}}; var wrap = {w: $ ('#wrap'). width (), // w: 600, h: $ ('#wrap'). height ()} var photo = {w: $ ('. Foto') [0] .clientWidth, h: $ ('. 0 -photo, 0] .ClientHeight} ran.left.x = [photo 0 - ran.left.y = [0 - photo.h, wrap.h]; ran.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; ran.right.y = ran.left.y; Return Ran; } // 5. Sortir fungsi poster rsort (n) {var _photo = $ ('. Foto'); var foto = []; untuk (var i = 0; i <_photo.length; i ++) {_photo [i] .className = _photo [i] .classname.replace (// s*photo_center/s*/, ''); _photo [i] .className = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .className = _photo [i] .classname.replace (// s*photo-back/s*/, ''); _photo [i] .className = _photo [i] .classname.replace (// s*photo-back/s*/, ''); // Karena hal di atas telah menggantikan foto-front dan foto-balik, _photo [i] .className += 'foto-front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-moz-transform'] = _photo [i] .style ['transform'] = _photo [i] .Style ['-Webkit-Transform'] = 'Skala Rotate (0Deg) (1.3)'; photos.push (_photo [i]); } // var photo_center = $ ('#photo _'+n) [0]; var photo_center = document.geteLementById ('photo _'+n); var newclass = photo_center.classname + 'photo_center'; //console.log(photo_center.attr('class '); photo_center = photos.splice (n, 1) [0]; //photo_center.classname = newclass; $ ('#photo _'+n) .attr ('class', newclass); // membagi poster yang tersisa menjadi dua bagian var photos_left = photos.splice (0, math.ceil (photos.length/2)); var photos_right = foto; var ranges = range (); // penyortiran partisi kiri untuk (s in photos_left) {var photo = photos_left [s]; photo.style.left = acak (ranges.left.x) + 'px'; photo.style.top = acak (ranges.left.y) + 'px'; photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-Webkit-transform'] = 'rotate ('+acak ([-150.150])+'deg) skala (1)'; } // penyortiran partisi kanan untuk (s in photos_right) {var photo = photos_right [s]; photo.style.left = acak (ranges.right.x) + 'px'; photo.style.top = acak (ranges.right.y) + 'px'; photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = 'rotate ('+acak ([-100.100])+'deg) skala (1)'; } // pengendalian pemrosesan var navs = $ ('. I'); untuk (var i = 0; i <navs.length; i ++) {navs [i] .className = navs [i] .classname.replace (// s*i_current/s*/, ''); navs [i] .className = navs [i] .classname.replace (// s*i_back/s*/, ''); } // Tambahkan gaya i_current $ ('#nav _' +n) [0] .className += 'i_current'; } function turn (elem) {var cls = elem.classname; var n = elem.id.split ('_') [1]; if (! (/photo_center/.test (cls))) {rsort (n); } // ClassName diubah setelah eksekusi pernyataan IF di atas, karena saya tidak ingin ini // kelas photo_center var cs = $ ('#photo _'+n) [0]; cls = cs.classname; if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/, 'photo-back'); $ ('#nav _' +n) [0] .className += 'i_back'; } else {cls = cls.replace (/photo-back/, 'photo-front') $ ('#nav _'+n) [0] .className = $ ('#nav _'+n) [0] .classname.replace (// s*i_back/s*/, ''); } cs.classname = cls; } </script>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.