المكوّن الإضافي jQuery "Cycle" الذي يتسبب في عدم مركز المحتوى ، كيف يمكنني إصلاح هذا؟
-
27-09-2019 - |
سؤال
أحاول استخدام المكون الإضافي JQuery "Cycle" (http://jquery.malsup.com/cycle/) لتدوير الشهادات الموجودة داخل <span>
S ... ومع ذلك ، فإن المكون الإضافي يسبب عدم تركيز المحتوى الخاص بي. صباح أمس أشار شخص ما هنا <span>
يتم وضع العناصر على الإطلاق من خلال البرنامج المساعد: $slides.css({position: 'absolute', top:0, left:0}).hide()
لا أعرف JS وما زلت أعمل على HTML/CSS ، لذلك كنت آمل أن يعرف شخص ما هنا حلًا لهذا الأمر ويمكن أن يساعدني. إذا لم يكن حسناً:/
لقد حاولت إضافة left:50%
وعلى الرغم من أنه يركز ، فإن الشريحة مكسورة وكل ما لدي <span>
تظهر S في وقت واحد.
تعديل
ها هي HTML & CSS:
<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />
.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
}
وحده ، كل شيء يعمل كما هو مخطط له. ثم أضيف المكون الإضافي jQuery/Cycle:
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
هذا هو ما يمسح كل شيء. كما هو ، <span>
يتم عرض S واحدًا في كل مرة وتتلاشى إلى الخارج كما لو كان من المفترض ، باستثناء النص لم يعد يتركز بسبب تحديد المواقع المطلقة. لذلك تغيرت left:0
ل left:50%
- ما لا! يتم توسيط النص الذي تم حله للمشكلة ، باستثناء الآن يتم عرض الفتات في نفس الوقت ولا يوجد أي تلاشي داخل/خارج.
المحلول
بدون الكود ، ليس من السهل الاتصال ، لكنني أفترض أن الشهادات ضمن عنصر كتلة من نوع ما. إذا قمت بطلب position:relative
لهذا العنصر الموقع تماما <span>
سيتم احتواء S في الداخل. يجب ألا تطبق حقًا أي أنماط تحديد المواقع على الامتدادات نفسها - بدلاً من تركها إلى المكون الإضافي.
امل ان يساعد
تعديل
حسنًا ، جرب هذا:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
قد تحتاج إلى ضبط عرض <spans>
كذلك لمطابقة عرض div.slideshow