Pernyataan: Demo bergantung pada lembaga pelatihan dan sangat berterima kasih atas struktur pelatihan ini. Tanpa basa -basi lagi, sekarang kita akan mulai mengubah produksi demo.
Pertama-tama, dalam proses pembelajaran front-end, gambar carousel adalah sesuatu yang harus kita pelajari, jadi untuk lebih efisien menerapkan berbagai gambar korsel, kerangka kerja gerak dienkapsulasi.
fungsi getStyle (obj, attr) {if (obj.currentstyle) {return obj.currentstyle [attr]; // Untuk mendapatkan nilai atribut di bawah IE} else {return window.getComputedStyle (obj, null) [attr]; // Untuk mendapatkan nilai atribut di bawah w3c (null) [attr]; // untuk mendapatkan nilai atribut di bawah w3c browse) [attr]; // untuk mendapatkan nilai atribut di bawah w3c browse) [attr]; // untuk mendapatkan nilai atribut di bawah w3c browse) [attr]; // untuk mendapatkan nilai atribut di bawah w3c browse) [attr]; // untuk mendapatkan nilai atribut di bawah w3c brows ClearInterval (obj.timer); obj.timer = setInterval (function () {var flag = true; var arus = 0; for (var attr in json) {if (attr == 'opacity') {current = parseInt (getStyle (obj, attr)*100);} else {current = parseint (getStyle (obj, attr);}; Math.Ceil (Langkah): Math.floor (langkah); // Pertama -tama tentukan apakah atributnya adalah transparansi jika (attr == 'opacity') {// Tentukan apakah browser mendukung opacity if ('Opacity' di Obj.Style) {OBJ.STYLE.OPACTY = (CURAT + ')'; ClearInterval (obj.timer);}}, 5);}Kerangka kerja ini kompatibel dengan browser yang berbeda dan memungkinkan properti seperti Opacity dan Z-Index untuk dilewati. Tentu saja, properti umum seperti lebar, tinggi, kiri, kanan sangat penting. Dengan kerangka kerja ini, Anda dapat mencapai hasil yang bagus. Jadi sekarang kita mulai melakukan demo secara formal.
Pertama, produksi index.html.
<Div id = "box"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
Produksi index.html sangat sederhana. Kami akan memasukkan gambar sebagai gambar latar belakang Li di JavaScript. Setelah itu, kami menyesuaikan gaya CSS.
*{margin: 0px; padding: 0px; } #box {width: 1300px; Tinggi: 400px; Margin: 100px Auto; meluap: tersembunyi; } #box ul {height: 400px; Lebar: 1300px; } #box ul li {width: 240px; Tinggi: 400px; float: kiri; meluap: tersembunyi; }Kode untuk JavaScript adalah sebagai berikut:
window.onload = function () {var box = document.geteLementById ('box'); var ali = box.children [0] .Children; untuk (var i = 0; i <ali.length; i ++) {ali [i] .style.backgroundImage = 'url (' + 'gambar/' + (i + 1) + '.jpg'; ali [i] .onmouseover = function () {untuk (var i = 0; i <ali.length; i ++) {var i = 0; i <ali. animate (ini, {width: 800});Dengan cara ini, demo efek bellow yang diimplementasikan menggunakan JS asli direalisasikan. Tentu saja, kerangka kerja animasi yang dienkapsulasi juga dapat digunakan untuk mencapai efek korsel yang mirip dengan NetEase.
Artikel di atas adalah demo bergaya bellow yang mengimplementasikan kerangka kerja olahraga (kode contoh) dan merangkum kerangka kerja olahraga (kode contoh) yang merupakan semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.