仿工商银行通知的循环滚动效果
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
textSlide();
function textSlide() {
var timerID; // 定时id
var obj = $('#notice'); // ul对象
var height = obj.find("li").height(); // li的高度
var marginTop = 0 - height; // margin-top的值
var delay = 2000; // 延时
obj.hover(function () {
clearInterval(timerID); // 清除定时id
}, function () {
timerID = setInterval(moveUp, delay); // 设置定时
});
function moveUp() {
// animate动画
obj.animate({"margin-top": marginTop}, function () {
obj.find("li:first").appendTo(obj); // 将ul中的第一个元素插入到ul的末尾
obj.css("margin-top", 0); // margin-top置为0
});
}
timerID = setInterval(moveUp, delay); // 设置定时
}
</script>
部分源码:
// 详见:http://www.icbc.com.cn/ICBC/html/main/js_new/main.js
// 截取部分源码如下:
// 通知
$.fn.textSlider = function (options) {
var defaults = { //初始化参数
scrollHeight: 30,
line: 1,
speed: '1500',
timer: 5000
};
var opts = $.extend(defaults, options);
this.each(function () {
var timerID;
var obj = $(this);
var $ul = obj.find("ul");
var $height = $ul.find("li").height();
var $Upheight = 0 - opts.line * $height;
obj.hover(function () {
clearInterval(timerID);
}, function () {
timerID = setInterval(moveUp, opts.timer);
});
function moveUp() {
$ul.animate({"margin-top": $Upheight}, opts.speed, function () {
for (i = 0; i < opts.line; i++) { //只有for循环了才可以设置一次滚动的行数
$ul.find("li:first").appendTo($ul);
}
$ul.css("margin-top", 0);
});
};
timerID = setInterval(moveUp, opts.timer);
});
};
$(function () {
$(".notice_main").textSlider({
line: 1
});
})
参考:
http://www.icbc.com.cn/ICBC/html/main/js_new/main.js
https://www.runoob.com/jquery/event-hover.html