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