Lanjutkan ke artikel sebelumnya untuk mempelajari dengan sempurna mengimplementasikan delapan jenis korsel fokus JS (artikel sebelumnya), untuk referensi Anda, konten spesifiknya adalah sebagai berikut
5. Gulir tepat waktu ke atas dan ke bawah dengan mulus
Ide:
1. Gagasan 1: Salin satu salinan UL, tetapi kembali ke posisi dengan setengah jarak gulir; (Situs web besar berkinerja sedikit lebih rendah);
2. Gagasan 2: Melalui posisi relatif, pindahkan Li pertama ke ujung, lalu kembalikan Ul dan Li ke posisi.
window.onload = function () {var obox = document.geteLementById ('box'); var oul = document.getElementById ('ul'); var ali_u = oul.getElementsbyTagname ('li'); var ool = document.getElementById ('ol'); var ali_o = ool.getElementsByTagname ('li'); var liHeight = ali_u [0] .offsetheight; var inow = 0; // nilai untuk tombol var inow2 = 0; // digunakan untuk menggulir var timer = null; untuk (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseOver = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; this.classname = 'aktif'; // Bangun Hubungan: sangat penting Inow = this.index; inow2 = this.index; startMove (oul, {top: -this.index*lIHeight}); }}; } timer = setInterval (Torun, 2000); obox.onmouseover = function () {clearInterval (timer); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; fungsi torun () {if (inow == 0) {// kembalikan li dan tempat ul ali_u [0] .style.position = 'static'; oul.style.top = 0; // Ingatlah untuk mengembalikan inow2 ke inow2 = 0; } if (inow == ali_o.length-1) {// pindahkan li pertama ke inow terakhir = 0; ali_u [0] .style.position = 'relatif'; ali_u [0] .style.top = ali_u.length*liHeight+'px'; } else {inow ++; } inow2 ++; untuk (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } ali_o [inow] .className = 'Active'; startMove (oul, {top: -inow2*liHeight}); }};Gambar reproduksi:
6. Pengaruh switching tanpa batas antara kiri dan kanan
Ide:
1. Posisi absolut: Semua Li kecuali yang pertama diposisikan di sebelah kanan, bandingkan nilai indeks dengan indeks saat ini, dan temukan posisi LI untuk muncul.
2. Tambahkan "sakelar" atau "interval waktu" untuk mengontrol frekuensi switching gerak!
window.onload = function () {var oul = document.geteLementById ('ul'); var ali_u = oul.getElementsbyTagname ('li'); var ool = document.getElementById ('ol'); var ali_o = ool.getElementsByTagname ('li'); var liwidth = ali_u [0] .offsetWidth; var inow = 0; var bbtn = true; // semua diposisikan ke kanan kecuali untuk item pertama untuk (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = liWidth+'px'; } untuk (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseOver = function () {if (bbtn) {bbtn = false; untuk (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } this.className = 'Active'; // menilai shift kiri dan kanan jika (inow <this.index) {// cari li ali_u [this.index] .style.left = liWidth+'px'; // Pindahkan Li Away StartMove saat ini (Ali_u [inow], {left: -liwidth}); } else if (inow> this.index) {ali_u [this.index] .style.left = -liwidth+'px'; startMove (ali_u [inow], {left: liWidth}); } startMove (ali_u [this.index], {left: 0}, function () {bbtn = true; // gerakan selanjutnya dapat dilakukan hanya setelah gerakan saat ini selesai}); // Tetapkan indeks saat ini ke inow = this.index; } // sakelar jika berakhir}; }};Gambar reproduksi:
7. Efek Accordion
1. Ide 1: Buat dengan mengubah lebar li;
2. Ide 2: Semua Li kecuali item pertama diposisikan pada interval yang sama, dan posisinya diubah secara rata -rata setelah acara dipicu.
window.onload = function () {var oul = document.geteLementById ('ul'); var ali_u = oul.getElementsbyTagname ('li'); // Semua penentuan posisi kecuali item pertama untuk (var i = 1; i <ali_u.length; i ++) {// penentuan posisi 30px isometrik Ali_u [i] .style.left = (470-3*40)+(i-1)*30+'px'; } untuk (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseOver = function () {for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; Ali_u [i] .onmouseOver = function () {for (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {// Semua pengaturan kiri lebih kecil dari startMove indeks (ali_u [i], {kiri: i*30}); } else {// semua pengaturan yang lebih besar dari indeks startMove (ali_u [i], {left: (470-3*40)+(i-1)*30}); }}}}}}};Gambar reproduksi:
8. Efek Accordion 2
Posisikan Li secara merata atas dasar sebelumnya!
window.onload = function () {var oul = document.geteLementById ('ul'); var ali_u = oul.getElementsbyTagname ('li'); var num = math.ceil (470/ali_u.length); // Lebar masing -masing // semua penentuan posisi kecuali item pertama untuk (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = num*i+'px'; } untuk (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseOver = function () {for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseOver = function () {for (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {startMove (ali_u [i], {left: i*30}); } else {startMove (ali_u [i], {left: (470-3*40)+(i-1)*30}); }}}}; ali_u [i] .onmouseout = function () {for (var i = 0; i <ali_u.length; i ++) {startMove (ali_u [i], {kiri: num*i}); }}; }};Gambar reproduksi:
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.