会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
博客园
首页
新随笔
联系
订阅
管理
滚动双联广告
一个简单的效果,主要考验对queue的理解。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>test-group-following</title> <!-- // <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> --> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} body{font:12px/1.5 arial;background:#fff;} img{border:none 0;} .scroll{position:absolute;left:10px;} .scroll-outer{position:relative;width:145px;height:300px;} .scroll-cont{position:absolute;top:0;left:0;height:280px;border:1px solid #cc0;background:#f1f1f1;} .scroll-close{position:absolute;bottom:0;right:0;display:block;text-decoration:none;} .scroll-close:hover{color:#c00;} </style> </head> <body> <div style="height:3000px;"></div> <div class="scroll"> <div class="scroll-outer"> <div class="scroll-cont"> <a href="#" target="_blank"> <img width="143" height="280" src="http://guniangwang.com/user_upload_img/713/201212/s/20121231110033.jpg" alt="" /> </a> </div> <a href="javascript:void(0)" class="scroll-close">关闭</a> </div> </div> <script type="text/javascript"> (function($){ $.fn.dual = function(options){ var defaults = { delaytime : 1000 }, opts = $.extend(defaults, options), win = $(window), right = this.clone().appendTo('body'), // clone other center = (win.height() - this.height()) / 2, ele = $('.scroll'), close = ele.find('.scroll-close'); right.css({left: 'auto', right: '10px'}); // initialize return ele.each(function(){ var that = $(this); $(this).css({top: center}); win.scroll(function(){ that.animate({top: center + win.scrollTop()}, {duration: opts.delaytime, queue: false}); }); close.click(function(){ that.hide(); }); }); } }(jQuery)); $('.scroll').dual(); // call </script> </body> </html>
运行代码
Form:
jQuery动画高级用法(上)——详解animation中的.queue()函数
jQuery中queue和dequeue的用法
jQuery的deferred对象详解
(from:
狐狸
)
jquery api queue
posted @
2013-01-01 11:42
豪情
阅读(
1251
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告