可以使用的替代marquee标签的JS文字滚动代码。
在以前我们制作滚动文字的时候我们所使用的标签是，marquee这个标签用起来也是非常方便的，但是IE8不支持，这点倒是很想吐槽的。你微软自己做的东西，现在火狐都支持了，但是你自己居然不支持了。
所以我找了一份前辈的代码。并不是我自己写的，但是我感觉挺好用的，所以分享给大家。
把下面的代码复制粘贴之后就可以直接看到效果，至于代码格式，以及css样式我都不想写了，到时候自己调整一下就行了。这个只要把下面代码粘贴然后给其加上ID就可以了，非常方便！
<!DOCTYPE html>
<html lang="en"><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>
1559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
