Rookie, pelajari efek buffering dari saya

Penulis：Eve Cole Waktu Pembaruan：2009-06-20 16:54:28

Pertama-tama, yang ingin saya katakan adalah memang demikian, dan artikel ini didedikasikan untuk mereka yang ingin belajar seperti saya. Beberapa teman di forum telah memposting efek buffering, tetapi sangat menyakitkan bagi saya untuk membaca kode mereka. Karena mereka tidak berada pada level yang sama, saya menggunakan kode yang paling berlebihan untuk menulis efek ini. Tujuannya adalah agar Anda dapat memahaminya master. Terakhir, mohon percaya kalimat ini:
Suatu hari nanti kamu akan menjadi master, (asalkan kamu bekerja keras haha^^)

Jalankan kotak kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dokumen Tanpa Judul</ judul> </head> <gaya> badan { ukuran font:12px} #kotak { latar belakang:#FFFFCC; batas:1px padat #FFCC66; margin:2px; luapan:tersembunyi} #kotak2 { latar belakang:#CDEDEC; batas:1px padat #3399CC; lebar:600px; tinggi:100px;tampilan:tidak ada;perataan teks:kanan; bt_down {latar belakang: #DDDCE4 url(/u/info_img/2009-06/20/arrow_down.gif) tanpa pengulangan 35px 46%; padding:5px 20px 5px 5px; my_ { latar belakang:#DDDCE4; lebar:200px tinggi:150px; tampilan:tidak ada; luapan:tersembunyi} #saya .my_ ul{ gaya daftar:tidak ada:0; #my .my_ ul li { lebar:48%; float:kiri; perataan teks:tengah; tinggi garis:22px; batas bawah:1px padat #B6B6C0} #s_img { lebar:430px overflow:scroll; y:tersembunyi;overflow-x:tersembunyi; perbatasan:1px solid #ccc} #imgs ul { gaya daftar:tidak ada; margin-kiri:0; padding-kiri:0} #imgs ul li{ float:margin kiri: 3px;} </style> <script> //Saya tidak akan mengomentari hal serupa yang diulangi di bawah~~ //cepat ke lambat //Deklarasikan suatu fungsi f_s() function f_s(){ var obj= document.getElementById( "box"); //Dapatkan objek dengan ID kotak obj.style.display="block"; //Setel objek obj agar ditampilkan obj.style.width="1px"; is 1px var changeW=function(){ //(Tentang fungsi, penutupan, kelas, dan prototipe, itu membuat kepalaku besar. Aku akan memahaminya nanti. Yang saya pahami di sini adalah membuat fungsi literal dan menyimpannya di variabel changeW) var obj_w=parseInt(obj.style.width);//Ubah lebar objek menjadi nilai numerik dan simpan di variabel obj_w; if (obj_w<600){ //Hakim, jika nilai lebarnya kurang dari 600 obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//Hitung lebar objek. . . Saat lebarnya semakin panjang, pertambahannya menjadi semakin kecil } else{ clearInterval(bw);//Jika lebih besar dari atau sama dengan 600, setInterval tidak akan dijalankan lagi, yang berarti lebarnya akan berhenti bertambah saat ini . } } var bw=window.setInterval(changeW,1)//Panggil changeW setiap 0,001 detik } //lambat ke cepat //Deklarasikan suatu fungsi s_f() function s_f(){ var obj=document.getElementById ("box2") ; var e_add=1;//Peningkatan inisialisasi obj.style.display="block"; obj.style.width="1px"; var changeW=function(){//Yang saya pahami adalah membuat fungsi A membutuhkan arahan nilai dan menyimpannya dalam variabel changeW var obj_w;e_add obj_w=parseInt(obj.style.width);//Nilai yang akan meningkat setiap kali setelahnya adalah if(obj_w<600){ obj .style. width=(obj_w+e_add)+"px";//Semakin panjang lebarnya, pertambahannya menjadi semakin besar} else{ clearInterval(bw); obj.style.width="600px";// Karena metode perhitungannya of (obj_w+e_add) akan melebihi lebar yang telah ditentukan, sehingga lebarnya direset setelah buffering. Ini menciptakan ilusi haha} } var bw=window.setInterval(changeW,1) } // Tutup fungsi lapisan closeW(id,w) { var obj=document.getElementById(id);//Dapatkan objek dengan kotak ID obj.style.width=w; var closeDiv=function(){ var obj_w=parseInt(obj.style.width); 1){ obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//Hitung lebar objek. . . Saat lebarnya semakin panjang, kenaikannya menjadi semakin kecil} else{ clearInterval(bw); changeW } //Fungsi berikut ini untuk membuka ↓ function open_my(){ var obj=document.getElementById("my_");//Dapatkan objek dengan kotak ID obj.style.display="block";// Set objek obj yang akan ditampilkan obj.style.width="1px"; //Atur lebar objek obj menjadi 1px obj.style.height="1px"; var changeW=function(){ //(Tentang fungsi, Penutupan, kelas, dan prototipe apa yang membingungkan saya. Saya akan memahaminya nanti. Yang saya pahami di sini adalah membuat fungsi literal dan menyimpannya dalam variabel changeW) var obj_w=parseInt(obj.style.width);//Convert lebar objek menjadi nilai numerik dan menyimpannya dalam variabel obj_w; var obj_h=parseInt(obj.style.height); if(obj_w<200 && obj_h<150){ //Hakim, jika lebar Nilainya adalah kurang dari 600 obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//Hitung lebar objek. . . Saat lebarnya semakin panjang, kenaikannya menjadi semakin kecil obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px"; else{ clearInterval(bw);// If lebih besar dari atau sama dengan 600, setInterval tidak akan dijalankan lagi, yang berarti lebarnya akan berhenti bertambah saat ini. } } var bw=window.setInterval(changeW,1)//Panggil changeW setiap 0,001 detik } //Fungsi berikut ini untuk menutup ↓ fungsi lapisan yang saya tampilkan close_my(id){ var obj=document.getElementById(id );/ /Dapatkan objek dengan kotak ID var closeDiv=function(){ var obj_w=parseInt(obj.style.width); var obj_h=parseInt(obj.style.height); .style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//Hitung lebar objek. . . Saat lebarnya semakin panjang, pertambahannya menjadi semakin kecil obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px"; } else{ clearInterval(bw); none"; } } var bw=window.setInterval(closeDiv,1)//Panggil changeW setiap 0,001 detik } </script> <body> Pertama-tama, saya ingin mengatakan bahwa artikel ini didedikasikan untuk orang-orang yang menginginkan hal yang sama hal-hal seperti saya Mereka yang sedang belajar.<br /><br /> Beberapa teman di forum telah memposting efek buffering, tetapi sangat menyakitkan bagi saya untuk melihat kode mereka karena levelnya tidak sama.<br / ><br />Jadi saya menggunakan kode yang paling mubazir untuk menulis efek ini, tujuannya agar orang dapat memahaminya,<br /><br />Jika kita tidak pandai, kita akan kembali dan melihat pada hal-hal para master.<br /><br /> Terakhir, percayalah pada kalimat ini:<br /><br /> Suatu hari nanti kamu akan menjadi seorang master, (asalkan kamu bekerja keras haha^^)<br / ><br /> < a href="#" onclick="f_s()">Dari cepat ke lambat</a>  <br /><br /> <a href="#" onclick=" s_f(); return false ">Dari lambat ke cepat</a>  <br /><br /> <div id="box" ><h3>Cepat->Lambat<a href="#" onclick="closeW(' box','600px')">[Tutup]</a></h3></div> <div id="box2" ><h3>Lambat->Cepat<a href=" #" onclick="closeW ('box2','600px')">[Tutup]</a></h3></div> <h3>Sekarang kita telah membuat efek ini, kita harus menerapkannya dalam latihan< /h3 > <h3>Sekarang mari kita lihat penerapan sebenarnya dari efek buffering</h3> <div id="my"> <a href="#" class="bt_down" onmouseover="open_my()" >Saya< /a> <div class="my_" id="my_" > <ul> <li>Topik saya</li> <li>Koleksi saya</li> <li>Izin saya</li> < li>Pilihan saya</li> <li>Aktivitas saya</li> <li>Kota saya</li> <li>Pekerjaan saya</li> <li>Alamat saya</li> < li>Keahlian saya< /li> <li>Teman-temanku</li> <li>Ruangku</li> <li><a href="#" onclick="close_my('my_')"> Tutup</a></li > </ul> </div> </div> <br /> <br /> <div id="s_img" style="width:430px;"> <div id=" imgs" style="width:1700px ;"> <ul> <li><img src="/u/info_img/2009-06/20/work_577_8421_20080902_112516_6677857_t.jpg" /></li> <li><img src= "/u/info_img/2009- 20/06/work_352426_8413_20080901_201448_1164245_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_291488_8330_20080829_151 402_6235352_t.jpg" /></li > <li><img src ="/u/info_img/2009-06/20/work_577_8423_20080902_115301_643310_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_23709_8344_2008083 0_123900_9878235 _t .jpg" />< /li> <li><img src="/u/info_img/2009-06/20/work_387129_8408_20080901_180829_5234680_t.png" /></li> <li><img src="/u/info_img /2009-06/20 /work_443685_8362_20080831_093043_8349305_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_202433_8401_20080901_163123_1710 510_t.jpg" /></li> </ul> </div> < /div><br /> <a href="#" onclick="scrol(); return false">Gulir ke kiri</a> <a href="#" onclick="scror() ; return false">Gulir benar</a><br /><br /> Tentu saja, efek di atas hanya saya gunakan untuk mendemonstrasikan efek buffering.<br /><br /> Tidak cocok untuk efek seperti ini karena fungsi yang saya tulis di sini hanya akan ditransfer satu kali.<br /><br /> Tampaknya tidak mudah untuk menggunakan metode ini berkali-kali.<br /><br /> Terakhir, izinkan saya mengatakan, jangan tertipu. Kode di sini membuatku takut,<br /><br />Sepertinya banyak kode, terutama karena dua contoh terakhir, yang membuat kode terlihat banyak<br /><br /> Apa yang sangat penting adalah f_s(), s_f(),closeW()<br /><br /> Jika Anda bisa memahaminya, maka Anda juga bisa menarik kesimpulan.<br /><br /> Sekian untuk hari ini I semoga hal-hal ini dapat membantu Anda ^^<br /><br />                  ;            s_img"); var h=fungsi(){ var obj_w=parseInt(obj.style.width); if(obj.scrollLeft<obj_w){ obj.scrollLeft=(obj.scrollLeft+Math.ceil((obj_w-obj. scrollLeft)/15)); } else{ clearInterval(bw } } var bw=window.setInterval (h,1) } fungsi gulir(){ var obj=document.getElementById("s_img"); (){ var obj_w=parseInt(obj.style.width); if(obj.scrollLeft>1) { obj.scrollLeft-=Math.ceil(obj_w)/50; lain{ clearInterval(bw); =window.setInterval(h,1) //obj.scrollLeft-=parseInt(obj.style.width );
[Ctrl+A Semua tip pemilihan: Anda dapat memodifikasi sebagian kode terlebih dahulu, lalu tekan Jalankan]

Silakan lihat dua kode kunci ini:

//lambat ke cepat dari lambat ke cepat
//Deklarasikan suatu fungsi s_f()
fungsi s_f(){
var obj=dokumen.getElementById("kotak2");
var e_add=1;//Peningkatan inisialisasi
obj.style.display="blok";
obj.style.width="1px";
var changeW=function(){//Yang saya pahami adalah membuat fungsi literal dan menyimpannya dalam variabel changeW
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1,05;//Nilai setiap kenaikan berikutnya adalah
jika(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//Saat lebarnya semakin panjang, pertambahannya menjadi semakin besar
}
kalau tidak{
clearInterval(bw);
obj.style.width="600px";//Karena (obj_w+e_add) metode penghitungan ini akan melebihi lebar yang telah ditentukan, sehingga lebarnya disetel ulang setelah buffering
}
}
var bw=window.setInterval(perubahanW,1)
}