|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.loop-scroll-demo { height: 600px; width: 600px; overflow: hidden;}.loop-scroll-demo div { height: 100px; margin: 5px; background-color: gray; text-align: center; font-size: 3em;}</style><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>/*插件实现@author wanglongcopyright zhongsou.com*/$.fn.loopScroll = function() {return this.each(function() {var _interval = 0, self = $(this).hover(function() {clearInterval(_interval);}, function() {_interval = setInterval(function() {var last = self.children(":last"), height = last.height();last.css({ height : 0, opacity : 0 }).prependTo(self).animate({ height : height }, 400, function() {last.animate({ opacity : 1 }, 400);});}, 2000);}).mouseleave();});};/*调用插件方法*/$(function() {$(".loop-scroll-demo").loopScroll();});</script></head><body><div class="loop-scroll-demo"><div>微博01</div><div>微博02</div><div>微博03</div><div>微博04</div><div>微博05</div><div>微博06</div><div>微博07</div><div>微博08</div><div>微博09</div><div>微博10</div><div>微博11</div><div>微博12</div><div>微博13</div><div>微博14</div><div>微博15</div><div>微博16</div><div>微博17</div><div>微博18</div><div>微博19</div><div>微博20</div></div></body></html> |
|