六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 128|回复: 0

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

[复制链接]

升级  40%

4

主题

4

主题

4

主题

童生

Rank: 1

积分
20
 楼主| 发表于 2013-2-7 21:00:55 | 显示全部楼层 |阅读模式
<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>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表