如何创建响应的jQuery图像网格效果

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

这些文章可能你也喜欢

使用jQuery打造一个实用的数据传输模态弹出窗体
使用CSS3关键帧动画创建的动态通知气泡
分享纯CSS3编写的的精美动画进度条(附源码)

分享30个开发人员有用的CSS代码片段
让IE浏览器支持RGBA颜色

 演示

HTML CODE

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

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="js/prettyphoto/css/prettyPhoto.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>    
<script src="js/prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>    
<script src="js/init.js" type="text/javascript"></script>

 

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

<section class="flexslider">
  <ul class="slides">
       <li>
    <div class="row">    
        <div class="span4">
<div class="col4_img">
<img src="images/pic1.jpg" alt="" title="" />
<div class="mask_4col">
<div class="mask_elem">
<a class="lightbox" href="images/pic1.jpg" rel="prettyPhoto[gallery]" title=""><img src="images/mglass.png" alt="" title="" /></a>

</div>

</div> 
</div><!--end col4_img-->
<h4>Title 1</h4>
<a href="#" target="_blank">View Details</a>
</div>
        <div class="span4"></div>
        <div class="span4"></div>
</div><!--end-row-->
<div class="row">    
        <div class="span4"></div>
        <div class="span4"></div>
        <div class="span4"></div>
</div><!--end-row-->
    </li>
 </ul>
</section>

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

本文地址：如何创建响应的jQuery图像网格效果