لا أستطيع أن أثير اهتمامي بـ CSS مؤخرًا لأنني كنت مستاءً من صور Carousels ولم أتعلم جيدًا ، لذلك استغرقت بعض الوقت للتعرف على JS. ثم مشيت إلى الطريق الأسود وكتبت تأثير الكاروسيل والصور التي تتلاشى في استخدام jQuery و JS. طريق التعلم في المستقبل طويل جدًا ، آمل أن أذهب إلى أبعد من ذلك وأكثر على الطريق الأمامي (∩_∩) ′
من حيث المبدأ ، هناك العديد من البرامج التعليمية عبر الإنترنت ، ببساطة.
تتلاشى ، ولكن في الواقع ، يتم استخدام تأثير التلاشي فقط هنا. بالنسبة لكل صورة باهتة ، قمنا بتعيين عرضه على حظره ، والآخرون لا شيء ، لذلك لا توجد سوى صورة واحدة موجودة بالفعل وتحتل موقعًا في دفق المستندات. قبل تعيين طريقة عرض الصورة ، فإن زيادة شفافية الصورة تدريجياً ستمنح الناس شعورًا بالتلاشي.
في الواقع ، هناك نقطة رئيسية أخرى في رمز JS. يتم استخدام عمليات الإغلاق في الكود ، لذلك لدي القليل من الفهم للإغلاق. اسمحوا لي أن أقول بضع كلمات أخرى هنا:
التفسير الرسمي للإغلاق هو أن الإغلاق هو تعبير (عادةً ما يكون له وظيفة) له العديد من المتغيرات وبيئة مرتبطة بهذه المتغيرات ، وبالتالي فإن هذه المتغيرات هي أيضًا جزء من التعبير.
أبسط طريقة هي:
عندما يتم الرجوع إلى الوظيفة الداخلية B للدالة A بواسطة وظيفة خارجية متغيرة ، يتم إنشاء إغلاق.
قال ذلك بدقة. ما يسمى "الإغلاق" هو تحديد وظيفة أخرى كوظيفة الطريقة في جسم المنشئ ، وتشير وظيفة الطريقة لهذا الكائن بدورها إلى المتغيرات المؤقتة في جسم الوظيفة الخارجية. يتيح ذلك الحفاظ على القيمة المتغيرة المؤقتة التي يستخدمها هيكل المنشئ الأصلي بشكل غير مباشر طالما أن الكائن المستهدف يمكنه دائمًا الحفاظ على طريقته أثناء حياته.
على الرغم من انتهاء استدعاء المنشئ الأولي واختفت أسماء المتغيرات المؤقتة ، يمكن دائمًا الرجوع إلى قيمة المتغير داخل طريقة الكائن الهدف ، ويمكن الوصول إلى القيمة إلا في هذه الطريقة. حتى لو تم استدعاء نفس المنشئ مرة أخرى ، سيتم إنشاء كائنات وطرق جديدة فقط. المتغير المؤقت الجديد يتوافق فقط مع القيمة الجديدة ، وهو مستقل عن المكالمة الأخيرة.
الوظيفة التالية هي وظيفة الإغلاق. لماذا تستخدم الإغلاق؟ أليس من الممكن للوظائف العادية؟ هذا غير ممكن حقًا. الغرض من الإغلاق هنا هو الحفاظ على الإشارة إلى العلم. إذا لم يكن هناك إغلاق ، للمتغيرات المحلية ، طالما تم تنفيذ الوظيفة مرة واحدة ، أي يتم تنفيذ العلم مرة واحدة ، سيتم جمع المتغير المحلي وتنظيفه بواسطة آلية جمع القمامة. نشير إلى متغير العلم من خلال الوظيفة في المكالمة المتقطعة. عند تنفيذ التنفيذ الثاني ، ستفقد العلامة قيمتها ولا يمكن لجنة الوظيفة تنفيذ النتيجة الصحيحة. عندما بدأت لمس الواجهة الأمامية ، شعرت أن الإغلاق كان اختياريًا. الحقيقة هي أن هذا الشيء مهم حقًا!
var setval = function (s ، flag) {return function () {pos = math.abs (parseint (pic.style [point]) ؛ إذا كانت (flag> 0) {// النقطة الحالية أكبر من إحداثيات النقطة المستهدفة ، فإن الصورة تتحرك إلى اليمين ، وتقلل القيمة اليسرى pic.style [point] = -math.floor (pos +(parseint (s*ssinglesize) - pos) +'px' ؛ } if (flag <0) {pic.style [point] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*السرعة) +'px' ؛ } if (pos == (ssinglesize * s)) {now = s ؛ clearinterval (الفاصل) ؛ }}} ؛ها هو الرمز:
HTML
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> picsglide </title> <link href = "css/index.css" rel = "stylesheet" type = "text/css" src = "js/jquery-1.3.2.js"> </script> <script src = "js/index.js"> </script> </head> <body onload = "init ()"> <div id = "picbox"> <ul class = "show_pic" style = "left: 0" src = "imgs/ccc.jpg"/> </a> </li> <li> <li> <img src = "imgs/aaa.jpg"/> </li> <li> <img src = "imgs/bbb.jpg"/> </li> <img src = src = "imgs/ccc.jpg"/> </li> <li> <li> <img src = "imgs/ccc.jpg"/> </li></ul> <div class = "bg"> </viv> <ul class = "show_des" <li> puss in boots4 </li> <li> puss in boots5 </li></ul><ul class = "icon_num"> <li class = "on"> 1 </li> <li> 2 </li> </li> 3 </li> <li> 4 </li> </li> </li> </liv> </li>
CSS
الجسم {font-size: 12px ؛ } ul ، li {padding: 0 ؛ الهامش: 0 ؛ على غرار القائمة: لا شيء ؛ } #picbox {width: 610px ؛ الارتفاع: 205 بكسل ؛ الهامش: 50 بكسل Auto ؛ الفائض: مخفي. الموقف: قريب حجم الخط: 0 ؛}/*صورة carousel*/#picbox .show_pic {width: 3050px ؛ الموضع: absolute ؛}#picbox .show_pic li {float: left ؛ العرض: 610px ؛ الارتفاع: 205 بكسل ؛ العرض: لا شيء ؛ /*Display: None ؛*/}#picbox .show_pic li.on {display: block ؛}#picbox .show_pic li img {display: block ؛ العرض: 610px ؛ الارتفاع: 205px ؛}#picbox .icon_num {الموضع: Absolute ؛ أسفل: 12 بكسل ؛ اليمين: 10px ؛ z-index: 10 ؛}#picbox .icon_num li {float: left ؛ /*الخلفية: url (/UPLOADFILE/200912/28/FA15567738.GIF) NO -REPEAT -15PX 0 ؛ */ العرض: 16px ؛ الارتفاع: 16 بكسل ؛ حجم الخط: 16 بكسل ؛ اللون: #39F ؛ محاذاة النص: المركز ؛ المؤشر: مؤشر. Margin-Right: 5px ؛} #picbox .icon_num li.on {background: #000 ؛ العتامة: 0.5 ؛ }/*الخلفية*/. bg {z-index: 1 ؛ الموقف: مطلق ؛ أسفل: 0 ؛ الارتفاع: 40 بكسل ؛ العرض: 610px ؛ الخلفية: #000 ؛ العتامة: 0.6 ؛ Filter: alpha (عتامة = 60) ؛}#picbox .show_des {width: 300px ؛ الارتفاع: 18 بكسل ؛ الموقف: مطلق ؛ القاع: 11px ؛ اليسار: 15 بكسل ؛ اللون: #fff ؛ z-index: 10 ؛}#picbox .show_des li {display: none ؛ ارتفاع الخط: 18 بكسل ؛ حجم الخط: 18px ؛}#picbox .show_des li.on {display: block ؛}JS
وظيفة cleanwhitespace (oeLement) {for (var i = 0 ؛ i <oeLement.ChildNodes.length ؛ i ++) {var node = oeelement.childnodes [i] ؛ if (node.nodeType == 3 &&! // s/.test (node.nodevalue)) {node.parentnode.removechild (node) ؛ }}} // code code this.layerglide = function (auto ، obox ، ssinglesize ، second ، fspeed ، point) {var veral ، timeout ؛ // two times var pos ؛ // القيمة المطلقة لتنسيق تحديد المواقع الحالي var time = second ، الآن = 0 ؛ // تحرك صورة الوقت مرة واحدة زمنية زمنية ، والآن قيمة الفهرس للسرعة VAR vARE الحالية = fspeed // سرعة الحركة VAR DELAY = Second * 1000 ؛ // الفاصل الزمني لكل تبديل للصورة var picbox = document.getElementById (obox) ؛ CleanWhiteSpace (Picbox) ؛ var pic = picbox.childnodes [0] ؛ // قائمة الصور var des = picbox.childnodes [2] .getElementsByTagName ("li") ؛ // قائمة الصور var con = picbox.childnodes [3] .getElementsByTagName ("li") ؛ var sum = con.length ؛ var setval = function (s ، flag) {return function () {pos = math.abs (parseint (pic.style [point]) ؛ إذا كانت (flag> 0) {// النقطة الحالية أكبر من إحداثيات النقطة المستهدفة ، فإن الصورة تتحرك إلى اليمين ، وتقلل القيمة اليسرى pic.style [point] = -math.floor (pos +(parseint (s*ssinglesize) - pos) +'px' ؛ } if (flag <0) {pic.style [point] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*السرعة) +'px' ؛ } if (pos == (ssinglesize * s)) {now = s ؛ clearinterval (الفاصل) ؛ }}}} ؛ var changeto = function (num) {for (var i = 0 ؛ i <sum ؛ i ++) {con [i] .className = "" ؛ des [i] .className = "" ؛ } ؛ con [num] .className = "on" ؛ des [num] .className = "on" ؛ var flag = math.abs (parseint (pic.style [point]))-ssinglesize * num ؛ الفاصل الزمني = setInterval (setVal (num ، flag) ، time) ؛ //bkg.hide (). fadein () ؛ } وظيفة autoglide () {clearTimeOut (الفاصل) ؛ الآن = (الآن == (parseint (sum) -1))؟ 0: (الآن + 1) ؛ Changeto (الآن) ؛ timeout = setTimeOut (Autoglide ، Delay) ؛ } وظيفة isauto () {if (auto) {timeOut = setTimeOut (autoglide ، delay) ؛ } ؛ } isauto () ؛ // ابدأ carousel التلقائي لـ (var i = 0 ؛ i <sum ؛ i ++) // زر التنقل {con [i] .onmouseover = (function (i) {return function () {cleartimeout (timeout) ؛ this.layerfader = function (auto ، obox ، second ، count ، speed) {var steral ، timeout ؛ // two timeers var now = 0 ؛ // صورة الوقت تتحرك مرة واحدة زمنية زمنية ، والآن قيمة الفهرس للصورة الحالية var delay = second * 1000 ؛ // يتم تبديل الفاصل الزمني لكل صورة picbox = document.getElementById (obox) ؛ CleanWhiteSpace (Picbox) ؛ var pic = picbox.childnodes [0] .getElementSbyTagName ("li") ؛ var des = picbox.childnodes [2] .getElementsByTagName ("li") ؛ var con = picbox.childnodes [3] .getElementsByTagName ("li") ؛ var sum = con.length ؛ وظيفة fadein (elem) {setOpacity (elem ، 0) ؛ // في البداية شفافة تمامًا لـ (var i = 0 ؛ i <= count ؛ i ++) {// تغيير الشفافية 20 * 5 = 100 (الدالة (i) {var level = i * 5 ؛ // قيمة تغيير الشفافية في كل مرة setTimeOut (function () {setOpacity (elem ، المستوى)} ، i * السرعة) ؛}) (i) ؛ }} الوظيفة setOpacity (elem ، المستوى) {// ضبط الشفافية إذا (elem.filters) {elem.style.filter = "alpha (opacity =" + level + ") ؛ } آخر {elem.style.opacity = المستوى / 100 ؛ }} var changeto = function (num) {for (var i = 0 ؛ i <sum ؛ i ++) {con [i] .className = "" ؛ des [i] .className = "" ؛ pic [i] .className = "" ؛ } ؛ فدين (الموافقة المسبقة عن علم [num]) ؛ con [num] .className = "on" ؛ des [num] .className = "on" ؛ pic [num] .className = "on" ؛ //bkg.hide (). fadein () ؛ } وظيفة autoglide () {clearTimeOut (الفاصل) ؛ الآن = (الآن == (parseint (sum) -1))؟ 0: (الآن + 1) ؛ Changeto (الآن) ؛ timeout = setTimeOut (Autoglide ، Delay) ؛ } وظيفة isauto () {if (auto) {timeOut = setTimeOut (autoglide ، delay) ؛ } ؛ } isauto () ؛ .jQuery أبسط بكثير من JS ، لذلك لن أخوض في التفاصيل هنا. عندما كنت في سنتي الإعدادية ، أخذت فئة نمط التصميم. أخبرنا المعلم برمجة الواجهات بدلاً من التطبيقات. حاول ألا تظهر الثوابت في الكود لتحسين قابلية إعادة استخدام الكود. لذلك ، عند كتابة الكود ، يتم ذكر جميع العوامل المتغيرة للمعلمات. في الجملة الأخيرة ، بالنسبة لعملية JS DOM ، فإن JS هي الطريقة الملكية. فقط باستخدام وممارسة المزيد ، يمكنك إتقانه جيدًا. أتمنى أن تذهب أبعد وأكثر في المستقبل.
المثال البسيط أعلاه لتنفيذ JS الأصلي لتنفيذ تأثيرات الصورة وتأثيرات التلاشي هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.