มือใหม่ เรียนรู้เอฟเฟกต์บัฟเฟอร์จากฉัน

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-20 16:54:28

ก่อนอื่น สิ่งที่ฉันอยากจะพูดก็คือ ฉันเป็น และบทความเหล่านี้จัดทำขึ้นสำหรับผู้ที่ต้องการเรียนรู้เช่นฉัน เพื่อนหลายคนในฟอรัมได้โพสต์เอฟเฟกต์การบัฟเฟอร์ แต่มันเจ็บปวดมากสำหรับฉันที่จะอ่านโค้ดของพวกเขา เนื่องจากมันไม่ได้อยู่ในระดับเดียวกัน ผมจึงใช้โค้ดที่ซ้ำซ้อนที่สุดในการเขียนเอฟเฟกต์นี้ จุดประสงค์คือเพื่อหวังว่าคุณจะเข้าใจมัน เมื่อเราไม่เก่ง เราจะกลับไปดูเรื่องของ ท่านอาจารย์ ในที่สุด โปรดเชื่อประโยคนี้:
วันหนึ่งคุณจะกลายเป็นผู้เชี่ยวชาญ (ถ้าคุณทำงานหนัก ฮ่าๆ^^)

เรียกใช้กล่องรหัส
<!DOCTYPE html สาธารณะ "-//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//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>เอกสารที่ไม่มีชื่อ</ title> </head> <style> body { ขนาดตัวอักษร: 12px } #box { พื้นหลัง: #FFFFCC; border: 1px solid # FFCC66; width: 100px; display: none; ขอบ: 2px; ล้น: ซ่อนอยู่} #box2 { พื้นหลัง: #CDEDEC; border: 1px solid #3399CC; width: 100px; display: none; text-align: right; bt_down {พื้นหลัง: #DDDCE4 url(/u/info_img/2009-06/20/arrow_down.gif) ไม่ซ้ำ 35px 46%; padding:5px 20px 5px 5px; text-align:left} #my {} #my my_ { พื้นหลัง:#DDDCE4; width:200px; #my .my_ ul li { ความกว้าง:48%; ลอย:center; line-height:22px; border-bottom:1px solid #s_img { width:430px; y:hidden;overflow-x:hidden; border:1px solid #ccc} #imgs ul { list-style:none; ระยะขอบซ้าย:0} #imgs ul li {float:left; 3px;} </style> <script> //ฉันจะไม่แสดงความคิดเห็นเกี่ยวกับสิ่งที่คล้ายกันซึ่งทำซ้ำด้านล่าง~~ //เร็วไปช้า //ประกาศฟังก์ชัน f_s() ฟังก์ชั่น f_s(){ var obj= document.getElementById( "box"); //รับวัตถุด้วยกล่อง ID obj.style.display="block"; //ตั้งค่าวัตถุ obj ให้แสดง obj.style.width="1px"; //ตั้งค่าวัตถุ obj คือ 1px var changeW=function(){ //(เกี่ยวกับฟังก์ชัน การปิด คลาส และต้นแบบ มันทำให้ฉันหัวโต ฉันจะเข้าใจทีหลัง สิ่งที่ฉันเข้าใจที่นี่คือการสร้างฟังก์ชันลิเทอรัลและเก็บไว้ในตัวแปร changeW) var obj_w=parseInt(obj.style.width);//แปลงความกว้างของวัตถุให้เป็นค่าตัวเลขและเก็บไว้ในตัวแปร obj_w; if (obj_w<600){ //ตัดสิน ถ้าค่าความกว้างน้อยกว่า 600 obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//คำนวณ ความกว้างของวัตถุ - - เมื่อความกว้างยาวขึ้น การเพิ่มขึ้นจะน้อยลงเรื่อยๆ } else{ clearInterval(bw);//หากมากกว่าหรือเท่ากับ 600 setInterval จะไม่ถูกดำเนินการอีกต่อไป ซึ่งหมายความว่าความกว้างจะหยุดเพิ่มขึ้นในเวลานี้ . } } var bw=window.setInterval(changeW,1)//เรียกการเปลี่ยนแปลงทุกๆ 0.001 วินาที } //ช้าไปเร็ว //ประกาศฟังก์ชัน s_f() ฟังก์ชั่น s_f(){ var obj=document.getElementById ("box2") ; var e_add=1;//Initialization in allowance obj.style.display="block"; obj.style.width="1px"; var changeW=function(){//สิ่งที่ฉันเข้าใจคือการสร้างฟังก์ชัน A และเก็บไว้ในตัวแปร changeW var obj_w;e_add obj_w=parseInt(obj.style.width); e_add*=1.05;//ค่าที่จะเพิ่มขึ้นในแต่ละครั้งหลังจากนั้นคือ if(obj_w<600){ obj .style. width=(obj_w+e_add)+"px";//เมื่อความกว้างยาวขึ้น การเพิ่มขึ้นก็จะมากขึ้นเรื่อยๆ} else{ clearInterval(bw); obj.style.width="600px";// เนื่องจากวิธีการคำนวณ ของ (obj_w+e_add) จะเกินความกว้างที่กำหนดไว้ล่วงหน้า ดังนั้นความกว้างของมันจะถูกรีเซ็ตหลังจากการบัฟเฟอร์ สิ่งนี้สร้างภาพลวงตา ฮ่าฮ่า} } var bw=window.setInterval(changeW,1) } // ปิดฟังก์ชันเลเยอร์ closeW(id,w) { var obj=document.getElementById(id);//รับวัตถุที่มีกล่อง ID obj.style.width=w; var closeDiv=function(){ var obj_w=parseInt(obj.style.width); if(obj_w> 1){ obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//คำนวณความกว้างของวัตถุ - - เมื่อความกว้างเพิ่มขึ้น การเพิ่มขึ้นจะน้อยลงเรื่อยๆ} else{ clearInterval(bw); obj.style.display="none"; } } var bw=window.setInterval(closeDiv,1)//Call ทุก 0.001 วินาที changeW } //ฟังก์ชันต่อไปนี้คือการเปิดฟังก์ชัน ↓ ของฉัน open_my(){ var obj=document.getElementById("my_");//รับวัตถุที่มีกล่อง ID obj.style.display="block";// Set วัตถุ obj เพื่อแสดง obj.style.width="1px"; //ตั้งค่าความกว้างของวัตถุ obj เป็น 1px obj.style.height="1px"; var changeW=function() {//(เกี่ยวกับฟังก์ชัน สิ่งที่การปิด คลาส และต้นแบบทำให้ฉันสับสน ฉันจะเข้าใจในภายหลัง สิ่งที่ฉันเข้าใจที่นี่คือการสร้างฟังก์ชันลิเทอรัลและเก็บไว้ในตัวแปร changeW) var obj_w=parseInt(obj.style.width);//Convert ความกว้างของวัตถุเป็นค่าตัวเลขและเก็บไว้ในตัวแปร obj_w; var obj_h=parseInt(obj.style.height); if(obj_w<200 && obj_h<150){ //ตัดสิน ถ้าความกว้าง ค่าคือ น้อยกว่า 600 obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//คำนวณความกว้างของวัตถุ - - เมื่อความกว้างยาวขึ้น ค่าที่เพิ่มขึ้นจะน้อยลงเรื่อยๆ obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px"; } else{ clearInterval(bw);// If มากกว่าหรือเท่ากับ 600 setInterval จะไม่ถูกดำเนินการอีกต่อไป ซึ่งหมายความว่าความกว้างจะหยุดเพิ่มขึ้นในขณะนี้ } } var bw=window.setInterval(changeW,1)//เรียกการเปลี่ยนแปลงทุกๆ 0.001 วินาที } //ฟังก์ชันต่อไปนี้คือการปิดฟังก์ชันเลเยอร์ที่แสดง ↓ ของฉัน close_my(id){ var obj=document.getElementById(id );/ /รับวัตถุที่มีกล่อง ID var closeDiv=function(){ var obj_w=parseInt(obj.style.width); var obj_h=parseInt(obj.style.height); if(obj_w>1 && obj_h >1 ){ obj .style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//คำนวณความกว้างของวัตถุ - - เมื่อความกว้างยาวขึ้น ค่าที่เพิ่มขึ้นจะน้อยลงเรื่อยๆ obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px"; } else{ clearInterval(bw); none"; } } var bw=window.setInterval(closeDiv,1)//Call changeW ทุก ๆ 0.001 วินาที } </script> <body> ก่อนอื่นเลย ฉันอยากจะบอกว่าบทความเหล่านี้มีไว้สำหรับคนที่ต้องการสิ่งเดียวกัน สิ่งที่เหมือนกับฉัน ผู้ที่กำลังเรียนรู้<br /><br /> เพื่อนหลายคนในฟอรัมได้โพสต์เอฟเฟกต์การบัฟเฟอร์ แต่ฉันเจ็บปวดมากที่ต้องดูรหัสของพวกเขาเพราะพวกเขาไม่ได้อยู่ในระดับเดียวกัน<br / <br />ผมจึงใช้โค้ดที่ซ้ำซ้อนที่สุดในการเขียนเอฟเฟกต์นี้ จุดประสงค์คือ หวังว่าคนจะเข้าใจ<br /><br />เมื่อเราไม่เก่งเราจะกลับไปดู เรื่องของนาย <br /><br /> สุดท้ายนี้ โปรดเชื่อประโยคนี้:<br /><br /> สักวันหนึ่งนายจะต้องเป็นนาย (ถ้านายทำงานหนัก 555)<br / ><br /> < a href="#" onclick="f_s()">จากเร็วไปช้า</a>  <br /><br /> <a href="#" onclick=" s_f(); return false ">จากช้าไปเร็ว</a>  <br /><br /> <div id="box" ><h3>เร็ว->ช้า<a href="#" onclick="closeW(' box','600px')">[ปิด]</a></h3></div> <div id="box2" ><h3>ช้า->เร็ว<a href=" #" onclick="closeW ('box2','600px')">[ปิด]</a></h3></div> <h3>ตอนนี้เราได้สร้างเอฟเฟกต์นี้แล้ว เราจะต้องนำไปใช้เพื่อฝึกฝน< /h3 > <h3>ตอนนี้เรามาดูการใช้งานจริงของเอฟเฟกต์การบัฟเฟอร์</h3> <div id="my"> <a href="#" class="bt_down" onmouseover="open_my()" >ของฉัน< /a> <div class="my_" id="my_" > <ul> <li>หัวข้อของฉัน</li> <li>คอลเลกชันของฉัน</li> <li>สิทธิ์ของฉัน</li> < li>คะแนนของฉัน</li> <li>กิจกรรมของฉัน</li> <li>เมืองของฉัน</li> <li>ผลงานของฉัน</li> <li>ที่อยู่ของฉัน</li> < li>ความเชี่ยวชาญของฉัน< /li> <li>เพื่อนของฉัน</li> <li>พื้นที่ของฉัน</li> <li><a href="#" onclick="close_my('my_')"> ปิด</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- 06/20/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_98782 35_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">เลื่อนไปทางซ้าย</a> <a href="#" onclick="scror() ; return false">เลื่อน ขวา</a><br /><br /> แน่นอนว่าฉันใช้เอฟเฟกต์ข้างต้นเพื่อสาธิตเอฟเฟกต์บัฟเฟอร์เท่านั้น<br /><br /> มันไม่เหมาะกับเอฟเฟกต์ประเภทนี้ เพราะฟังก์ชั่นที่ผมเขียนไว้นี่จะถูกโอนเพียงครั้งเดียว<br /><br /> ดูเหมือนใช้วิธีนี้หลายครั้งไม่ง่ายนัก<br /><br /> สุดท้ายนี้ขอบอกว่าอย่า โดนหลอก โค้ดที่นี่ทำให้ฉันกลัว<br /><br />ดูเหมือนโค้ดจะเยอะมาก สาเหตุหลักมาจาก 2 ตัวอย่างหลังสุดซึ่งทำให้โค้ดดูเยอะมาก<br /><br /> อะไรนะ สิ่งสำคัญจริงๆ คือ f_s(), s_f (),closeW()<br /><br /> หากคุณเข้าใจได้ คุณก็ยังสามารถอนุมานได้<br /><br /> แค่นั้นแหละสำหรับวันนี้ หวังว่าสิ่งเหล่านี้จะช่วยคุณได้ ;            <br /> <script type="text/javascript"> ฟังก์ชั่น scror(){ var obj=document.getElementById(" s_img"); var h=function(){ 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) } ฟังก์ชัน scroll(){ var obj=document.getElementById("s_img"); (){ var obj_w=parseInt(obj.style.width); if(obj.scrollLeft>1) { obj.scrollLeft-=Math.ceil(obj_w)/50; } อื่น ๆ { clearInterval(bw } } var =window.setInterval(h,1) //obj.scrollLeft-=parseInt(obj.style.width ); } </script> </body> </html>
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อน จากนั้นจึงกด Run]

