天天看點

優秀滾動文字清單

可以使用的替代marquee标簽的JS文字滾動代碼。

在以前我們制作滾動文字的時候我們所使用的标簽是,marquee這個标簽用起來也是非常友善的,但是IE8不支援,這點倒是很想吐槽的。你微軟自己做的東西,現在火狐都支援了,但是你自己居然不支援了。

是以我找了一份前輩的代碼。并不是我自己寫的,但是我感覺挺好用的,是以分享給大家。

    把下面的代碼複制粘貼之後就可以直接看到效果,至于代碼格式,以及css樣式我都不想寫了,到時候自己調整一下就行了。這個隻要把下面代碼粘貼然後給其加上ID就可以了,非常友善!

<!DOCTYPE html>

<html >

<head>

<meta charset="UTF-8">

<title>滾動文字代碼</title>

</head>

<body>

<div class="winning_list">

           <ul class="record_box" id="ticker" style="overflow: hidden;"> 

                      <div ><li>

                              <span>222</span>

                              <span>222</span>

                              <span>2222</span>

                           </li></div><div ><li>

                              <span>33333</span>

                              <span>3333</span>

                              <span>3333</span>

                           </li></div><div ><li>

                              <span>4444</span>

                              <span>4444</span>

                              <span>4444</span>

                           </li></div><div ><li>

                              <span>55555</span>

                              <span>5555 </span>

                              <span>5555 </span>

                           </li></div><div ><li>

                              <span>666</span>

                              <span>666</span>

                              <span>666</span>

                           </li></div><div ><li>

                              <span>7777</span>

                              <span>777</span>

                              <span>777</span>

                           </li></div><div ><li>

                              <span>9999</span>

                              <span>9999</span>

                              <span>9999</span>

                           </li></div><div ><li>

                              <span>45678</span>

                              <span>7899</span>

                              <span>7899</span>

                           </li></div><div ><li>

                              <span>45645</span>

                              <span>885464688</span>

                              <span>56</span>

                           </li></div><div ><li>

                              <span>56</span>

                              <span>56</span>

                              <span>56</span>

                           </li></div><div ><li>

                              <span>456</span>

                              <span>546456</span>

                              <span>56456</span>

                           </li></div><div ><li>

                              <span>111</span>

                              <span>111</span>

                              <span>111</span>

                           </li></div></ul>

               </div>

</body>

<script src="C:\Users\Administrator\Desktop\nine_active\js\jquery-1.11.1.min.js"></script>

    <!--這裡是導入的jQuery.js,不然不起作用-->

<script>

var ticker = $("#ticker");

ticker.children().filter("li").each(function () {

    var dt = $(this),

      container = $("<div>");

    dt.next().appendTo(container);

    dt.prependTo(container);

    container.appendTo(ticker);

});

ticker.css("overflow", "hidden");

function animator(currentItem) {

    var distance = currentItem.height();

    duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

    currentItem.animate({ marginTop: -distance }, duration, "linear", function () {

        currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

        animator(currentItem.parent().children(":first"));

    });

};

animator(ticker.children(":first"));

ticker.mouseenter(function () {

    ticker.children().stop();

});

ticker.mouseleave(function () {

    animator(ticker.children(":first"));

});

</script>

</html>

繼續閱讀