今天在制作个人作品时,要制作通知栏。个人意向是做成上下自动滚动的一种效果。换个思路理解的话,我们可以认为是图片轮播变成了text轮播,同时方向变为了上下。
简单的理一下思路。我们拿两个li来测试。
<ul> <li> <a href="#">通知1</a> </li> <li> <a href="#">通知2</a> </li> </ul>
他们间的上下滚动主要是通过animate()方法,向上平移玩成,拿单一的li来说,就是把他从原来的位置通过margin-top改为负值来向上方移动。所以,我们每次要做的就是选择最上层的li,并同时取得其高。
var $first = $("ul:first");
var height = $first.find("li:first").height();
这样之后就可以在只有的animate平移中知道上移的距离。又因为这是一个不运行的通知栏,在原来的第一个li移动到margin负值后,我们要将其重新插入ul>li队列的最后方,就可以通过appendTo()方法完成,同时原来的第二个li将变为first one。
$first.animate({
"marginTop":-height+"px"},600,function(){
$first.css({
marginTop: 0
}).find("li:first").appendTo($first);
});
如此简单的滚动通知栏的逻辑基本完成。
在此,我们要注意,因为通知栏在不断地滚动,说明这也是一个计时器事件,需要setInterval()帮助完成,而且在用户鼠标移动通知新闻上时,通知栏要第一时间停止滚动。
所以我们要设置一个停止逻辑,即鼠标的:hover状态。
var setTime;
$("ul").hover(function(){
clearInterval(setTime);
},
最后来完善精简整个代码
$(function(){
var setTime;
$("ul").hover(function(){
clearInterval(setTime);
},
function(){
setTime=setInterval(function(){
var $first = $(ul:first");
var height = $first.find("li:first").height();
$first.animate({
"marginTop":-height+"px"},600,function(){
$first.css({
marginTop: 0
}).find("li:first").appendTo($first);
});
},3000);
}).trigger("mouseleave");
});
在帮助文档中,trigger(type, [data])方法 ,我们知道参数type是一个事件对象或者要触发的事件类型。为了让通知栏在用户鼠标离开时再度运行,我就添加了一个触发事件后运行整个计时器。