جار التحديث ...
جار التحديث ...

هل يمكنني عمل شريط أخبار متحرك بالجافاسكريبت بدل ال Marquee

  • 1

هل يمكنني عمل شريط أخبار متحرك بالجافاسكريبت بدل ال Marquee لأنني وجدته صعب التعديل عليه ب ال HTML

إجابات المستخدمين (3)


  • مسؤول
  • قديم العهد
  • قبل أشهر 3

ان تاغ الMarquee تم التخلص منه في الHTML5. وبالرغم من ان بعض المتصفحات لا تزال تدعمه، الا انه سيسبب لك المشاكل.

بالنسبة للبديل، لا حاجة لتعقيد الأمور واستخدام الجافاسكربت. يوجد في الCSS دوال للأنيميشن.

استخدم هذا الكود في صفحة الHTML:

<div class="marquee">
    <p>Test</p>
</div>


اما كود الCSS فهو كالتالي:

.marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}


اذا اردت تعديل السرعة، غير ال"15s" في ال"marquee p" الى اي رقم تريد. الرقم الأصغر يعني سرعة أكبر. بامكانك تغيره مثلا ل"10s" لزيادة السرعة.

واذا اردت ان يتحرك الشريط من اليسار الى اليمين وليس من اليمين الى اليسار (اذا كان الكلام باللغة العربية، ستود فعل هذا)، قم بتغير ال"padding-left: 100%" بال"marquee p" الى "padding-right: 100%"، وأيضا ال"-100%" بال"@keyframes marquee" الى "100%".

واما اذا اردت ايقاف النص عند وضع مؤشر الماوس عليه، ضف هذا الكود على كود الCSS السابق:

.marquee p:hover {
animation-play-state: paused;
}

باقي التعديلات مثل لون الخلفية وحجم الخط سأتركها لك.

اذا كان لديك اي سؤال لا تتردد بالرد على اجابتي. واذا كانت الاجابة صحيحة وقد حللت مشكلتك، اضغط على زر "تحديد كصحيح".




  • 1
رد على التعليق (2)

الردود :


  • قبل أشهر 3

شكرًا صديقي بارك الله فيك ، لدي سؤال : كيف أقوl بإيقاف تحرك النص عند التحديد عليه بال cursor <marquee onmouseover="this.stop()" onmouseout="this.start()"></marquee>

على الرحب قمت بتعديل السؤال لاضافة ما تريده


سجل الدخول لاضافة رد
سجل الدخول لاضافة اجابة جديدة