今天我将使用css3的透明效果和Flexslider插件来创建一个响应的网格效果，教程当中创建一个2行3列的2组幻灯片效果，你可以根据需要扩展成自己想要的行数和列数，这个教程使用了 Twitter Bootstrap引导框架来设计网格响应效果。当你查看例子的的时候调整浏览器窗口的大小，看看他是如何适应不同的浏览器宽度的。灯箱图像效果我使用 prettyPhoto 插件。

这些文章可能你也喜欢

HTML CODE

在header标签内加载样式文件和scripts文件

1 
     2 
     3 
     4 
     5 6 7     8     9 

 

代码包含了一个简单的 list,每个list项目由一个2行3列的幻灯片组成，具体到每个图像网格，里面包含了本身的图像，鼠标经过的封面图像，标题和链接，下面的代码只是其中一个list的代码，你可以复制这个代码生成多行幻灯片

1 
     
       2   
      
        3        
       
 4     
        
              5         
         
           6 
          
            7 
            8 
           
             9 
            
             10 
             11 12 
            
13 14 
           
 15 
          
          16 
          
Title 1
17 
          View Details18 
         
19         
         
20         
         
21 
        
        22 
        
             23         
         
24         
         
25         
         
26 
        
        27     
28  
      
29 
     

CSS CODE

 

首先为flexslider类和list列表设置相对定位

.flexslider {
   position:relative;margin-top:100px;    border:none;    border-radius:0;    box-shadow:none;    }    .flexslider .slides > li {
       position: relative;}

现在我们隐藏幻灯片按钮并且使用方向键控制箭头，我将使用透明的png图像来作为上一页和下一页的方向按钮

.flex-control-nav{
   display:none;}.flex-direction-nav a {
       background: url("images/arrows.png") no-repeat 0 0 transparent;    cursor: pointer;    display: block;    height: 40px;    width: 40px;    position: absolute;    text-indent: -9999px;    z-index: 10;}.flex-direction-nav .flex-prev{
   background-position: 0 0;left:46%;top:-60px;}.flexslider:hover .flex-prev{
   left:46%;}.flex-direction-nav .flex-next{
   background-position: -40px 0;left:51%;top:-60px;}.flexslider:hover .flex-next{
    left:51%;}Last thing, we will add the image mask that will appear on mouse hover with a opacity transition effect. We will also set a gradient background for the mask..col4_img .mask_4col{
   width:100%;height:100%;position:absolute;top:0; left:0;text-align:center;background: #A3CF45; /* Old browsers */background: -moz-linear-gradient(top,  #EAE2ED 0%, #c0b5c3 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EAE2ED), color-stop(100%, #c0b5c3 )); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #EAE2ED 0%, #c0b5c3 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #EAE2ED 0%, #c0b5c3 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #EAE2ED 0%, #c0b5c3 100%); /* IE10+ */background: linear-gradient(to bottom, #EAE2ED 0%, #c0b5c3 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAE2ED', endColorstr='#c0b5c3',GradientType=0 ); /* IE6-9 */-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s;-o-transition: all 0.3s ease-out 0s;-ms-transition: all 0.3s ease-out 0s;transition: all 0.3s ease-out 0s;}.col4_img:hover .mask_4col{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;}

JS CODE

为了加载幻灯片效果使用以下代码，其中里面的参数你可以根据需要在init.js文件里面修改

$('.flexslider').flexslider({    animation: "slide",    slideshow: true,    slideshowSpeed: 7000,    animationSpeed: 600,      prevText: 'Prev',    nextText: 'Next'    });

 

要激活灯箱插件，使用下面的代码。

在 html 页的结尾加载 selectivizr.js 文件。弹出的效果如下

$(".slides li:not(.clone) a[rel^='prettyPhoto']").prettyPhoto({    animation_speed: 'normal',    autoplay_slideshow: true,    slideshow: 3000    });

 

 

hide

本文地址：