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

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

قم بتشغيل مربع الرمز
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 : //www.w3 title> </head> body {font-size: Margin: verdens} box2 BT_DOWN {background: #dddce4 url ​​(/U/INFO_IMG/2009-06/20/arrow_down.gif) no-repeat 46 ٪ ؛ My_ {Background: #My. Y: Hidden ؛ Overflow-X: Hidden ؛ 3px ؛} </style> <script> // لن أعلق على التكرارات أدناه ~~ // سريعًا لإبطاء من الصيام إلى البطيء // إعلان دالة f_s () f_s () {var obj = المستند. getElementByid ("Box") ؛ // احصل على الكائن OBJ.Style.Display = "block" ؛ var changew = function () {// (حول الوظيفة ، ما هو الإغلاق ، أي نوع من الفئات والنماذج الأولية ، لقد جعلتني أشعر بالإرهاق. دعونا نفهمها ببطء في المستقبل. ما أفهمه هنا هو إنشاء وظيفة مباشرة وتخزينها في تغيير المتغير) var obj_w = parseint (obj.style.width) ؛ // تحويل عرض الكائن إلى قيمة رقمية وتخزينها في المتغير OBJ_W ؛ if (obj_w <600) {// judge ، إذا كانت قيمة العرض أقل من 600 obj.style.width = (obj_w+math.ceil ((600-OBJ_W)/15))+"px" ؛ // حساب The the the عرض الكائن. . . مع نمو العرض ، تصبح الزيادة أصغر وأصغر} آخر {ClearInterval (BW) ؛ // إذا كان أكبر من أو تساوي 600 ، فلن يتم تنفيذ SetInterval ، مما يعني أن العرض سيتوقف عن الزيادة. }} var bw = window.setInterval (changew ، 1) // call changew كل 0.001 ثانية} // بطيئة إلى سريعة من البطيء إلى سريع // إعلان دالة s_f () دالة s_f () {var obj = document.getElementById ( "Box2") ؛ تعمل الدالة مباشرة وتخزينها في تغيير المتغير var obj_w ؛ e_add obj_w = parseint (obj.style.width) ؛ .WIDTH = (OBJ_W+E_ADD)+"PX" ؛ مع نمو العرض ، تصبح الزيادة أكبر وأكبر} {clearinterval (bw) ؛ E_ADD) سوف تتجاوز طريقة الحساب هذا العرض المحدد مسبقًا ، لذلك سيتم إعادة ضبط عرضه بعد التخزين المؤقت. {var obj = document.getElementById (id) ؛ // الحصول على الكائن مع مربع OBJ.STYLE.WIDTH = w ؛ > 1) {obj.style.width = (obj_w-math.ceil (obj_w)/20)+"px" ؛ // حساب عرض الكائن. . . مع نمو العرض ، تصبح الزيادة أصغر وأصغر} {clearinterval (bw) ؛ // الوظيفة التالية هي فتح وظيفة Open_My () {var obj = document.getElementById ("my _") ؛ // احصل 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))+"PX" ؛ أكبر من أو يساوي 600 ، لن يتم تنفيذ SetInterval ، مما يعني أنه سيتم إيقاف العرض في هذا الوقت. }} var bw = window.setInterval (changew ، 1) // call changew كل 0.001 ثانية} // تُغلق الدالة التالية وظيفة الطبقة introm_my (id) {var obj = document.getElementById (id) ؛ // الحصول على الكائن مع مربع المعرف var leariv =) {var obj_w = parseint (obj.style.width) ؛ = (OBJ_W-MATH.CEIL (OBJ_W)/20)+"PX" ؛ // حساب عرض الكائن. . . مع نمو العرض ، تصبح الزيادة أصغر وأصغر style "؛}} var bw = window.setinterval (مغلق ، 1) // call changew كل 0.001 ثانية} الذين يدرسون. <br /> <br /> قام العديد من الأصدقاء في المنتدى بنشر تأثيرات التخزين المؤقت ، ولكن النظر إلى الكود مثلي هو حقًا ألم لأنه ليس على نفس المستوى. <br /> <br /> لذلك أستخدم الكود الأكثر زائدة لكتابة هذا التأثير ، على أمل أن نتمكن من فهمه ، <br ​​/> <br /> عندما لا نمارس الجنس ، سننظر إلى الوراء في أشياء الماجستير أخيرًا ، يرجى تصديق هذه الجملة: <br /> <br /> يومًا ما سأصبح سيدًا ، (شريطة أن تعمل بجد haha ​​^^) <br /> <br /> <a href = "#" onClick = "f_s ()"> من سريع إلى بطيء </a> & nbsp ؛ & nbsp ؛ <br /> <br /> <a href = "#" onClick = "s_f () ؛ إرجاع false"> من البطيء إلى سريع </a> & nbsp ؛ & nbsp ؛ <br /> <br /> <div id = "box"> <h3> fast-> بطيئة <a href = "#" onClick = "closew ('box' ، '600px' ) "> [إغلاق] </a> </h3> </viv> <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> <a href = "#" onClick = "elief_my ('my _')"> إغلاق </a> </li> </ul> </viv> </viv> <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/201 8_1164245_t.jpg " / > </li> <li> <img src = "/u/info_img/2009-06/20/work_291488_8330_2008080829_151402_6235352_t.jpg"/> </li> <li> /20/work_577_8423_20080902_115301_643310_t.jpg "/> </li> <li> <img src ="/u/info_img/2009-06/20/work_23709_8344_2008080_123900_9823 RC = " /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_836_833. 8349305_t.jpg " /> </li> <li> <img src = "/u/info_img/2009-06/20/work_202433_8401_20080901_163123_1710510_t.jpg"/> </li> </ul> </div> <br/> <a href = " #"onClick =" Scrol () ؛ Br /> بالطبع ، التأثير أعلاه هو مجرد ما أستخدمه لإظهار تأثير التخزين المؤقت ، <br ​​/> <br /> إنه غير مناسب لهذا التأثير هو أن الوظيفة التي كتبتها هنا لن يتم نقلها إلا مرة واحدة. Br /> <br /> إذا كنت تستخدم هذه الطريقة عدة مرات ، فيبدو أنه ليس من السهل تحقيقه. <br /> <br /> أخيرًا ، سأقول ، لا تكون رمزًا خاصًا هنا خائف ، <br /> <br /> يبدو أن هناك الكثير من التعليمات البرمجية ، وذلك أساسًا لأن العمودين أدناه يجعلان الرمز يبدو كثيرًا <br /> <br /> ما هو مهم حقًا هو f_s () ، s_f () ، Closew () <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 ؛ /> <script type = "text/javaScript"> خطأ في الوظيفة () 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") ؛ // احصل على الكائن مع مربع المعرف
obj.style.display = "block" ؛ // اضبط الكائن OBJ على أنه عرض
obj.style.width = "1px" ؛
var changew = function () {// (حول الوظيفة ، ما هو الإغلاق ، أي نوع من الفئة ، النموذج الأولي ، لقد جعلني غمرني. دعنا نفهمها ببطء في المستقبل. ما أفهمه هنا هو إنشاء وظيفة وحسابها مباشرة ويتم وضعه فيه مخزنة في التغيير المتغير)
var obj_w = parseint (obj.style.width) ؛ // قم بتحويل عرض الكائن إلى قيمة رقمية وتخزينه في المتغير OBJ_W ؛
إذا (obj_w <600) {// judge ، إذا كانت قيمة العرض أقل من 600
obj.style.width = (obj_w+math.ceil ((600-OBJ_W)/15))+"px" ؛ // حساب عرض الكائن. . . مع نمو العرض ، تصبح الزيادة أصغر وأصغر
}
آخر{
ClearInterval (BW) ؛ // إذا كان أكبر من أو يساوي 600 ، فلن يتم تنفيذ SetInterval ، مما يعني أنه سيتم إيقاف العرض في هذا الوقت.
}
}
var bw = window.setinterval (changew ، 1) // call changew كل 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 () {// ما أفهمه هو إنشاء وظيفة مباشرة وتخزينها في التغيير المتغير
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" ؛ // مع نمو العرض ، تصبح الزيادة أكبر وأكبر
}
آخر{
ClearInterval (BW) ؛
OBJ.STYLE.WIDTH = "600px" ؛ // لأن (OBJ_W+E_ADD) سوف يتجاوز العرض المحدد مسبقًا ، وبالتالي يتم إعادة تعيين العرض بعد التخزين المؤقت.
}
}
var bw = window.setinterval (changew ، 1)
}