Saya belum memperbarui baru -baru ini, jadi saya hanya akan menambahkan beberapa efek untuk memperkaya.
Tak satu pun dari mereka mempercantik langkah ini.
Accordion CSS murni:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> Accordion css </iteme> <tyle> .showbox {width: 660px; meluap: tersembunyi; } ul {List-style: none; Margin: 0; Padding: 0; Lebar: 30000px; } ul li {float: left; Posisi: kerabat; Tinggi: 254px; Lebar: 110px; meluap: tersembunyi; Transisi: semua 0,3s; } /*Ini adalah inti dari akordeon CSS, yang merupakan penggunaan hover ** Pertama-tama, ul: hover li memicu perubahan yang telah melewati UL tetapi tidak melalui ul ** kemudian ul: melayang di sini adalah perubahan yang telah dilewati lib, sesuai dengan efek animasi dari CSS3 dan beberapa efek dari CSS3 pada keindahan halaman, Anda dapat membuat can a can a Gooding. Jika Anda menggunakan implementasi JS murni, itu mungkin merepotkan. */ ul: hover li {width: 22px; } ul li: hover {width: 460px; } ul li img {width: 550px; Tinggi: 254px; } ul li span {width: 22px; Posisi: Absolute; TOP: 0; Kanan: 0; Tinggi: 204px; Padding-top: 50px; Warna: #fff; } ul li span.bg1 {latar belakang: #333; } ul li span.bg2 {latar belakang: #0F0; } ul li span.bg3 {latar belakang: #ff7500; } ul li span.bg4 {latar belakang: #0ff; } ul li span.bg5 {latar belakang: #00f; } </tyle> <script type = "text/javaScript"> </script> </head> <body> <div> <ul> <li> <span> Ini adalah </span> <mmg src = "1.jpg"> <li> <pan> <pan> </Li </span> </Li </Li </Li </Li ini </Li </Li </Li </Li </Li. src = "3.jpg"> </li> <li> <span> Ini adalah yang keempat </span> <mmg src = "4.jpg"> </li> <li> <span> Ini adalah kelima </span> <img src = "5.jpg"> </li> </ul> </span> </body> </ht> </ht> </li> </ul> </div> </body> </ht "ht>CSS3 Accordion:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <iteme> css3-checked: </iteme> <tyle>/* Gunakan fitur pilihan tunggal radio untuk mencapai efek akordeon*/ul {display: none; } input {display: none;} label {display: block; Line-Height: 40px; Border-Bottom: 1px solid #ddd; kursor: pointer; Ukuran font: 15px; font-weight: bold;} .list> ul {display: none; -webkit-transisi: semua .5S linear; -Moz-transisi: semua .5S linear; -MS-transisi: semua .5S linear; -O-transisi: semua .5S linear; Transisi: All .5s linear;} #list1: checked + ul {display: block;} #list2: checked + ul {display: block;} #list3: checked + ul {display: block;} #list4: checked + uL {display:;} </style> </head </head> <body> <div> <label for = " name = "list" id = "list1" checked = "chekced"/> <ul> <li> <a href = ""> nama teman kelas </a> </li> <li> <a href = ""> nama teman sekelas </a> </li> <a "" class href = "> classmate </a> </li> <a" <a "" class href = ""> classmate </a> </li> <li "<a" Nama </a> </li> <li> <a href = ""> Nama teman sekelas </a> </li> <li> <a href = ""> Nama teman sekelas </a> </li> <li> <a href = "> nama teman sekelas </a> </li> <li> <a href ="> name classmate </a> </li> <li> <a href = "> classmate </a> </li> <li> <a href ="> classmate </a> </li> <li> <a href = "" classMate href = ""> Nama teman sekelas </a> </li> <li> <a href = ""> nama teman sekelas </a> </li> <li> <a href = ""> Nama teman sekelas </a> </li> <li> <a href = ""> nama classMate </a> </li> <li> <a href = ""> nama classMate </a> </li> <a> <a href = "" <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> </ul> <label for="list3">My Classmate</label> <input type="radio" name="list" id="list3"/> <ul> <li> <a href = ""> Nama teman sekelas </a> </li> <li> <a href = ""> Nama teman sekelas </a> </li> <li> <a href = "" nama teman sekelas </a> </li> <li> <a href = ""> classmate </a> </li> <li> <a href = ""> Classmate's Name href = ""> Nama teman kelas </a> </li> <li> <a href = ""> nama teman kelas </a> </li> <li> <a href = ""> nama teman kelas </a> </li> </ul> <label untuk = "List4"> ID Teman Kelas saya </label> </li> </ul> <label for = "List4"> ID ClassMate saya </label> </ulput = "" LABEL "" LAGE "> ID CLASSMATE </LABEL> </ULT =" "RAGA" "LAGE"> ID CLASSMATE </LABEL> </ULT = "" RAGA "" LAGE "> ID CLASSMATE </LABEL> </UL" "" RAGA "" RAGA "" RAGA "> My ClassMate </label> <input =" "Radio" "LAGE" saya <li> <a href = ""> teman kelas </a> </li> <li> <a href = ""> teman kelas </a> </li> <li> <a href = ""> teman kelas </a> </li> <a href = "" </div> </body> </html>Accordion Diimplementasikan oleh JavaScript:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> Accordion </iteme> <tyle> .showbox {width: 660px; meluap: tersembunyi; } ul {List-style: none; Margin: 0; Padding: 0; Lebar: 30000px; } ul li.active {width: 550px; } ul li {float: left; Posisi: kerabat; Tinggi: 254px; Lebar: 22px; meluap: tersembunyi; } ul li img {width: 660px; Tinggi: 254px; } ul li span {width: 22px; Posisi: Absolute; TOP: 0; Kiri: 0; Tinggi: 204px; Padding-top: 50px; } ul li span.bg1 {latar belakang: #333; } ul li span.bg2 {latar belakang: #0F0; } ul li span.bg3 {latar belakang: #ff7500; } ul li span.bg4 {latar belakang: #0ff; } ul li span.bg5 {latar belakang: #00f; } </tyle> <script type = "text/javascript"> window.onload = function () {createaccordion ('. showbox'); }; function createaccordion (name) { /*get elemen* / var odiv = document.queryselector (name); /*Mendeklarasikan lebar minimum*/ var iminwidth = 9999999; /*dapatkan elemen*/ var ali = odiv.getElementsbyTagname ('li'); var aspan = odiv.getElementsbyTagname ('span'); /*Timer Default Container*/ odiv.timer = null; /*Loop Tambah Acara dan Nilai Indeks Atribut Kustom*/ untuk (vari = 0; i <aspan.length; i ++) {aspan [i] .index = i; aspan [i] .onmouseOver = function () {gotoimg (odiv, this.index, iminwidth); }; /*Dapatkan lebar minimum*/ iminwidth = math.min (iminwidth, ali [i] .offsetWidth); }}; fungsi gotoimg (odiv, iindex, iminwidth) {if (odiv.timer) { /*hapus timer untuk menghindari overlay* / clearInterval (odiv.timer); } /*Buka timer* / odiv.timer = setInterval (function () {changeWidthinner (ODIV, iindex, iminwidth);}, 30); } /*Ini adalah kunci, gerak* / fungsi changeWidthinner (odiv, iindex, iminwidth) {var ali = odiv.getElementsbyTagname ('li'); var aspan = odiv.getElementsbyTagname ('span'); /*Dapatkan ukuran kotak, ini adalah lebar total*/ var iwidth = odiv.offsetwidth; /*Deklarasi lebar gambar indentasi*/ var w = 0; /*Deklarasi penilaian, untuk menghapus deklarasi timer*/ var bend = true; /*Loop untuk melingkarkan setiap gambar, untuk mendapatkan elemen yang diperluas dan menyusut*/ untuk (var i = 0; i <ali.length; i ++) {/*Ini untuk mendapatkan indeks yang diperluas*/ if (i == iindex) {lanjutkan; } /*Ada elemen yang tidak memiliki perubahan, sehingga lebar minimum disimpan* / if (iminwidth == Ali [i] .offsetwidth) { /*Total lebar kurangi lebar ini, karena mereka juga dalam lebar total* / iwidth- = iminwidth; melanjutkan; } /*Kode di loop berikut adalah elemen yang dikurangi* / /*Jangan menghapus timer, dan belum selesai berolahraga* / bend = false; / *Dapatkan kecepatan, cepat pertama dan kemudian lambat */speed = math.ceil ((Ali [i] .offsetWidth-iminwidth)/10); /*Mengurangi lebar yang tersisa*/ w = Ali [i] .offsetWidth-speed; /*Untuk menghindari elemen menyusut yang kurang dari lebar minimum*/ if (w <= iminwidth) {w = iminwidth; } /*Atur lebar elemen menyusut* / ali [i] .style.width = w+'px'; /*Kurangi lebar menyusut, lebar yang tersisa adalah lebar yang diperluas*/ iwidth- = w; } /*Lebar elemen yang diperluas* / ali [iindex] .style.width = iwidth+'px'; if (bend) {clearInterval (odiv.timer); odiv.timer = null; } } </script></head><body> <div> <ul> <li><span> This is the first</span><img src="1.jpg"></li> <li><span> This is the second</span><img src="2.jpeg"></li> <li><span> This is the third</span><img src="3.jpg"></li> <li> <span> Ini adalah keempat </span> <img src = "4.jpg"> </li> <li> <span> Ini adalah yang kelima </span> <img src = "5.jpg"> </li> </ul> </div> </body> </html>Hal berikutnya adalah menggunakan efek animasi, untuk merangkum gerakan:
/*Gunakan Panggilan, Obj Objek, Atribut Atribut, Kecepatan Kecepatan, Nilai yang ingin dicapai oleh Itarget, FN Callback Function*//*karena gerakan pada dasarnya berada dalam unit PX, seperti untuk transparansi, tidak ada unit, jadi saya memisahkannya di sini. Faktanya, saya tidak banyak mengubahnya, hanya menilai apakah itu atribut transparansi, dan kemudian pergi ke garis transparansi*/ fungsi domove (obj, attr, speed, itarget, fn) {if (attr == "opacity") {obj.len = itarget-parsefloat (getStyle (obj, "opacity"))* } else {obj.len = itarget-parsefloat (getStyle (obj, "opacity")); } /*Arah di sini dinilai. Yang setelah titik awal negatif dan satu sebelum titik awal positif*/ kecepatan = obj.len> 0? Kecepatan: -speed; ClearInterval (obj.timer); obj.timer = setInterval (function () {if (! Obj.num) {obj.num = 0;} if (attr == "opacity") {obj.num = parsefloat (getstyle (target tatre)*100+speed;} else {obj.num = parseint (getste (apakah target)*100+speed;} else {obj.num = parseint (getste (ATTH))*100+speed;} else {obj.num = parseINT (apakah target (apakah)*100+speed;} lain {obj.num = parseint (getseint (getste (apakah ste) {Obj.num = Parseint (Getste (ATTRE))*100+speed;} lain {obj.num = parseint (Getste (LEPATI Poin telah mencapai, hentikan timer ketika telah tiba*/ if (obj.num> = itarget && obj.len> 0 || obj.num <= itarget && obj.len <0) {obj.num = itarget; } else {obj.style [attr] = obj.num+"px"; } /*Jika Anda mendapatkan nilai atribut CSS, Anda akan mendapatkan nilai kinerja* / fungsi getStyle (obj, attr) {return obj.currentstyle? Obj.currentstyle [attr]: getComputedstyle (obj) [attr]; }Gambar korsel:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Carousel diagram</title> <!-- This is a reference to encapsulated motion function --> <script type="text/javascript" src="doMove.js"></script> <script type="text/javascript"> window.onload=function(){ /*Panggilan untuk mengimplementasikan carousel* / carousel ("carousel")} function carousel (name) {var oscl = document.geteLementById (name); var oul = oscl.queryselector ("ul"); var ali = oul.QuerySelectorAll ("li"); var next = document.geteLementById ("next"); var pre = document.getElementById ("pre"); var aindex = oscl.QuerySelectorAll (". Rentang indeks"); var num = 0; indeks var = 0; /*Berikan level tertinggi dari gambar pertama*/ Ali [0] .Style.zindex = 5; /*Menilai apakah timer ada*/ if (! Oscl.timer) {oscl.timer = null; } /*Ini adalah carousel otomatis pada* / oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); /*Tunjukkan dan sembunyikan di halaman atas dan bawah*/ oscl.onmouseover = function () {/*Pindah di stop timer*/ clearInterval (oscl.timer); next.style.display = "block"; pre.style.display = "block"; } oscl.onmouseout = function () {next.style.display = "none"; pre.style.display = "none"; /*Bergerak di timer*/ oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); } /*Klik pada halaman sebelumnya dan berikutnya* / next.onClick = function () {num ++; num%= ali.length; bermain(); } pre.onClick = function () {if (! Ali [index]) {index = num; } num--; if (num <0) {num = ali.length-1; } bermain(); } /*Poin indeks* / untuk (var i = 0; i <aIndex.length; i ++) {aIndex [i] .index = i; aIndex [i] .onmouseOver = function () {num = this.index; bermain(); }} /*Fungsi eksekusi animasi* /function play () { /*Cukup tentukan apakah itu adalah titik pemicu yang sama, seperti dua gerakan dari titik indeks adalah sama. Jika tidak dijalankan, hindari eksekusi berulang secara terus menerus*/ if (index! = Num) {for (var i = 0; i <ali.length; i ++) {/*Setel semua level ke 1*/ ali [i] .style.zindex = 1; } /*Tetapkan level korsel terakhir ke 2* / Ali [indeks] .style.zindex = 2; aindex [index] .className = ""; aindex [num] .className = "Active"; indeks = num; /*Atur transparansi sosok korsel ini ke 0*/ Ali [num] .style.opacity = 0; /*Atur level angka yang merupakan korsel ke 5*/ Ali [num] .style.zindex = 5; /*Enkapsulasi fungsi gerak, memudar dari gambar ini*/ domove (Ali [num], "opacity", 10.100); }}} </script> <tyle> a {text-decoration: none; Warna: #555; } #carousel {font-family: "Microsoft Yahei"; Posisi: kerabat; Lebar: 800px; Tinggi: 400px; margin: 0 otomatis; } #carousel ul {List-style: none; Margin: 0; Padding: 0; Posisi: kerabat; } #carousel ul li {position: absolute; z-index: 1; TOP: 0; Kiri: 0; } .imgbox img {width: 800px; Tinggi: 400px; } .btn {position: absolute; z-index: 10; Atas: 50%; Lebar: 45px; Tinggi: 62px; margin -top: -31px; Teks-Align: tengah; Line-Height: 62px; Ukuran font: 40px; Latar Belakang: RGBA (0,0,0,0,4); opacity: alpha (opacity = 50); Tampilan: Tidak Ada; } #pre {kiri: 0; } #next {kanan: 0; } #carousel .index {position: absolute; Bawah: 10px; Kiri: 50%; z-index: 10; } #carousel .index span {width: 15px; Tinggi: 15px; Border-Radius: 50%; Latar Belakang: #87Cefa; Tampilan: blok inline; Kotak-Shadow: 1px 1px 6px #4169e1; } #carousel .index span.active {latar belakang: #4169e1; Kotak-Shadow: 1px 1px 6px #87Cefa Inset; } </tyle> </head> <body> <v id = "carousel"> <ul> <li> <a href = "#"> <img src = "1.jpg"> </a> </li> <li> <a href = "#"> <img src = "2.jpg"> </a> </Li> </li = "2.jpg"> </a> </Li> </Li </Li </Li </Li "> </Li </Li </Li </Li </Li </Li </Li '> src = "2.jpg"> </a> </li> <li> <a href = "#"> <img src = "3.jpg"> </a> </li> <li> <a href = "#"> <img src = "4.jpg"> </a> </a> <i> <a hrc = "4.jpg"> </a> </li> <a hrc = "4.jpg"> </a> </Li> <a hrc = "4.jpg"> </a> </li> <a> <a hrc = " src = "5.jpg"> </a> </li> </ul> <a href = "javascript :;" id = "next" >> </a> <a href = "javascript :;" ID = "Pre"> <</a> <div> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </div> </span> </span>Ini dilakukan menggunakan plugin: responssiveslides.js
Berdasarkan jQuery
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> </itement> <!-Memperkenalkan plugin js dan jQuery-> <skrip src = "jQuery-2.0.3 Lebar: 800px; } /* Atribut CSS default plugin* / .rslides {position: relatif; List-style: tidak ada; meluap: tersembunyi; Lebar: 100%; Padding: 0; Margin: 0; } .rslides li {-webkit-backface-visibility: tersembunyi; Posisi: Absolute; Tampilan: Tidak Ada; Lebar: 100%; Kiri: 0; TOP: 0; } .rslides li: anak-anak pertama {position: relatif; Tampilan: Blok; float: kiri; } .rslides img {display: block; Tinggi: otomatis; float: kiri; Lebar: 100%; Perbatasan: 0; } /*, dimodifikasi, dimodifikasi ke tombol dot* / ul.rslides_tabs.rslides1_tabs {position: absolute; Bawah: 10px; Kiri: 45%; List-style: tidak ada; z-index: 10; } ul.rslides_tabs.rslides1_tabs li {float: left; } ul.rslides_tabs.rslides1_tabs li a {display: block; Border-Radius: 50%; Lebar: 10px; Tinggi: 10px; margin-kanan: 10px; Latar belakang: #FFF; } / * .rslides_here Ini setara dengan aktif * / ul.rslides_tabs.rslides1_tabs li.rslides_here a {latar belakang: #004f88; } /* Nama kelas tombol kiri dan kanan* / .rslides_nav.rslides1_nav {position: absolute; Atas: 50%; Warna: #EEE; Ukuran font: 40px; Dekorasi Teks: Tidak Ada; z-index: 4; } .rslides_nav.rslides1_nav.pre {kiri: 10px; } .rslides_nav.rslides1_nav.next {kanan: 10px; } .rslides img {height: 400px; } </tyle> <script> $ (function () {$ (". PAUSECONTROLS: true, // boolean: jeda saat melayang kontrol, prevtext true atau false: "<", // modifikasi simbol tombol kiri dan kanan nexttext: ">", // string: Teks untuk tombol "NEXT" "NOBLIDS (" None "(tidak ada (" none "(tidak ada (". " $ ("#Banner"). MouseOver (function () {$ (". </script> </head> <body> <!-Gunakan div untuk membungkusnya, dan tag-tag yang ditambahkan oleh JS akan dimuat langsung di belakang tag UL-> <div id = "Banner"> <ul id = "rslides"> <li> <img src = "111.jpg"> </Li> <li> <li> <li> <i iMg src = "222. src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li> </ul> </div> </body> </html>Slide Gambar:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> gambar geser </iteme> <tyle> .container {position: relatif; Lebar: 630px; Perbatasan: 2px Solid #888; padding: 5px; } .c-wrap {width: 630px; meluap: tersembunyi; } .container img {width: 200px; Tinggi: 90px; } .container ul {List-style: none; Margin: 0; Padding: 0; } .container ul li {float: left; margin-kanan: 10px; } .container .imgbigbox {width: 33000px; margin-kiri: 0px; } .imgbigbox: After {Content: ""; Tampilan: Blok; jelas: keduanya; } .btngroup {border: 1px solid #888; Lebar: 65px; } .btngroup a {text-align: center; Line-Height: 20px; Dekorasi Teks: Tidak Ada; Warna: #888; font-size: 20px; Tampilan: blok inline; Lebar: 30px; } .btn1 {margin-right: 4px; Border-Right: 1px Solid #888; } </style> <!-Mengutip fungsi gerak-> <script type = "text/javascript" src = "domove.js"> </cript> <script type = "text/javascript"> window.onload = function () {/*Calling function untuk mencapai geser*/slide (". Container"); } function slide (name) {var ocontainer = document.queryselector (name); var oimgbigbox = ocontainer.queryselector (". Imgbigbox"); var abtn = ocontainer.queryselectorall (". Btngroup A"); var oc_wrap = ocontainer.queryselector (". c-wrap"); /*Dapatkan lebar geser*/ var w = oc_wrap.offsetWidth; /*Klik tombol kiri*/ abtn [0] .onClick = function () {domove (oimgbigbox, "marginleft", 10, -w, function () {var child = oimgbigbox.children [0] .clonenode (true); oimgbigbox.apendchild (anak); oimgbigbox.removechild (oimgbigbox.children [0]); oimgbigbox.insertbefore (oimgbigbox.children [1], oimgbigbox.children [0]); oimgbigbox.style.marginleft = -w+"px"; domove (oimgbigbox, "marginleft", 10,0)}} </script> </head> <body> <div> <div> <viv> <ul> <li> <img src = "1.jpg"> </li> <li> <img src = "2.jpg"> </li> <li> <li> <img src = "2.jpg"> </li> <li> <li> <img src = "2.jpg"> </li> <li> <li><img src="4.jpg"></li> <li><img src="5.jpg"></li> <li><img src="6.jpg"></li> </ul> </div> </div> <div> <a href="javascript:;"></a> </div> </div></body></html>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.