Jquery和CSS3实现图片鱼眼显示效果

realic

Jquery和CSS3实现图片鱼眼显示效果
 
<div class="artcontent">记得在Flex中实现鱼眼效果的图片展示功能非常容易，对于JS而言，则略显复杂。但如今jquery和CSS3的组合，使得这种功能变得异常容易。今天我们就学习如何利用jquery和CSS3来实现各种不同的鱼眼效果。
 基本效果：鼠标移动到图片上时，放大图片同时将该图片周围的图片适当放大，形成一个鱼眼效果，图片依次高亮显示。我们可以参看http://porscheeveryday.com/ 这个swf的显示效果。为了用jquery实现该效果，我们将使用一个插件 jQuery Proximity plugin 作者 James Padolsey.
现在让我们一步步学习如何实现类似的鱼眼效果。首先我们构建主容器展示图片。采用ul无序列表方式来组织图片，代码如下
<ul id="pe-thumbs" class="pe-thumbs">
     <li><a href="#"><img src="images/thumbs/1.jpg" />
             <div class="pe-description"><h3>鱼眼效果</h3><p>美瑞网www.mxria.com</p></div></a></li>
     <li><!-- ... --></li>
</ul>
主容器构建好后，我们接下来定义样式。CSS3代码如下，背景采用透明处理，同时给容器加上了阴影效果。
.pe-thumbs:before {     content: "";     display: block;     position: absolute;     top: 0px;     left: 0px;     width: 100%;     height: 100%;     background: rgba(255,102,0,0.2); } 为了增加更好的效果，我们使用：before伪元素增添了对比效应。这里出现了一个很特别的伪元素：rgba，这里对其简要说明。background在CSS3中得到了大力增强，背景透明效果如上面的代码中有用到，而rgba它的效果类似opacity，可以取得很风骚的半透明的效果，如果应用到合适的配色，效果很赞。最主要的区别是，它不会将该区块里头含有的文字也变成半透明，只是改变容器区块。
   .pe-thumbs:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255,102,0,0.2);
}
为每个图片项设置相应的样式，定义其位置、透明度。
 
<div class="container"><div class="line number1 index0 alt2">.pe-thumbs li{