学步园

 模拟微软首页的Slide效果 http://www.microsoft.com/en/us/default.aspx

 

 

写了一个jquery插件

 

 1 (function ($) { 
 2 $.fn.extend({ 
 3     hSlide: function (timeout) {
 4         $(this).each(function () { 
 5             $(this).each(function (i) {
 6                 if (!$(this).is("ul")) return false; 
 7                 var currentSlide = 0; 
 8                 $(this).css({ 
 9                     padding: 0, 
10                     margin: 0, 
11                     listStyle: "none", 
12                     overflow: "hidden" 
13                 }); 
14                 $(this).children().each(function (i) { 
15                     $(this).attr("index", i); 
16                     $(this).css({ 
17                         padding: 0, 
18                         margin: 0, 
19                         float: "left", 
20                         cursor: function () { return i % 2 == 0 ? "pointer" : "default"; }, 
21                         overflow: "hidden" 
22                     }); 
23                     i % 2 == 0 
24                         ? $(this).hoverIntent({ 
25                             over: function () { 
26                                 $(this).children().first().css({ 
27                                     float: function () { 
28                                         return $(this).parent().attr("index") < currentSlide ? "right" : "left" 
29                                     } 
30                                 }); 
31                                 cur = $(this).parent().children().eq(currentSlide); 
32                                 $(cur).next().stop().animate({ 
33                                         width: $(cur).children().first().width(), 
34                                         opacity: 0 
35                                     }, 
36                                     timeout, 
37                                     function () { 
38                                         $(this).width(0); 
39                                         $(this).prev().width($(this).prev().children().first().width()); 
40                                         $(this).prev().animate({ opacity: 1 }, "fast"); 
41                                     }); 
42                                 $(this).stop().animate({ 
43                                         width: $(this).next().children().first().width(), 
44                                         opacity: 0 
45                                     }, 
46                                     timeout, 
47                                     function () { 
48                                         $(this).width(0); 
49                                         $(this).next().width($(this).next().children().first().width()); 
50                                         $(this).next().animate({ opacity: 1 }, "fast"); 
51                                     }); 
52                                 currentSlide = i; 
53                             }, 
54                             out: function () { }, 
55                             timeout: timeout }) 
56                         :$(this).width(0); 
57                     }); 
58                     $(this).children().first().css({ width: 0, opacity: 1 }); 
59                     $(this).children().first().next().width($(this).children().first().next().children().first().width()); 
60                     return true; 
61                 }); 
62             }); 
63         }
64     }); 
65 })(jQuery);
66 

 

里面有用到另外一个hover延时插件 jquery.hoverIntent。

 

 html代码：

 

 1     <ul class="slide">
 2         <li>
 3             <div class="slides">
 4                 <img src="images/slides1.jpg" /></div>
 5         </li>
 6         <li>
 7             <div class="slidel">
 8                 <img src="images/slidel1.jpg" /></div>
 9         </li>
10         <li>
11             <div class="slides">
12                 <img src="images/slides2.jpg" /></div>
13         </li>
14         <li>
15             <div class="slidel">
16                 <img src="images/slidel2.jpg" /></div>
17         </li>
18         <li>
19             <div class="slides">
20                 <img src="images/slides3.jpg" /></div>
21         </li>
22         <li>
23             <div class="slidel">
24                 <img src="images/slidel3.jpg" /></div>
25         </li>
26     </ul>

 

 规则是：用ul li建立框架 其中第偶数个li为缩略内容 第奇数个li为展开内容。li里必须也只能套一个div，里面放显示的内容（这里显示的是图片）。

必要的CSS：

 

1         .slide{ width:690px; height:325px; background:#EEE;  }
2         .slides{ width:105px; height:325px; }
3         .slidel{ width:480px; height:325px; }

 

CSS的设置较为简单，必须设置的CSS：ul的高度为内容的高度，div的宽度和高度。

 js调用：

 

$(".slide").hSlide(400);

 

 参数为动画的时间(ms)。

实际的效果：

 

• 
• 
• 
• 
• 
• 

 

下载源代码：jQuery.hSlide.zip