محمد بوسكوري نشر 19 يناير 2016 أرسل تقرير مشاركة نشر 19 يناير 2016 على صفحة Html، أتوفر على حلقة تكرار تفرز عناصر div، للحصول في آخر الأمر على نار متحركة، يمثل الشكل التالي كود السكريبت بـ Jquery:var boxes = $('#inner>div'); var speeds = [ 0.5, 0.5, 0.35, 0.45, 0.46, 0.55, 0.5, 0.5 ]; function update() { var width = $('#wrapper').width; for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; var speed = speeds[i]; box.left -= speed; if (box.left < -box.width) { cloud.left = width; } }; window.setTimeout(update, 2000); }; لكن الوظيفة السابقة لا تعطي أي تحرك؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 E.Nourddine نشر 21 يناير 2016 أرسل تقرير مشاركة نشر 21 يناير 2016 عوّض الكود السابق بهذا المثال المرفق أسفله:كود html:<div id="wrapper"> <div id="inner"> <div class="move one">eight</div> <div class="move two">seven</div> <div class="move three">six</div> <div class="move four">five</div> <div class="move five">four</div> <div class="move six">three</div> <div class="move seven">two</div> <div class="move eight">one</div> </div> </div> ملف التنسيق css:* { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; overflow: hidden; text-align: center; } #wrapper { width: 100%; height: 100%; margin: 0% auto; overflow: hidden; position: absolute; } #inner { width: 100%; height: 20vmin; position: absolute; top: 60%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; } .one, .two, .three, .four, .five, .six, .seven, .eight { width: 15vw; height: 10vw; border: 4px solid #222; position: relative; display: inline-block; margin-left: 10px; font-size: 2vmin; line-height: 10vw; cursor: pointer; } .one { margin-left: 0px; } كود Jquery المسؤول عن تحريك Divs:$(function() { console.log($('.eight').offset()); function loop() { $('.move').css({ left: '-90%', }); $('.move').animate({ left: '100%' }, 20500, 'linear', function() { loop(); }); } loop(); }); مثال تطبيقي. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمد بوسكوري
على صفحة Html، أتوفر على حلقة تكرار تفرز عناصر div، للحصول في آخر الأمر على نار متحركة، يمثل الشكل التالي كود السكريبت بـ Jquery:
لكن الوظيفة السابقة لا تعطي أي تحرك؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.