スクロールデュアル広告

7782 ワード

 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>