دعونا نقدم عروض جدار الصور التي أدركتها وفقًا لشرح الفيديو عبر الإنترنت.
التأثير النهائي هو على النحو التالي:
• عند النقر فوق الصورة ، تنتقل الصورة إلى المنطقة الوسطى وتكبيرها. عند النقر فوق الصورة ، يتم تبديل الجوانب الأمامية والخلفية لعرضها.
• عند النقر على صورة معينة ، يتم إعادة ترتيب مواضع جميع الصور بشكل عشوائي
• عند النقر فوق زر التحكم ، يتم عرض الصورة المقابلة في الوسط ، ويغير زر التحكم النمط المقابل. عند النقر فوق زر التحكم بشكل مستمر ، ستقوم الصورة بتبديل الجانب الأمامي والخلفي بنقرة الزر
تحلل VCD للتأثير بالكامل ، كما هو مبين في الشكل أدناه:
تتحلل الحالات بطريقة يمكن أن تفهمها أجهزة الكمبيوتر.
• عرض الرؤية: قالب الواجهة الأساسية HTML + CSS
• وحدة التحكم: معالجة محتوى JavaScript ، معالجة الأحداث
• بيانات البيانات: data.js ليست ضرورية ، تساعد على الفهم
بيانات البيانات شائعة الاستخدام. إذا قمت بكتابة المحتوى إلى العرض ، أي ، HTML ، يجب عليك تعديل HTML عندما تريد تغيير المحتوى ، ولكن إذا كنت تستخدم VCD ، فأنت بحاجة فقط إلى تعديل جزء البيانات. في الوقت نفسه ، يتم إنشاء جزء البيانات العامة بواسطة الخلفية ، لذلك يكون هذا الاستبدال أكثر ملاءمة. يتم إنشاء جميع الملصقات في هذه الحالة بواسطة قوالب بالإضافة إلى البيانات.
عرض القسم
تتحلل منطقة التأثير إلى الأجزاء الثلاثة التالية:
• منطقة الملصقات الحالية
مركز أفقي ورأسي
يسمح بعرض وتقلب <زر التحكم>
• مناطق التخزين اليسرى واليسرى
اقسم إلى اليسار واليمين على <منطقة الملصقات الحالية>
هو تخزين الملصقات الأخرى
يتم وضع كل ملصق بشكل عشوائي وزاوية
• منطقة شريط التحكم
التحكم وعرض الملصق المقابل
Flip Toggle <ملصق العرض الحالي> الأمامي والخلف
رمز HTML المطبق هو كما يلي:
<body onSelectStart = 'return false ؛'> <!-هنا لمنع نص الصفحة من تحديد-> <!-2. أعد كتابة العرض كسلسلة قالب-> <div id = "wall"> <!-div.photo مسؤول عن الترجمة والدوران-> <div onclick = "this)" id = "photo {{{ التقليب الأمامي والخلف -> <div> <p> <p> <img src = "photo/{{img}}"> </p> <p> {{caption}} </p> </viv> <p> <p> {{desc}}هنا ، {{img}} ، {{caption}} ، و {{desc}} هي سلاسل قالب ، وسيكون جزء البيانات مطابقًا ولكن تم استبداله لاحقًا.
نمط جزء العرض هو كما يلي:
<style type = "text/css"> *{padding: 0 ؛ الهامش: 0 ؛ } body {background-color: #ffff ؛ اللون:#555 ؛ Font-Family: 'Avenir next' ، 'Lantinghei sc' ؛ حجم الخط: 14px ؛ -الميوز-سعة التمسك: مضادة. -webkit-font-smoothing: antialiased ؛/*font smooth*/} .wrap {// تتمحور منطقة الصورة رأسياً في عرض الجسم: 100 ٪ ؛ الارتفاع: 900 بكسل ؛ الموقف: مطلق ؛ /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- الهامش: -300px ؛ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /*لأن كل ملصق يتم وضعه بشكل عشوائي باستخدام أعلى واليسار ، قم بتعيين الموضع على المطلق*/ الموضع: مطلق ؛ Z-index: 1 ؛ box-shadow: 0 0 1px rgba (0،0،0 ، .01) ؛ /*التحويل: rotatey (30deg) ؛*/ -Moz -transition: All .6S ؛ /*دع الملصق ينتقل لإنتاج تأثير الرسوم المتحركة*/ -webkit -transition: All .6S ؛ } .photo .side {width: 100 ٪ ؛ الارتفاع: 100 ٪ لون الخلفية: #EEE ؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليمين: 0 ؛ الحشو: 20 بكسل ؛ حجم الصناديق: صندوق الحدود ؛ } .photo. الارتفاع: 250 بكسل ؛ رفع الخط: 250 بكسل ؛ الفائض: مخفي. } .photo. } .photo. حجم الخط: 16 بكسل ؛ ارتفاع الخط: 50 بكسل ؛ . حجم الخط: 14px ؛ ارتفاع الخط: 1.5EM ؛ } /*نمط الملصق المحدد حاليًا* /.photo_center { /*--- تنفيذ طريقة التركيز العمودي واحد اليسار: 50 ٪ ؛ أعلى: 50 ٪ ؛ الهامش اليساري: -130 بكسل ؛ الهامش: -160px ؛ *//*تنفيذ طريقة التركيز العمودي اثنين*/ TOP: 0 ؛ أسفل: 0 ؛ اليسار: 0 ؛ اليمين: 0 ؛ الهامش: السيارات ؛ z-index: 999 ؛ // دع الملصق المحدد حاليًا لا يتم تغطيته بواسطة ملصقات أخرى}/*المسؤولة عن التقليب*/.photo-wrap {الموضع: absolute ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ -الموز- الطراز المحول: Perserve-3D ؛ -webkit-transform-style: Preserve-3D ؛/*دع العناصر داخل تدعم تأثير 3D*/ strending: الحفاظ على 3D ؛/*بسبب هذه الجملة ، لا يمكن عرض الجزء الخلفي من Firefox*/ -webkit-transition: Alls 1s ؛ -الموز ترانس: كل 1S ؛ الانتقال: كل 1S ؛ . وضوح الخلفية: مخفية ؛ } .photo-wrap .- -webkit-transform: rotatey (0deg) ؛ التحويل: rotatey (0deg) ؛ . -webkit-transform: rotatey (180deg) ؛ التحويل: Rotatey (180deg) ؛ . -webkit-transform: rotatey (0deg) ؛ التحويل: rotatey (0deg) ؛ . -webkit-transform: rotatey (180deg) ؛ التحويل: Rotatey (180deg) ؛ } /*نمط زر التحكم* / .NAV {العرض: 40 ٪ ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ الموقف: مطلق ؛ اليسار: 30 ٪ ؛ القاع: 20 بكسل ؛ Z-index: 999 ؛ /*خلفية اللون: #fff ؛*/ text-align: Center ؛ } /*النمط العادي* / .nav .i {width: 30px ؛ الارتفاع: 30 بكسل ؛ العرض: كتلة مضمنة. المؤشر: مؤشر. خلفية اللون: #AAA ؛ محاذاة النص: المركز ؛ الحدود الحدودية: 50 ٪ ؛ -Moz-transform: Scale (.48) ؛ -webkit-transform: Scale (.48) ؛ التحويل: مقياس (.48) ؛ -بكيت ترانس: جميع 1s ؛ -الموز ترانس: كل 1S ؛ . -webkit-transform: Scale (1) ؛ } .nav .i_current: بعد {التعتيم: 1 ؛ } /*back {-moz-transform: rotatey (-180deg) ؛ -webkit-transform: rotatey (-180deg) ؛ خلفية اللون:#555 ؛ }/*تحسين النمط ،*/ .photo {/*التعريف أدناه هو القضاء على وميض مفاجئ من الصور*/ اليسار: 50 ٪ ؛ أعلى: 50 ٪ ؛ الهامش: -160px 0 0 -130px ؛ . -webkit-transform-arigin: 0 ٪ 50 ٪ ؛ . -webkit-transform: Translate (0px ، 0px) rotatey (0deg) ؛ . -webkit-transform: Translate (260px ، 0px) Rotatey (180deg) ؛ }فيما يلي بعض الأجزاء المهمة من النمط.
الإعدادات في الحالة: -webkit-perspective: 800px ؛
يمكنك رؤية تأثير تعيين هذا ثم تعيين rotatey (45deg). إذا لم يتم تعيين -webkit التحويل ، فلن يتم عرض تأثير الدوران. دوران الصورة يدور على متن الطائرة. إذا تم تعيينه صغيرًا جدًا ، فسيكون التأثير على النحو التالي:
Div.Photo مسؤول عن ترجمة وتناوب الصورة ، في حين أن div.photo-wrap مسؤول عن Flip 3D (التبديل الأمامي والخلف). من أجل تمكين العناصر الموجودة في الداخل لدعم التأثيرات ثلاثية الأبعاد ، قم بتعيين -webkit-transform: Preserve-3D for div.photo-wrap.
.photo-wrap. stype-webkit-backface-sitibility: Hidden ؛ الغرض من هذه الجملة هو الاختباء عندما لا يواجه العنصر الشاشة.
من أجل جعل حركة الصورة وتأثير الرسوم المتحركة ، قم بتعيين -الويبكيت ترانس لـ .photo-wrap: لنرى شرح الانتقال أدناه:
نمط شريط الملاحة
/*النمط العادي*/ .nav .i {العرض: 30px ؛ الارتفاع: 30 بكسل ؛ العرض: كتلة مضمنة. المؤشر: مؤشر. خلفية اللون: #AAA ؛ محاذاة النص: المركز ؛ الحدود الحدودية: 50 ٪ ؛ -Moz-transform: Scale (.48) ؛ -webkit-transform: Scale (.48) ؛ التحويل: مقياس (.48) ؛ -بكيت ترانس: جميع 1s ؛ -الموز ترانس: كل 1S ؛ } /*المحدد حاليًا النمط* / .nav .i_current {-moz -transform: Scale (1) ؛ -webkit-transform: Scale (1) ؛ } .nav .i_current: بعد {التعتيم: 1 ؛ } /*back style* / .nav .i_back {-moz-transform: rotatey (-180deg) ؛ -webkit-transform: rotatey (-180deg) ؛ خلفية اللون:#555 ؛ }مخطط تحليل شريط الملاحة:
كما تنقسم أزرار شريط التنقل إلى الأمام والخلف. من أجل التمييز بين تأثيرات الأمام والخلف ، يتم تعيينها على ألوان خلفية مختلفة ، وفي نفس الوقت ، يتم تعيين تأثير الوجه لتقليل الزر العادي - التحويل: المقياس (.48) ، وعندما يتم تحديد الزر ، المقياس (1). السبب في تكبير الزر وخارجه هو معرفة ما إذا كان سيتم تدمير النمط العام عند تحديد الزر الحالي.
بعد تعيين جميع الأنماط الأساسية ، سيتم إجراء بعض التحسينات لهذا التأثير. من أجل جعل الصورة تبدو معروفة قليلاً إلى اليمين مثل الباب عند التبديل الأمامي والخلف ، يمكنك إضافة النمط التالي:
/*تحسين النمط ،*/ .photo {/*التعريف أدناه هو القضاء على ومضات الصور المفاجئة*/ اليسار: 50 ٪ ؛ أعلى: 50 ٪ ؛ الهامش: -160px 0 0 -130px ؛ . -webkit-transform-arigin: 0 ٪ 50 ٪ ؛ . -webkit-transform: Translate (0px ، 0px) rotatey (0deg) ؛ . -webkit-transform: Translate (260px ، 0px) Rotatey (180deg) ؛ }قسم البيانات
تتم كتابة البيانات بشكل أساسي في Data.js. يتم تعريف صفيف البيانات في Data.js لتخزين المعلومات من 22 صورة. هيكل إخراج صفيف البيانات كما يلي:
يتضمن كل كائن مخزّن في البيانات ثلاث سمات: Caption و DESC و IMG. يتم إخراج محتويات كل كائن مخزنة في البيانات على النحو التالي. يستخدم جزء البيانات بشكل أساسي لاستبدال السلاسل في القوالب.
محتوى data.js كما يلي:
var data = [] ؛ var datastr = '1. الصورة 1 <br>/<br>/الخضار الخضراء <br>/<br>/<br>/2. الصورة 2 <br>/<br>/الصورة 2 <br>/<br>/<br>/3. الصورة 3 <br>/<br>/<br>/<br>/4. الصورة 4 <br>/<br>/<br>/<br>/4. الصورة 4 <br>/<br>/<br>/5. الصورة 5 <br>/<br>/<br>/<br>/<br>/6. لعبة الدب الصغير اللطيف للغاية <br>/<br>/لعبة صغيرة جدًا من الدب <br>/<br>/>/<br>/<br>/7 ، الصورة 7 <br>/<br>/<br>/<br>/8 ، الصورة 8 <br>/<br>/<br>/<br>/9 ، photo 9 <br>/<br>/<br> الصورة 10 <br>/<br>/<br>/11 ، الصورة 11 <br>/<br>/<br>/<br>/12 ، الصورة 12 <br>/<br>/<br>/12 <br>/<br>/<br>/13 ، الصورة 13 <br>/<br>/<br>/<br>/14 ، صورة 14 <br>/<br>/<br>/ * <br>/ * <br> 15 <br>/<br>/<br>/<br>/15 ، الصورة 15 <br>/<br>/<br>/<br>/16 ، الصورة 16 <br>/<br>/<br>/<br>/17 ، الصورة 17 <br>/<br>/<br>/<br>/17 ، الصورة 17 <br>/<br>/<br>/<br>/17 ، صورة. 17 <br>/<br>/<br>/<br>/17 ، الصورة 17 <br>/<br>/<br>/<br>/17 ، الصورة 17 <br>/<br>/<br>/<br>/18 ، الصورة 18 <br>/<br>/photo 18 <br>/<br>/19 ، الصورة 19 <br>/<br>/الصورة. 20 <br>/<br>/<br>/الصورة 20 <br>/<br>/21 ، الصورة 21 <br>/<br>/<br>/<br>/<br>/22 ، الصورة 22 <br>/<br>/'؛ i ++) {var c = d [i] .split ('<br> <br>') ؛ data.push ({img: 'img'+(i+1)+'.VCD تحكم التحكم في التحلل
• إخراج جميع محتوى الملصق (عرض قالب + بيانات)
• التحكم في تخصيص الموقف (الموضع المركزي ، كلا الجانبين)
• إخراج شريط التحكم والتحكم (التبديل ، الوجه)
إخراج جميع الملصقات ، وتكرار من خلال صفيف البيانات ، وملء المحتوى في القالب.
// 4. إخراج جميع الملصقات var data = البيانات ؛ دالة addPhotos () {var template = $ ('#wrap'). html () ؛ var html = [] ؛ var nav = [] ؛ لـ (s في البيانات) {var _html = template.replace ('{{index}} ، s) .replace (' {{img}} '، data .replace ('{{desc}}' ، data [s] .desc) ؛ html.push (_html) ؛ // كل ملصق له زر مقابل nav.push ('<span id = "nav _'+s+'" onClick = "Turn (this)"> </span>') ؛ } // اكتب مرة أخرى بعد اجتياز html.push ('<viv>'+nav.join ('')+'</viv>') ؛ $ ('#wrap'). html (html.join ('')) ؛ rsort (عشوائي ([0 ، data.length])) ؛ }فرز الملصق ، مخطط التحليل هو كما يلي:
عند فرز الملصقات للأقسام اليسرى واليمنى ، قم أولاً بتحليل موضع الملصقات للأقسام اليسرى واليمنى على النحو التالي:
استخدم أرقامًا عشوائية لإنشاء الموضع الأيسر والأعلى للملصق الحالي
// قم بإنشاء قيمة عشوائية ، ودعم نطاق القيمة. random ([min ، max]) ؛ وظيفة عشوائية (المدى) {var max = math.max (المدى [0] ، المدى [1]) ؛ var min = math.min (المدى [0] ، المدى [1]) ؛ var diff = max-min ؛ var number = math.ceil (math.random ()*diff + min) ؛ رقم الإرجاع ؛ } // 6. حساب نطاق الأقسام اليسرى واليمين {يسار: {x: [min ، max] ، y [min ، max]} ، يمين {x: [min ، max] ، y: [min ، max]}}} function Range () {var ran = {left: {x: [] ، y: []} ، {x: [] ، []}} ؛ var wrap = {w: $ ('#wrap'). width () ، // w: 600 ، h: $ ('#wrap'). height ()} var photo = {w: $ ('. photo') [0] .clientwidth ، h: $ ('. photo') [0]. ran.left.y = [0 - photo.h ، wrap.h] ؛ RAN.Right.x = [wrap.w/2 + photo.w/2 ، wrap.w + photo.w] ؛ ran.right.y = ran.left.y ؛ ران. }ثم فرز الملصقات
//5 var photos = [] ؛ لـ (var i = 0 ؛ i <_photo.length ؛ i ++) {_photo [i] .className = _photo [i] .classname.replace (// s*phot_center/s*/، '') ؛ _photo [i] .className = _photo [i] .classname.replace (// s*photo-front/s*/، '') ؛ _photo [i] .className = _photo [i] .classname.replace (// s*photo-front/s*/، '') ؛ _photo [i] .className = _photo [i] .className = _photo [i] .className.replace (// s*photo-back/s*/، '') ؛ // لأن كلا من الصور المسبقة وظهر الصور يتم استبدالها أعلاه ، _photo [i] .className += 'photo-front' ؛ _photo [i] .style.left = '' ؛ _photo [i] .style.top = '' ؛ _photo [i] .style ['-moz-transform'] = _photo [i] .Style ['transform'] = _photo [i] photos.push (_photo [i]) ؛ } // var photo_center = $ ('#photo _'+n) [0] ؛ var photo_center = document.getElementById ('photo _'+n) ؛ var newClass = photo_center.className + 'photo_center' ؛ //console.log(photo_center.attr('class ')) ؛ phot_center = photos.splice (n ، 1) [0] ؛ //photo_center.className = newClass ؛ $ ('#photo _'+n) .Attr ('class' ، newClass) ؛ // قسّم الملصق المتبقي إلى جزأين var photos_left = photos.splice (0 ، math.ceil (photos.length/2)) ؛ var photos_right = صور ؛ var ranges = range () ؛ // فرز القسم الأيسر لـ (s في photos_left) {var photo = photo_left [s] ؛ photo.style.left = عشوائي (ranges.left.x) + 'px' ؛ photo.style.top = عشوائي (ranges.left.y) + 'px' ؛ photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = 'rotate ('+random ([-150،150])+'deg) (1)' ؛ }. photo.style.left = عشوائي (ranges.right.x) + 'px' ؛ photo.style.top = عشوائي (ranges.right.y) + 'px' ؛ photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = photo.style ['-webkit-transform'] = photo.style ['-webkit-transform'] = 'rotate ('+random ([-100،100]). } // Control Button Processing var navs = $ ('. i') ؛ لـ (var i = 0 ؛ i <navs.length ؛ i ++) {navs [i] .className = navs [i] .className.replace (// s*i_current/s*/، '') ؛ navs [i] .className = navs [i] .classname.replace (// s*i_back/s*/، '') ؛ } // إضافة $ i_current $ ('#nav _' +n) [0] .className += 'i_current' ؛ }تأثير التبديل للجانب الأمامي والخلفي من الملصق وتأثير التبديل لزر التحكم:
انعطاف الدالة (elem) {var cls = elem.className ؛ var n = elem.id.split ('_') [1] ؛ if (! (/photo_center/.test (cls))) {rsort (n) ؛ } // يتم تغيير اسم className بعد تنفيذ البيان if أعلاه ، لأنني لا أريد هذا // هناك دائمًا نقص في فئة photo_center var cs = $ ('#photo _'+n) [0] ؛ CLS = Cs.ClassName ؛ if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/، 'photo-back') ؛ $ ('#nav _' +n) [0] .className += 'i_back' ؛ } آخر {cls = cls.replace (/photo-back/، 'photo-pront') $ ('#nav _'+n) [0] .className = $ ('#nav _'+n) [0] .className.Replace (// s*i_back/s*/، '') ؛ } cs.className = cls ؛ }يمكنك فهم الملصق الذي هو الملصق المعروض حاليًا على أساس N في RSORT (N) ، ويمكنك أيضًا معرفة الزر هو الزر المحدد حاليًا.
ما سبق هو تحليل التأثير المقابل.
تلخيص:
الأفكار والأساليب لتحليل الحالات:
• طريقة تحليل الوحدة النمطية
• طريقة تحليل VCD
بعض تأثيرات CSS الجديدة
• إعدادات الموضع ثلاثية الأبعاد ودعم العناصر الفرعية ثلاثية الأبعاد
• الاختباء عندما تقلب غير مرئي
• استخدام دوران CSS (المحور ص) والتشريد
• CSS تبديل الرسوم المتحركة
مهارات البرمجة النصية في الواجهة الأمامية
• وظيفة قالب بسيط لاستبدال السلسلة
• الحصول على بعض الأرقام العشوائية وفقًا للنطاق
• استخدم البرامج النصية لتبديل اسم فئة العنصر وسمات النمط المحددة
أثناء عملية التنفيذ ، كانت المشكلة التي واجهتها هو أنه عند تقليب الصورة ، لا يمكن إخفاء الجانب العكسي في Firefox. وهذا يعني أن هناك مشكلة في الكود التالي ، وقد تم فحصه لفترة طويلة.
.photo-wrap .side {-moz-backface-sitibility: Hidden ؛ -بكيت-باكفيس-وضوح: مخفي ؛ وضوح الخلفية: مخفية ؛}اتضح أن: فاتني أسلوب التحويل: Preserve-3D . لذلك عندما توافق المتصفح ، تذكر أن تكتب الأنماط بدون بادئة
.photo-wrap {الموضع: absolute ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ -الموز- الطراز المحول: Perserve-3D ؛ -webkit-transform-style: Preserve-3D ؛/*دع العناصر داخل تدعم تأثير 3D*/<span style = "اللون:#cc0000 ؛ -الموز ترانس: كل 1S ؛ الانتقال: كل 1S ؛ }أخيرًا ، يتم إرفاق رمز JS الكامل:
<script type = "text/javaScript"> // قم بإنشاء قيمة عشوائية بشكل عشوائي ، مما يدعم نطاق القيمة. random ([min ، max]) ؛ وظيفة عشوائية (المدى) {var max = math.max (المدى [0] ، المدى [1]) ؛ var min = math.min (المدى [0] ، المدى [1]) ؛ var diff = max-min ؛ var number = math.ceil (math.random ()*diff + min) ؛ رقم الإرجاع ؛ } // 4. إخراج جميع الملصقات var data = البيانات ؛ دالة addPhotos () {var template = $ ('#wrap'). html () ؛ var html = [] ؛ var nav = [] ؛ لـ (s في البيانات) {var _html = template.replace ('{{index}} ، s) .replace (' {{img}} '، data .replace ('{{desc}}' ، data [s] .desc) ؛ html.push (_html) ؛ // كل ملصق له زر مقابل nav.push ('<span id = "nav _'+s+'" onClick = "Turn (this)"> </span>') ؛ } html.push ('<viv>'+nav.join ('')+'</viv>') ؛ $ ('#wrap'). html (html.join ('')) ؛ rsort (عشوائي ([0 ، data.length])) ؛ } addphotos () // 6. حساب نطاق الأقسام اليسرى واليمين {يسار: {x: [min ، max] ، y [min ، max]} ، يمين {x: [min ، max] ، y: [min ، max]}}} function Range () {var ran = {left: {x: [] ، y: []} ، {x: [] ، []}} ؛ var wrap = {w: $ ('#wrap'). width () ، // w: 600 ، h: $ ('#wrap'). height ()} var photo = {w: $ ('. photo') [0] .clientwidth ، h: $ ('. photo') [0]. ran.left.y = [0 - photo.h ، wrap.h] ؛ RAN.Right.x = [wrap.w/2 + photo.w/2 ، wrap.w + photo.w] ؛ ran.right.y = ran.left.y ؛ ران. } // 5. فرز وظيفة الملصقات rsort (n) {var _photo = $ ('. photo') ؛ var photos = [] ؛ لـ (var i = 0 ؛ i <_photo.length ؛ i ++) {_photo [i] .className = _photo [i] .classname.replace (// s*phot_center/s*/، '') ؛ _photo [i] .className = _photo [i] .classname.replace (// s*photo-front/s*/، '') ؛ _photo [i] .className = _photo [i] .classname.replace (// s*photo-back/s*/، '') ؛ _photo [i] .className = _photo [i] .classname.replace (// s*photo-back/s*/، '') ؛ // لأن ما سبق قد استبدل كل من الصور الضوئية والخلفية ، _photo [i] .className += 'photo-front' ؛ _photo [i] .style.left = '' ؛ _photo [i] .style.top = '' ؛ _photo [i] .style ['-moz-transform'] = _photo [i] .Style ['transform'] = _photo [i] photos.push (_photo [i]) ؛ } // var photo_center = $ ('#photo _'+n) [0] ؛ var photo_center = document.getElementById ('photo _'+n) ؛ var newClass = photo_center.className + 'photo_center' ؛ //console.log(photo_center.attr('class ')) ؛ phot_center = photos.splice (n ، 1) [0] ؛ //photo_center.className = newClass ؛ $ ('#photo _'+n) .Attr ('class' ، newClass) ؛ // تقسيم الملصق المتبقي إلى جزأين var photos_left = photos.splice (0 ، math.ceil (photos.length/2)) ؛ var photos_right = صور ؛ var ranges = range () ؛ // فرز القسم الأيسر لـ (s في photos_left) {var photo = photo_left [s] ؛ photo.style.left = عشوائي (ranges.left.x) + 'px' ؛ photo.style.top = عشوائي (ranges.left.y) + 'px' ؛ photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = 'rotate ('+random ([-150،150])+'deg) (1)' ؛ } // فرز القسم الأيمن لـ (s in photos_right) {var photo = photos_right [s] ؛ photo.style.left = عشوائي (ranges.right.x) + 'px' ؛ photo.style.top = عشوائي (ranges.right.y) + 'px' ؛ photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = 'rotate ('+random ([-100،100])+'deg) (1)' ؛ } // Control Button Processing var navs = $ ('. i') ؛ لـ (var i = 0 ؛ i <navs.length ؛ i ++) {navs [i] .className = navs [i] .className.replace (// s*i_current/s*/، '') ؛ navs [i] .className = navs [i] .classname.replace (// s*i_back/s*/، '') ؛ } // إضافة $ i_current $ ('#nav _' +n) [0] .className += 'i_current' ؛ } turn turn (elem) {var cls = elem.className ؛ var n = elem.id.split ('_') [1] ؛ if (! (/photo_center/.test (cls))) {rsort (n) ؛ } // يتم تغيير اسم className بعد تنفيذ البيان if أعلاه ، لأنني لا أريد هذا // فئة photo_center var cs = $ ('#photo _'+n) [0] ؛ CLS = Cs.ClassName ؛ if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/، 'photo-back') ؛ $ ('#nav _' +n) [0] .className += 'i_back' ؛ } آخر {cls = cls.replace (/photo-back/، 'photo-pront') $ ('#nav _'+n) [0] .className = $ ('#nav _'+n) [0] .className.Replace (// s*i_back/s*/، '') ؛ } cs.className = cls ؛ } </script>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.