โปรดดูโค้ดสำคัญทั้งสองนี้:

ฟังก์ชัน f_s(){
var obj=document.getElementById("box");//รับวัตถุที่มีกล่อง ID
obj.style.display="block";//ตั้งค่าวัตถุ obj ที่จะแสดง
obj.style.width="1px"; //กำหนดความกว้างของวัตถุ obj เป็น 1px
var changeW=function(){ //(เกี่ยวกับฟังก์ชั่น, ปิดอะไร, คลาสไหน, ต้นแบบอะไร ทำให้หัวโต คราวหน้าจะเข้าใจอย่างช้าๆ สิ่งที่ผมเข้าใจตรงนี้คือสร้างฟังก์ชั่นมาวัดและ วางไว้ในตัวแปร changeW)
var obj_w=parseInt(obj.style.width);//แปลงความกว้างของวัตถุให้เป็นค่าตัวเลขและเก็บไว้ในตัวแปร obj_w;
if(obj_w<600){ //ตัดสิน ถ้าค่าความกว้างน้อยกว่า 600
obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//คำนวณความกว้างของวัตถุ - - เมื่อความกว้างยาวขึ้น การเพิ่มขึ้นก็จะน้อยลงเรื่อยๆ
-
อื่น{
clearInterval(bw);//หากมากกว่าหรือเท่ากับ 600 setInterval จะไม่ถูกดำเนินการอีกต่อไป ซึ่งหมายความว่าความกว้างจะหยุดเพิ่มขึ้นในขณะนี้
-
-
var bw=window.setInterval(changeW,1)//เรียก changeW ทุก ๆ 0.001 วินาที
}

// ช้าไปเร็ว จากช้าไปเร็ว
//ประกาศฟังก์ชัน s_f()
ฟังก์ชั่น s_f(){
var obj=document.getElementById("box2");
var e_add=1;//การเพิ่มการเริ่มต้น
obj.style.display="บล็อก";
obj.style.width="1px";
var changeW=function(){//สิ่งที่ฉันเข้าใจคือการสร้างฟังก์ชันลิเทอรัลและเก็บไว้ในตัวแปร changeW
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//ค่าของการเพิ่มขึ้นแต่ละครั้งคือ
ถ้า(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//เมื่อความกว้างยาวขึ้น การเพิ่มขึ้นก็จะมากขึ้นเรื่อยๆ
-
อื่น{
ชัดเจนช่วง(bw);
obj.style.width="600px";//เนื่องจาก (obj_w+e_add) วิธีการคำนวณนี้จะเกินความกว้างที่กำหนดไว้ล่วงหน้า ความกว้างจึงถูกรีเซ็ตหลังจากการบัฟเฟอร์ สิ่งนี้ทำให้เกิดภาพลวงตา 555
-
-
var bw=window.setInterval(changeW,1)
-