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

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

记得在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);
}

为每个图片项设置相应的样式，定义其位置、透明度。

 

.pe-thumbs li{

    float: left;

    position: relative;

}

.pe-thumbs li a,

.pe-thumbs li a img{

    display: block;

    position: relative;

}

其他部分略过，大家可以看源代码中的内容。下面来看看Javascript部分。

JS部分主要的思路就是当鼠标接近图片后，对利用hover效果来触发，对光标悬停的图片进行位置计算，并将其相连的图片进行对应的样式转换，其中核心的内容就是识别出主容器边缘的图片，并进行相应处理。代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149

// list of thumbs var $list       = $('#pe-thumbs'),     // list's width and offset left.     // this will be used to know the position of the description container     listW       = $list.width(),     listL       = $list.offset().left,     // the images     $elems      = $list.find('img'),     // the description containers     $descrp     = $list.find('div.pe-description'),     // maxScale : maximum scale value the image will have     // minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity     settings    = {         maxScale    : 1.3,         maxOpacity  : 0.9,         minOpacity  : Number( $elems.css('opacity') )     },     init        = function() {             // minScale will be set in the CSS         settings.minScale = _getScaleVal() || 1;         // preload the images (thumbs)         _loadImages( function() {                 _calcDescrp();             _initEvents();             });         },     // Get Value of CSS Scale through JavaScript:     // http://css-tricks.com/get-value-of-css-rotation-through-javascript/     _getScaleVal= function() {             var st = window.getComputedStyle($elems.get(0), null),             tr = st.getPropertyValue("-webkit-transform") ||                  st.getPropertyValue("-moz-transform") ||                  st.getPropertyValue("-ms-transform") ||                  st.getPropertyValue("-o-transform") ||                  st.getPropertyValue("transform") ||                  "fail...";             if( tr !== 'none' ) {                     var values = tr.split('(')[1].split(')')[0].split(','),                 a = values[0],                 b = values[1],                 c = values[2],                 d = values[3];                 return Math.sqrt( a * a + b * b );             }         },     // calculates the style values for the description containers,     // based on the settings variable     _calcDescrp = function() {             $descrp.each( function(i) {                 var $el     = $(this),                 $img    = $el.prev(),                 img_w   = $img.width(),                 img_h   = $img.height(),                 img_n_w = settings.maxScale * img_w,                 img_n_h = settings.maxScale * img_h,                 space_t = ( img_n_h - img_h ) / 2,                 space_l = ( img_n_w - img_w ) / 2;                 $el.data( 'space_l', space_l ).css({                 height  : settings.maxScale * $el.height(),                 top     : -space_t,                 left    : img_n_w - space_l             });             });         },     _initEvents = function() {             $elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {                 var $el         = $(this),                 $li         = $el.closest('li'),                 $desc       = $el.next(),                 scaleVal    = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,                 scaleExp    = 'scale(' + scaleVal + ')';                 // change the z-index of the element once             // it reaches the maximum scale value             // also, show the description container             if( scaleVal === settings.maxScale ) {                     $li.css( 'z-index', 1000 );                     if( $desc.offset().left + $desc.width() > listL + listW ) {                         $desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );                     }                     $desc.fadeIn( 800 );                 }             else {                     $li.css( 'z-index', 1 );                     $desc.stop(true,true).hide();                 }                    $el.css({                 '-webkit-transform' : scaleExp,                 '-moz-transform'    : scaleExp,                 '-o-transform'      : scaleExp,                 '-ms-transform'     : scaleExp,                 'transform'         : scaleExp,                 'opacity'           : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )             });             });         },     _loadImages = function( callback ) {             var loaded  = 0,             total   = $elems.length;             $elems.each( function(i) {                 var $el = $(this);                 $('<IMG>').load( function() {                     ++loaded;                 if( loaded === total )                     callback.call();                 }).attr( 'src', $el.attr('src') );             });         };     return {     init    : init };

参考英文原文http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/ 翻译时非直译，加入了自己的理解。 DEMO  源代码下载 

作者：夜飞羽 来源：www.mxria.com  时间：2012-02-27