تنفيذ تأثير انزلاق الصورة على أساس جافا سكريبت

اليوم رأيت الصورة المنزلق كتبها شخص آخر. بدا الأمر رائعًا. عند قراءة رمز المصدر ، بدا الأمر صعبًا بعض الشيء. لذلك قمت بتقليدها وكتبت واحدة. كان التأثير هو نفسه صفحة الويب الأصلية ، لكن رمز JS الخاص بي بسيط في المنطق ويجب تحسينه.

ملاحظة: كتبت كاروسيل قبل يومين ، وهذا التوافق ليس جيدًا. عندما كتبت صفحة الويب هذه اليوم ، تابعت هذه الفكرة أيضًا وركضت جيدًا على Google Chrome. لا يمكن تنفيذ العديد من وظائف Firefox. نظرًا لأن لوحة التفاف تستخدم المواقع المطلقة ، يتم تغيير ترجمة الترجمة إلى اليسار. بعد التغييرات ، يعمل كل متصفح بشكل جيد.

الرمز المحدد كما يلي

رمز HTML (لا توجد تعليقات مكتوبة)

 <viv> <h1> parallax slider </h1> <viv> <viv> <div id = "bg_1" style = "left: 0px ؛"> </viv> <div id = "bg_2" style = "left: 0px ؛ style = "left: 0px ؛"> <viv> <img id = "img_1" src = "images/1.jpg"> </div> <viv> <img src = "images/2.jpg"> </viv> <img src = "images/3.jpg src = "images/5.jpg"> </viv> <viv> <img src = "images/6.jpg"> </viv> </viv> <viv> <span id = "perv_btn"> </span> <span id = "next_btn"> id = "show_small"> <ul> <li> <img src = "images/thumbs/1.jpg"> </li> <li> <img src = "images/thumbs/2.jpg"> </li> <li> <img src = "Images/3.jpg" src = "Images/Thumbs/4.jpg"> </li> <li> <img src = "Images/Thumbs/5.jpg"> </li> <li> <img src = "images/thumbs/6.jpg"> </li>

