今天把博客的公告栏做了一个小效果,如果有2条公告或以上就有个滚动效果,实例请移目前端组公告栏。
jQuery代码 /第二版: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代码: <div id="callboard">
CSS代码:(可根据需求另设) #callboard { height:24px; line-height:24px; overflow:hidden;} #callboard ul { padding:0;} #callboard li { padding:0;} |