JS代碼:
function scrollTxt() {
var controls = {},
values = {},
t1 = 500, /*播放動畫的時間*/
t2 = 3000, /*播放時間間隔*/
si;
controls.rollWrap = $("#roll-wrap");
controls.rollWrapUl = controls.rollWrap.children();
controls.rollWrapLIs = controls.rollWrapUl.children();
values.liNums = controls.rollWrapLIs.length;
values.liHeight = controls.rollWrapLIs.eq(0).height();
values.ulHeight = controls.rollWrap.height();
this.init = function () {
autoPlay();
pausePlay();
};
/*滾動*/
function play() {
controls.rollWrapUl.animate({"margin-top": "-" + values.liHeight}, t1, function () {
$(this).css("margin-top", "0").children().eq(0).appendTo($(this));
});
}
/*自動滾動*/
function autoPlay() {
/*如果所有li標籤的高度和大於.roll-wrap的高度則滾動*/
if (values.liHeight * values.liNums > values.ulHeight) {
si = setInterval(function () {
play();
}, t2);
}
}
/*鼠標經過ul時暫停滾動*/
function pausePlay() {
controls.rollWrapUl.on({
"mouseenter": function () {
clearInterval(si);
}
,
"mouseleave": function () {
autoPlay();
}
});
}
}
new scrollTxt().init();
HTML代碼:
<div class="roll-wrap" id="roll-wrap">
<ul>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li>
<a href="#">1111</a>
</li>
</ul>
</div>