<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿工商银行通知的循环滚动效果</title>
<link rel="stylesheet" href="http://v.icbc.com.cn/userfiles/Resources/ICBC/shouye/images/2017/comm.css">
<!--<script language="javascript" type="text/javascript" src="http://www.icbc.com.cn/Portal_Resources/Common/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://www.icbc.com.cn/ICBC/html/main/js_new/index.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="notice">
<div class="w-center">
<div class="notice_lb">
<p><span><span style="display:none;"> </span></span>重要公告:</p>
</div>
<div class="notice_main">
<ul id="notice" style="margin-top: 0px;">
<li>
<a href="javascript:void(0);" class="data-collecting-sign"><p class="">公告1</p></a>
</li>
<li>
<a href="javascript:void(0);" class="data-collecting-sign"><p class="">公告2</p></a></li>
<li>
<a href="javascript:void(0);" class="data-collecting-sign"><p class="">公告3</p>
</a></li>
<li>
<a href="javascript:void(0);" class="data-collecting-sign" ><p class="">公告4</p></a></li>
</ul>
</div>
<div class="notice_more r">
<p style="width:96px;"><a href="javascript:void(0);" class="data-collecting-sign">更多公告</a></p>
</div>
</div>
</div>
<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>
</body>
</html>
// 详见: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
});
})