สามเณรเรียนรู้ผลการบัฟเฟอร์จากฉัน

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-17 09:27:41

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

รันกล่องรหัส
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" content-type "content =" text/html; ชื่อเรื่อง> </head> <style> ร่างกาย {Font-Size: 12px} #box {พื้นหลัง: #FFFCC; มาร์จิ้น: 2px; bt_down {พื้นหลัง: #dddce4 url (/u/info_img/2009-06/20/arrow_down.gif) ไม่มีการทำซ้ำ 35px 46%; my_ {พื้นหลัง: #dddce4; #MY. MY_ UL LI {ความกว้าง: 48%; Y: Hidden; Overflow-X: Hidden; 3px;} </style> <script> // ฉันจะไม่แสดงความคิดเห็นเกี่ยวกับรายการซ้ำด้านล่าง ~~ // เร็วที่จะช้าจากการทำงานช้าลง // ประกาศฟังก์ชั่น f_s () ฟังก์ชั่น f_s () {var obj = เอกสาร GetElementById ("Box"); // รับ Object obj.style.display = "block"; // ตั้งค่า obj เพื่อแสดง obj.style.width = "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) // การโทรเปลี่ยนทุก ๆ 0.001 วินาที} // ช้าไปอย่างรวดเร็วจากช้าไปสู่เร็ว // ประกาศฟังก์ชั่น s_f () ฟังก์ชั่น s_f () {var obj = document.getElementById () "Box2"); ฟังก์ชั่นจะนับโดยตรงและเก็บไว้ในตัวแปรเปลี่ยน var obj_w; e_add obj_w = parseint (obj.style.width); e_add*= 1.05; // ค่าที่เพิ่มขึ้น .width = (obj_w+e_add)+"px"; // เมื่อความกว้างเพิ่มขึ้นการเพิ่มขึ้นจะมีขนาดใหญ่ขึ้นและใหญ่กว่า} อื่น {clearinterval (bw); E_ADD) วิธีการคำนวณนี้จะเกินความกว้างที่กำหนดไว้ล่วงหน้าดังนั้นมันจะรีเซ็ตความกว้างหลังจากบัฟเฟอร์ {var obj = document.getElementById (id); // รับวัตถุด้วย id ของกล่อง obj.style.width = w; > 1) {obj.style.width = (obj_w-math.ceil (obj_w)/20)+"px"; // คำนวณความกว้างของวัตถุ - - เมื่อความกว้างเพิ่มขึ้นการเพิ่มขึ้นจะเล็กลงและเล็กลง} lement {ClearInterval (BW); // ฟังก์ชั่นต่อไปนี้คือการเปิดฟังก์ชั่น↓ของฉัน open_my () {var obj = document.getElementById ("My _"); // รับวัตถุด้วย id ของ Box Obj.style.display = "block"; // set object obj เพื่อแสดง obj.style.width = "1px"; ประเภทของชั้นเรียนหรือต้นแบบทำให้ฉันปวดหัวอย่างมาก ; // แปลงความกว้างของวัตถุเป็นค่าตัวเลขและเก็บไว้ในตัวแปร obj_w; ค่าน้อยกว่า 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"; มีค่ามากกว่าหรือเท่ากับ 600 setInterval จะไม่ถูกดำเนินการอีกต่อไปซึ่งหมายความว่าความกว้างจะหยุดในเวลานี้ }} var bw = window.setInterval (ChangeW, 1) // การโทรเปลี่ยนทุก ๆ 0.001 วินาที} // ฟังก์ชั่นต่อไปนี้ปิดฟังก์ชั่นเลเยอร์ close_my (id) {var obj = document.getElementById (id); // รับวัตถุ กับกล่อง id var function = function () {var obj_w = parseint (obj.style.width); = (obj_w-math.ceil (obj_w)/20)+"px"; // คำนวณความกว้างของวัตถุ - - เมื่อความกว้างเพิ่มขึ้นการเพิ่มขึ้นจะเล็กลงและเล็กลง Obj.style.height = (obj_h-math.ceil (obj_h)/15)+"px"; ";}} var bw = window.setInterval (clostiv, 1) // การโทรเปลี่ยนทุก ๆ 0.001 วินาที} </script> <body> ก่อนอื่นฉันอยากจะบอกว่าบทความเหล่านี้ทุ่มเทให้กับสิ่งเหล่านี้ ใครเรียน. <br /> <br /> เพื่อนหลายคนในฟอรัมได้โพสต์เอฟเฟกต์บัฟเฟอร์ แต่การดูรหัสของพวกเขาอย่างฉันเป็นความเจ็บปวดจริง ๆ เพราะมันไม่ได้อยู่ในระดับเดียวกัน <br /> <br /> ดังนั้น ฉันใช้รหัสที่ซ้ำซ้อนที่สุดในการเขียนเอฟเฟกต์นี้โดยหวังว่าเราจะเข้าใจได้ <br /> <br /> เมื่อเราไม่ได้ระยำเราจะมองย้อนกลับไปที่สิ่งของของอาจารย์ ในที่สุดโปรดเชื่อประโยคนี้: <br /> <br /> วันหนึ่งฉันจะกลายเป็นอาจารย์ (หากคุณต้องทำงานหนักฮ่าฮ่า ^^) <br /> <br /> <a href = "#" onclick = "f_s ()"> จากเร็วถึงช้า </a> & nbsp; & nbsp; <br /> <br /> <a href = "#" onclick = "s_f (); </a> & nbsp; & nbsp; <br /> <br /> <div id = "box"> <h3> fast-> slow <a href = "#" onclick = "closew ('box', '600px' ) "> [ปิด] </a> </h3> </div> <div id =" box2 "> <h3> slow-> fast <a href ="#"onclick =" closew ('box2', ' 600px ') "> [ปิด] </a> </h3> </viv> <h3> เนื่องจากเราได้ทำเอฟเฟกต์นี้เราจึงต้องนำไปใช้กับสถานการณ์จริง </h3> <h3> ตอนนี้ลองมาดูกันเลย ดูแอปพลิเคชันจริงของเอฟเฟกต์บัฟเฟอร์ < /h3> <div id = "my"> <a href = "#" class = "bt_down" onmouseover = "open_my ()"> 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> เพื่อนของฉัน <li> /li> <li> พื้นที่ของฉัน </li> <li> <a href = "#" onclick = "close_my ('my _')"> ปิด </a> </li> </ul> </div> </div> <br /> <br /> <div id = "s_img" style = "ความกว้าง: 430px;"> <div id = "imgs" style = "ความกว้าง: 1700px;"> <ul> <li> <img src = "/u/info_img/2009-06/20/work_577_8421_20080902_112516_6677857_T.JPG"/> </li> <li> 48_1164245_T.JPG " / > </li> <li> <img src = "/u/info_img/2009-06/20/work_291488_8330_20080829_151402_6235352_t.jpg"/> </li> /20/work_577_8423_20080902_115301_643310_T.jpg "/> </li> <li> <img src ="/u/info_img/2009-06/20 src = " /u/info_img/2009-06/20/work_387129_8408_20080901_180829_5234680_T.png "/> </li> <li> 8349305_T.JPG " /> </li> <li> <img src = "/u/info_img/2009-06/20/work_202433_8401_20080901_163123_1710510_T.JPG"/> </li> #"onclick =" scrol (); BR /> แน่นอนเอฟเฟกต์ข้างต้นเป็นเพียงสิ่งที่ฉันใช้เพื่อแสดงเอฟเฟกต์บัฟเฟอร์ <br /> <br /> มันไม่เหมาะสำหรับผลกระทบนี้เป็นเพราะฟังก์ชั่นที่ฉันเขียนที่นี่จะถูกถ่ายโอนเพียงครั้งเดียว < br /> <br /> ถ้าคุณใช้วิธีนี้หลายครั้งดูเหมือนว่ามันจะไม่ง่ายที่จะบรรลุ <br /> <br /> ในที่สุดฉันจะบอกว่าอย่าเป็นรหัสของฉันที่นี่กลัว <br /> <br /> ดูเหมือนว่ามีรหัสจำนวนมากส่วนใหญ่เป็นเพราะทั้งสองคอลัมน์ด้านล่างทำให้รหัสดูมาก <br /> <br /> สิ่งที่สำคัญจริงๆคือ f_s (), s_f () , close () <br /> <br /> หากคุณเข้าใจได้คุณสามารถเรียนรู้ได้จากมัน <br /> <br /> นั่นคือทั้งหมดที่ฉันหวังว่าสิ่งเหล่านี้จะช่วยคุณได้บ้าง ^^ <br /> <br /> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; /> <script type = "text/javascript"> function error () {var obj = document.getElementById ("S_IMG"); obj.scrollleft <obj_w) {obj.scrollleft = (obj.scrollleft+math.ceil ((obj_w-obj.scrollleft)/15)); , 1)} ฟังก์ชั่น scrol () {var obj = document.getElementById ("s_img"); .Scrollleft- = Math.Ceil (OBJ_W)/50; } </script> </body> </html>
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อนจากนั้นกด Run]

สำหรับรหัสคีย์โปรดอ่านสองรายการนี้:

ฟังก์ชั่น f_s () {
var obj = document.getElementById ("box"); // รับวัตถุด้วยกล่อง ID
obj.style.display = "block"; // ตั้งค่า obj obj เป็นจอแสดงผล
obj.style.width = "1px";
var changew = function () {// (เกี่ยวกับฟังก์ชั่นการปิดสิ่งที่คลาสประเภทต้นแบบฉันทำให้ฉันรู้สึกท่วม และใส่ลงไปในนั้นจะถูกเก็บไว้ในตัวแปรที่เปลี่ยนแปลง)
var obj_w = parseint (obj.style.width); // แปลงความกว้างของวัตถุเป็นค่าตัวเลขและเก็บไว้ในตัวแปร obj_w;
ถ้า (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) // การโทรเปลี่ยนทุกครั้ง 0.001 วินาที
-

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