أيها المبتدئ، تعلم مني تأثير التخزين المؤقت

الكاتب：Eve Cole وقت التحديث：2009-06-20 16:54:28

بادئ ذي بدء، ما أريد قوله هو أنني كذلك، وهذه المقالات مخصصة لأولئك الذين يريدون التعلم مثلي، وقد نشر العديد من الأصدقاء في المنتدى تأثيرات التخزين المؤقت، ولكن من المؤلم حقًا بالنسبة لي قراءة الكود الخاص بهم. نظرًا لأنهم ليسوا على نفس المستوى، فأنا أستخدم الكود الأكثر تكرارًا لكتابة هذا التأثير، والغرض من ذلك هو أن نأمل أن تتمكن من فهمه، وسنعود ونلقي نظرة على الأشياء أخيرا يا سادة، أرجو أن تصدقوا هذه الجملة:
يومًا ما ستصبح سيدًا (بشرط أن تعمل بجد هاها ^^)

تشغيل مربع التعليمات البرمجية
<!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>مستند بدون عنوان</ title> </head> <style> body { Font-size:12px} #box { border:#FFFFCC; border:1px Solid #FFCC66; الهامش:2px; overflow:hidden} #box2 { الخلفية:#CDEDEC; border:1px Solid #3399CC; bt_down {background: #DDDCE4 url(/u/info_img/2009-06/20/arrow_down.gif) no-repeat 35px 46%; my_ { الخلفية: #DDDCE4; العرض: 200 بكسل; الارتفاع: 150 بكسل; العرض: لا شيء: مخفي; #my .ul li { width:48%; y:hidden;overflow-x:hidden; border:1px Solid #ccc} #imgs ul { list-style:none; 3px;} </style> <script> // لن أعلق على تلك المشابهة المكررة أدناه ~~ // سريع إلى بطيء // أعلن عن وظيفة f_s() function f_s(){ var obj= document.getElementById( "box"); // احصل على الكائن بمربع المعرف obj.style.display="block"; // قم بتعيين الكائن obj لعرضه obj.style.width="1px"; هو 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() function 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);// القيمة التي ستزداد في كل مرة بعد ذلك هي 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);// احصل على الكائن بالمعرف 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)// اتصل كل 0.001 ثانية. ChangeW } // الوظيفة التالية هي فتح ↓ function open_my(){ var obj=document.getElementById("my_");// احصل على الكائن بمربع المعرف 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);//تحويل عرض الكائن إلى قيمة رقمية وتخزينه في المتغير obj_w var obj_h=parseInt(obj.style.height); أقل من 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 ثانية } // الوظيفة التالية هي إغلاق الطبقة المعروضة ↓ function Close_my(id){ var obj=document.getElementById(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";// احسب عرض الكائن. . . عندما يصبح العرض أطول، تصبح الزيادة أصغر فأصغر obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px" } else{ ClearInterval(bw); none"; } } var bw=window.setInterval(CloseDiv,1)// اتصل بـ ChangeW كل 0.001 ثانية } </script> <body> أولاً وقبل كل شيء، أريد أن أقول إن هذه المقالات مخصصة للأشخاص الذين يريدون نفس الشيء أشياء مثلي أولئك الذين يتعلمون.<br /><br /> قام العديد من الأصدقاء في المنتدى بنشر تأثيرات التخزين المؤقت، ولكن من المؤلم حقًا بالنسبة لي أن أنظر إلى أكوادهم لأنها ليست على نفس المستوى.<br / ><br />لذلك أستخدم الكود الأكثر تكرارًا لكتابة هذا التأثير، والغرض من ذلك هو أن أتمنى أن يتمكن الناس من فهمه،<br /><br />عندما لا نجيد ذلك، سنعود وننظر في أشياء الأساتذة. <br /><br /> وأخيراً، من فضلك صدق هذه الجملة:<br /><br /> في يوم من الأيام ستصبح سيداً، (شريطة أن تعمل بجد هاها^^)<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')">[Close]</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 _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 /></" لي> </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 />يبدو أنه يحتوي على الكثير من التعليمات البرمجية، ويرجع ذلك أساسًا إلى المثالين الأخيرين، مما يجعل الكود يبدو كثيرًا<br /><br /> ماذا المهم حقًا هو f_s(), s_f (),إغلاقW()<br /><br /> إذا كنت تستطيع فهمه، فيمكنك أيضًا استخلاص الاستدلالات.<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) } function التمرير(){ var obj=document.getElementById("s_img"); (){ var obj_w=parseInt(obj.style.width); if(obj.scrollLeft>1) { obj.scrollLeft-=Math.ceil(obj_w)/50; =window.setInterval(h,1) //obj.scrollLeft-=parseInt(obj.style.width } } </script> </body> </html>
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل جزء من الكود أولاً، ثم الضغط على تشغيل]

يرجى إلقاء نظرة على هذين الرمزين الرئيسيين:

// بطيء إلى سريع من بطيء إلى سريع
// أعلن عن وظيفة 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
فار 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";// عندما يصبح العرض أطول، تصبح الزيادة أكبر وأكبر
}
آخر{
ClearInterval(bw);
obj.style.width="600px";// لأن (obj_w+e_add) ستتجاوز طريقة الحساب هذه العرض المحدد مسبقًا، لذا تتم إعادة تعيين عرضه بعد التخزين المؤقت، وهذا يخلق وهمًا هاها
}
}
فار bw=window.setInterval(changeW,1)
}