1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>test-group-following</title> 6 <script src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script> 7 <style> 8 *{margin:0;padding:0;} 9 body{font:12px/1.5 arial;background:#fff;} 10 img{border:none 0;} 11 .scroll{position:absolute;left:10px;} 12 .scroll-outer{position:relative;width:145px;height:300px;} 13 .scroll-cont{position:absolute;top:0;left:0;height:280px;border:1px solid #cc0;background:#f1f1f1;} 14 .scroll-close{position:absolute;bottom:0;right:0;display:block;text-decoration:none;} 15 .scroll-close:hover{color:#c00;} 16 </style> 17 </head> 18 <body> 19 <div style="height:3000px;"></div> 20 <div class="scroll"> 21 <div class="scroll-outer"> 22 <div class="scroll-cont"> 23 <a href="#" target="_blank"> 24 <img width="143" height="280" src="http://cui.li/wp-content/uploads/2014/06/117.jpg" alt=""> 25 </a> 26 </div> 27 <a href="javascript:void(0)" class="scroll-close">关闭</a> 28 </div> 29 </div> 30 31 <script> 32 (function($){ 33 $.fn.dual = function(options){ 34 var defaults = { 35 delaytime : 1000 36 }, 37 opts = $.extend(defaults, options), 38 win = $(window), 39 right = this.clone().appendTo('body'), // clone other 40 center = (win.height() - this.height()) / 2, 41 ele = $('.scroll'), 42 close = ele.find('.scroll-close'); 43 right.css({left: 'auto', right: '10px'}); // initialize 44 return ele.each(function(){ 45 var that = $(this); 46 $(this).css({top: center}); 47 win.scroll(function(){ 48 that.animate({top: center + win.scrollTop()}, {duration: opts.delaytime, queue: false}); 49 }); 50 close.click(function(){ 51 that.hide(); 52 }); 53 }); 54 } 55 }(jQuery)); 56 $('.scroll').dual(); // call 57 </script> 58 59 </body> 60 </html>