今天把博客的公告栏做了一个小效果,如果有2条公告或以上就有个滚动效果,实例请移目前端组公告栏。在此感谢Newton同学的耐心指导,不多说了,上代码!或者你可以直接前往DEMO看实例。
jQuery代码
双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
//第二版:Newton改造
( function (win){
var callboarTimer;
var callboard = $( '#callboard' );
var callboardUl = callboard.find( 'ul' );
var callboardLi = callboard.find( 'li' );
var liLen = callboard.find( 'li' ).length;
var initHeight = callboardLi.first().outerHeight( true );
win.autoAnimation = function (){
if (liLen <= 1) return ;
var self = arguments.callee;
var callboardLiFirst = callboard.find( 'li' ).first();
callboardLiFirst.animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer = setTimeout(self, 5000);
});
}
callboard.mouseenter(
function (){
clearTimeout(callboarTimer);
}).mouseleave( function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
});
}(window));
setTimeout(window.autoAnimation, 5000);
|
HTML代码:
双击代码全选
1
2
3
4
5
6
7
8
9
|
< div id = "callboard" >
< ul >
< li >
< a href = "http://www.qianduanzu.com/2012042036.html" >公告:前端组主题正在整理中..有需要用的朋友请留个言,以方便及时通知!</ a >
</ li >
< li >
< span style = "color:red;" >公告:前端组上线一个月零八天,PR升为3,BD权重1</ span >
</ li >
</ ul >
|
CSS代码:(可根据需求另设)
双击代码全选
1
2
3
|
#callboard { height : 24px ; line-height : 24px ; overflow : hidden ;}
#callboard ul { padding : 0 ;}
#callboard li { padding : 0 ;}
|
(责任编辑:12图资源库)