八行代码实现的新浪微博滚屏特效-jQuery plugin

8行代码实现的新浪微博滚屏特效-jQuery plugin

<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 wanglong
	copyright 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>

八行代码实现的新浪微博滚屏特效-jQuery plugin

相关推荐