شريط اخر الأخبار احترافي مقدم من طرف محسن حميان صاحب مدونة حميان للمعلوميات

.markdown

شريط اخر الأخبار احترافي مقدم من طرف محسن حميان صاحب مدونة حميان للمعلوميات

السلام عليكم ورحمة الله وبركاته هذه الأداة عبارة عن شريط متحرك يعرض روابط مواضيع مدونة بلوجر بشكل تلقائي يتميز بعدة خصائص منها توقف الشريط عن التحرك بمجرد وضع سهم الفأرة على اي موضوع معين كما يمكنك التحكم في عدد المواضيع التي تريد عرضها بتغيير المتغير NumOfPost مبرمج بإستعمال Jquery

A Pen by M Zahid Sher Sial on CodePen.

License.

index.html

                <div class="bntool" id='bnby7amian'>
                    <div class="bntitle" id="tito7">آخر الاخبار</div>
                    <div class="bnloop" id="bnmove"></div>
                </div>

script.js

function Article_loop() {
    NumOfArt = $(".bnone").length, WidthOfCon = $("#bnby7amian").width(), WidthOfTito = $("#tito7").width(), Widthsource = WidthOfCon, goku = 0 - WidthOfTito;
    for (let t = 0; t < NumOfArt; t++) goku = 20 + goku + $(".bnone").eq(t).width();
    $("#bnmove").css("margin-right", WidthOfCon + "px"), setInterval(function() {
        1 == hamian && ($("#bnmove").css("margin-right", WidthOfCon + "px"), WidthOfCon < -1 * goku && (WidthOfCon = Widthsource), WidthOfCon -= 1)
    }, 15)
}
NumOfPost = 7, hamian = !0, $("#bnmove").mouseover(function() {
    hamian = !1
}).mouseout(function() {
    hamian = !0
}), $.ajax({
    type: "get",
    url: "https://www.7amian.com/feeds/posts/default?alt=json-in-script&max-results=" + NumOfPost,
    data: "data",
    dataType: "jsonp",
    success: function(t) {
        NumOfEntry = t.feed.openSearch$itemsPerPage.$t, OrderOfLinks = t.feed.entry[0].link.length - 1;
        for (let n = 0; n < NumOfEntry; n++) $("#bnmove").append('<div class="bnone"><a href="' + t.feed.entry[n].link[OrderOfLinks].href + '">' + t.feed.entry[n].link[OrderOfLinks].title + "</a><div>"), n == NumOfEntry - 1 && ($("#bnmove").css("display", "flex"), Article_loop())
    }
});

style.css

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500;800&display=swap');
body{
    margin: 0;
    padding: 5px;
    font-family: 'Tajawal',sans-serif;
    font-size: 15px;
}
.bntool{background-color:#f1f1f1;width:100%;height:40px;text-align:right;direction:rtl;display:flex;flex-direction:row;position:relative;overflow:hidden;border-left:solid 2px #0000aa;box-shadow:0 0 1px #333;border-radius:3px;margin:10px 0}
.bntitle{display:inline-block;font-size:18px;line-height:40px;padding:0 10px;background-color:#001122;color:#fff;border-left:solid 3px #0000aa;z-index:1;border-radius:3px 0 0 3px}
.bntitle::before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' class='bi bi-layout-text-window-reverse' viewBox='0 0 16 16'%3E%3Cpath d='M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z'/%3E%3Cpath d='M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z'/%3E%3C/svg%3E");margin-left:8px;width:20px;height:20px;vertical-align:middle;fill:#fff}
.bnloop{display:none;flex-direction:row;position:absolute;z-index:0}
.bnone{display:flex;flex-shrink:0;font-size:inherit;line-height:40px;margin:0 10px}
.bnone a{color:#000;text-decoration:none}
.bnone a::before{content:"";display:inline-block;background:url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fal' data-icon='file-alt' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23444' d='M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;margin-left:5px;width:13px;height:13px;color:#fff;vertical-align:middle}
.bnone a:hover{color:#0000dd;transition:300ms}