スクロールデュアル広告
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>