天天看点

优秀滚动文字列表

可以使用的替代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>

继续阅读