رمز CSS (اقرأها بنفسك):

 * {الهامش: 0 ؛ الحشو: 0 ؛ } html ، body ، .container {width: 100 ٪ ؛ الارتفاع: 100 ٪ Font-Family: 'Microsoft Yahei' ؛ } .Container {background-color: #222 ؛ Overflow-X: Hidden ؛ } .Container H1 {font-size: 50px ؛ اللون: #CCC ؛ محاذاة النص: المركز ؛ خط الرحلة: أكثر جرأة. الارتفاع: 120 بكسل ؛ ارتفاع الخط: 120 بكسل ؛ } .wrap {الموضع: النسبي ؛ العرض: 600 ٪ ؛ الارتفاع: 400 بكسل ؛ أعلى الحدود: 10 بكسل الصلبة #333 ؛ Border-Bottom: 10px Solid #333 ؛ الهامش: 20 بكسل ؛ . العرض: 100 ٪ ؛ الارتفاع: 100 ٪ اليسار: 0 ؛ أعلى: 0 ؛ -webkit-transition: Alls 1s ؛ -moz-transition: Alls 1s ؛ -Ms-Transition: Alls 1s ؛ -O-Transition: Alls 1s ؛ -o-Transition: All 1S ؛ الانتقال: كل 1S ؛ } .bg-1 {background: url (صور/bg1.png) ؛ } .bg-2 {background: url (صور/bg2.png) ؛ } .bg-3 {background: url (صور/bg3.png) ؛ . العرض: 100 ٪ ؛ الارتفاع: 100 ٪ -بكيت ترانس: جميع 1s ؛ -الموز ترانس: كل 1S ؛ -MS الانتقال: كل 1S ؛ -الران: كل 1S ؛ الانتقال: كل 1S ؛ } .panel {width: 16.66 ٪ ؛ الارتفاع: 100 ٪ تعويم: اليسار. } .panel img {display: block ؛ الهامش: 0 Auto ؛ الهامش: 35 بكسل ؛ الحدود الحدودية: 10px ؛ الحدود: 10 بكسل Solid RGBA (143 ، 143 ، 143 ، 0.6) ؛ . العرض: 30 بكسل ؛ الارتفاع: 60px ؛ لون الخلفية: #344133 ؛ الحدود الحدودية: 10px ؛ المؤشر: مؤشر. العتامة: 0.4 ؛ . . . العرض: 680 بكسل ؛ القاع: 20 بكسل ؛ } .show-small ul {list-style: none ؛ } .show-small ul li {float: left ؛ الهامش: 0 10px ؛ الحدود: 5px الصلبة #FFF ؛ العتامة: 0.7 ؛ المؤشر: مؤشر ؛ -webkit الانتقال: الكل .3S ؛ -Moz-transition: All .3s ؛ -MS الانتقال: الكل .3s ؛ -الران: الكل .3s ؛ الانتقال: الكل .3s ؛ . }

رمز JS (تجريبي صغير):

 window.onload = function () {// احصل على العنصر var getDom = function (id) {return typeof id === "string"؟ document.getElementById (id): id ؛ } // احصل على الكائن var img = getDom ('img_1') ؛ var prev = getDom ("perv_btn") ؛ var next = getDom ("next_btn") ؛ var wrap_panel = getDom ('wrap_panel') ؛ var bg_1 = getDom ("bg_1") ؛ var bg_2 = getDom ("bg_2") ؛ var bg_3 = getDom ("bg_3") ؛ var show_small = getDom ("show_small") ؛ var list = show_small.getElementsByTagName ("li") ؛ var wwidth ؛ // end event for element var addevent = function (id ، event ، fn) {var el = getDom (id) || وثيقة؛ if (el.addeventListener) {el.addeventListener (event ، fn ، false) ؛ } آخر إذا (el.attachevent) {el.attachevent ('on' + event ، fn) ؛ }} function init () {// ضع الزر // المسافة اليسرى من زر الأمام = المسافة اليسرى من الصورة + الحدود prev.style.left = img.offsetleft + 10 + 'px' ؛ // المسافة العلوية من الزر الأمامي = المسافة العلوية من الصورة + نصف ارتفاع الصورة - نصف الزر prev.style.top = img.offsettop + img.clientheight/2 - prev.clientheight/2 + 'px' ؛ next.style.left = img.offsetleft + img.clientwidth + 10 - next.clientwidth + 'px' ؛ next.style.top = prev.style.top ؛ // ضع حاوية الصور الصغيرة wwidth = document.documentElement.ClientWidth || document.body.clientwidth ؛ show_small.style.left = (wwidth - show_small.clientwidth)/2 + 'px' ؛ } // وظيفة معالجة الصور الصغيرة small_img () {// تدوير الصورة لـ (var i = 0 ؛ i <list.length ؛ i ++) {// تدوير الاتجاه = math.pow (-1 ، parseint (math.random ()*10)) ؛ قائمة [i] .style = "transform: rotate (" + (Math.Random ()*20*Direction) + "deg)" ؛ } list [0] .style.Opacity = 1 ؛ } function only_one (el ، num) {for (var i = 0 ؛ i <el.length ؛ i ++) {el [i] .style.opacity = 0.7 ؛ } // console.log (num) ؛ el [num] .style.Opacity = 1 ؛ } // عندما يتم تكبير المستعرض ، window.onresize = function () {init () ؛ } // تنفيذ الوظيفة init () ؛ small_img () ؛ addEvent (prev ، 'click' ، function () {// تغيير var oldpos oldpos wrap-panel oldpos = parseint (wrap_panel.style.left) ؛ if (oldpos == 0) -wwidth*(list.length -1) + 'PX' ؛ Parseint (-(Oldpos/wwidth + 1)*100) + 'px' ؛ 1)*500) + 'px' ؛ addEvent (التالي ، "انقر فوق" ، الدالة () {// تغيير var oldpos oldpos arp-panel oldpos = parseint (wrap_panel.style.left) ؛ if (oldpos == -wwidth*(list.length-1)) BG_1.STYLE.LEFT = BG_2.STYLE.LEFT = BG_3.STYLE.LEFT = WRAP_PANEL.STYLE.LEFT = '0PX' ؛ BG_1.STYLE.LEFT = (OldPos - WWIDTH + PARSEINT ((OldPos/WWIDTH + 1)) + 'PX' ؛ + parseint ((Oldpos/wwidth + 1)*500) + 'PX' ؛ }

ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.