使用jQuery和CSS实现超酷缩略图悬浮逼近效果

今天我们为大家介绍一个使用jQuery实现的缩略图逼近效果。主要的想法是当鼠标接近缩略图后，当前的缩略图会放大，并且周围相邻的缩略图也会相应变大一些，当你移动鼠标时，会影响移动方向上的缩略图大小变化，具体效果请大家查看演示。

实例下载

你可以在这个网站http://porscheeveryday.com/ 看到这个效果的原型，这里我们使用jQuery实现了一个jQuery版本的基本效果，希望大家喜欢!

在这个教程中，我们将使用James Padolsey的 jQuery Proximity plugin。

HTML标签

以下代码生成一个无序的缩略图并且添加相关图片描述：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.     
  3.  
    4.   
  
  
  4.          
    5.   
  
  
  5.              
    6.   
  
  
  6.              
    7.   
  
  
  7.                 
    Time
     
    8.   
  
  
  8.                 
    Since time, and his predestinated end
     
    9.   
  
  
  9.             
 
  •     
    •  
  •     
    •  
  •  

    • CSS样式

    以下定义了缩略图居中，并且添加背景图片使得图片产生透明度变化效果

     
 
 
      
  
  
  
    1. pe-thumbs{  
      2.   
  
  
    2.     width: 900px;  
      3.   
  
  
    3.     height: 400px;  
      4.   
  
  
    4.     margin: 20px auto;  
      5.   
  
  
    5.     position: relative;  
      6.   
  
  
    6.     background: transparent url(../images/3.jpg) top center;  
      7.   
  
  
    7.     border: 5px solid #fff;  
      8.   
  
  
    8.     box-shadow: 0 1px 2px rgba(0,0,0,0.2);  
      9.   
  
  
    9. }  
      10.

    同时我们也使用一个RGBA的背景颜色添加一个小点缀到背景图片。

     
 
 
      
  
  
  
    1. .pe-thumbs:before {  
      2.   
  
  
    2.     content: "";  
      3.   
  
  
    3.     display: block;  
      4.   
  
  
    4.     position: absolute;  
      5.   
  
  
    5.     top: 0px;  
      6.   
  
  
    6.     left: 0px;  
      7.   
  
  
    7.     width: 100%;  
      8.   
  
  
    8.     height: 100%;  
      9.   
  
  
    9.     background: rgba(255,102,0,0.2);  
      10.   
  
  
    10. }  
      11.

    列表中的项目将会向左float，并且我们设置锚定和图片的相对位置：

     
 
 
      
  
  
  
    1. .pe-thumbs li{  
      2.   
  
  
    2.     float: left;  
      3.   
  
  
    3.     position: relative;  
      4.   
  
  
    4. }  
      5.   
  
  
    5. .pe-thumbs li a,  
      6.   
  
  
    6. .pe-thumbs li a img{  
      7.   
  
  
    7.     display: block;  
      8.   
  
  
    8.     position: relative;  
      9.   
  
  
    9. }  
      10.

    每一个缩略图都初始100px并且透明度为0.2：

     
 
 
      
  
  
  
    1. .pe-thumbs li a img{  
      2.   
  
  
    2.     width: 100px;  
      3.   
  
  
    3.     opacity: 0.2;  
      4.   
  
  
    4. } 
      5.

    ***我们定义描述内容的样式：

     
 
 
      
  
  
  
    1. .pe-description h3{  
      2.   
  
  
    2.     padding: 10px 10px 0px 10px;  
      3.   
  
  
    3.     line-height: 20px;  
      4.   
  
  
    4.     font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;  
      5.   
  
  
    5.     font-size: 22px;  
      6.   
  
  
    6.     margin: 0px;  
      7.   
  
  
    7. }  
      8.   
  
  
    8. .pe-description p{  
      9.   
  
  
    9.     padding: 10px 0px;  
      10.   
  
  
    10.     margin: 10px;  
      11.   
  
  
    11.     font-size: 11px;  
      12.   
  
  
    12.     font-style: italic;  
      13.   
  
  
    13.     border-top: 1px solid rgba(255,255,255,0.3);  
      14.   
  
  
    14. }  
      15.

    JavaScript代码

    主要的想法是当鼠标悬浮后计算所有的描述容器大小和位置。主要依赖于缩略图的***尺寸及其居于主要wrapper中的位置。例如，当缩略图接近边缘，我们就使得描述区域显示在缩略图左边

    然后我们将帮定逼近事件到图片。主要想法是根据鼠标位置来变化图片大小。一旦图片达到***尺寸，我们设置z-index***，因此位于***层次，并且显示分开的描述。

     
 
 
      
  
  
  
    1. // list of thumbs  
      2.   
  
  
    2. var $list        = $('#pe-thumbs'),  
      3.   
  
  
    3.     // list's width and offset left.  
      4.   
  
  
    4.     // this will be used to know the position of the description container  
      5.   
  
  
    5.     listW        = $list.width(),  
      6.   
  
  
    6.     listL        = $list.offset().left,  
      7.   
  
  
    7.     // the images  
      8.   
  
  
    8.     $elems        = $list.find('img'),  
      9.   
  
  
    9.     // the description containers  
      10.   
  
  
    10.     $descrp        = $list.find('div.pe-description'),  
      11.   
  
  
    11.     // maxScale : maximum scale value the image will have  
      12.   
  
  
    12.     // minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity  
      13.   
  
  
    13.     settings    = {  
      14.   
  
  
    14.         maxScale    : 1.3,  
      15.   
  
  
    15.         maxOpacity    : 0.9,  
      16.   
  
  
    16.         minOpacity    : Number( $elems.css('opacity') )  
      17.   
  
  
    17.     },  
      18.   
  
  
    18.     init        = function() {  
      19.   
  
  
    19.  
      20.   
  
  
    20.         // minScale will be set in the CSS  
      21.   
  
  
    21.         settings.minScale = _getScaleVal() || 1;  
      22.   
  
  
    22.         // preload the images (thumbs)  
      23.   
  
  
    23.         _loadImages( function() {  
      24.   
  
  
    24.  
      25.   
  
  
    25.             _calcDescrp();  
      26.   
  
  
    26.             _initEvents();  
      27.   
  
  
    27.  
      28.   
  
  
    28.         });  
      29.   
  
  
    29.  
      30.   
  
  
    30.     },  
      31.   
  
  
    31.     // Get Value of CSS Scale through JavaScript:  
      32.   
  
  
    32.     // http://css-tricks.com/get-value-of-css-rotation-through-javascript/  
      33.   
  
  
    33.     _getScaleVal= function() {  
      34.   
  
  
    34.  
      35.   
  
  
    35.         var st = window.getComputedStyle($elems.get(0), null),  
      36.   
  
  
    36.             tr = st.getPropertyValue("-webkit-transform") ||  
      37.   
  
  
    37.                  st.getPropertyValue("-moz-transform") ||  
      38.   
  
  
    38.                  st.getPropertyValue("-ms-transform") ||  
      39.   
  
  
    39.                  st.getPropertyValue("-o-transform") ||  
      40.   
  
  
    40.                  st.getPropertyValue("transform") ||  
      41.   
  
  
    41.                  "fail...";  
      42.   
  
  
    42.  
      43.   
  
  
    43.         if( tr !== 'none' ) {       
      44.   
  
  
    44.  
      45.   
  
  
    45.             var values = tr.split('(')[1].split(')')[0].split(','),  
      46.   
  
  
    46.                 a = values[0],  
      47.   
  
  
    47.                 b = values[1],  
      48.   
  
  
    48.                 c = values[2],  
      49.   
  
  
    49.                 d = values[3];  
      50.   
  
  
    50.  
      51.   
  
  
    51.             return Math.sqrt( a * a + b * b );  
      52.   
  
  
    52.  
      53.   
  
  
    53.         }  
      54.   
  
  
    54.  
      55.   
  
  
    55.     },  
      56.   
  
  
    56.     // calculates the style values for the description containers,  
      57.   
  
  
    57.     // based on the settings variable  
      58.   
  
  
    58.     _calcDescrp    = function() {  
      59.   
  
  
    59.  
      60.   
  
  
    60.         $descrp.each( function(i) {  
      61.   
  
  
    61.  
      62.   
  
  
    62.             var $el        = $(this),  
      63.   
  
  
    63.                 $img    = $el.prev(),  
      64.   
  
  
    64.                 img_w    = $img.width(),  
      65.   
  
  
    65.                 img_h    = $img.height(),  
      66.   
  
  
    66.                 img_n_w    = settings.maxScale * img_w,  
      67.   
  
  
    67.                 img_n_h    = settings.maxScale * img_h,  
      68.   
  
  
    68.                 space_t = ( img_n_h - img_h ) / 2,  
      69.   
  
  
    69.                 space_l = ( img_n_w - img_w ) / 2;  
      70.   
  
  
    70.  
      71.   
  
  
    71.             $el.data( 'space_l', space_l ).css({  
      72.   
  
  
    72.                 height    : settings.maxScale * $el.height(),  
      73.   
  
  
    73.                 top        : -space_t,  
      74.   
  
  
    74.                 left    : img_n_w - space_l  
      75.   
  
  
    75.             });  
      76.   
  
  
    76.  
      77.   
  
  
    77.         });  
      78.   
  
  
    78.  
      79.   
  
  
    79.     },  
      80.   
  
  
    80.     _initEvents    = function() {  
      81.   
  
  
    81.  
      82.   
  
  
    82.         $elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {  
      83.   
  
  
    83.  
      84.   
  
  
    84.             var $el            = $(this),  
      85.   
  
  
    85.                 $li            = $el.closest('li'),  
      86.   
  
  
    86.                 $desc        = $el.next(),  
      87.   
  
  
    87.                 scaleVal    = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,  
      88.   
  
  
    88.                 scaleExp    = 'scale(' + scaleVal + ')';  
      89.   
  
  
    89.  
      90.   
  
  
    90.             // change the z-index of the element once  
      91.   
  
  
    91.             // it reaches the maximum scale value  
      92.   
  
  
    92.             // also, show the description container  
      93.   
  
  
    93.             if( scaleVal === settings.maxScale ) {  
      94.   
  
  
    94.  
      95.   
  
  
    95.                 $li.css( 'z-index', 1000 );  
      96.   
  
  
    96.  
      97.   
  
  
    97.                 if( $desc.offset().left + $desc.width() > listL + listW ) {  
      98.   
  
  
    98.  
      99.   
  
  
    99.                     $desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );  
      100.   
  
  
    100.  
      101.   
  
  
    101.                 }  
      102.   
  
  
    102.  
      103.   
  
  
    103.                 $desc.fadeIn( 800 );  
      104.   
  
  
    104.  
      105.   
  
  
    105.             }  
      106.   
  
  
    106.             else {  
      107.   
  
  
    107.  
      108.   
  
  
    108.                 $li.css( 'z-index', 1 );  
      109.   
  
  
    109.  
      110.   
  
  
    110.                 $desc.stop(true,true).hide();  
      111.   
  
  
    111.  
      112.   
  
  
    112.             }      
      113.   
  
  
    113.  
      114.   
  
  
    114.             $el.css({  
      115.   
  
  
    115.                 '-webkit-transform'    : scaleExp,  
      116.   
  
  
    116.                 '-moz-transform'    : scaleExp,  
      117.   
  
  
    117.                 '-o-transform'        : scaleExp,  
      118.   
  
  
    118.                 '-ms-transform'        : scaleExp,  
      119.   
  
  
    119.                 'transform'            : scaleExp,  
      120.   
  
  
    120.                 'opacity'            : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )  
      121.   
  
  
    121.             });  
      122.   
  
  
    122.  
      123.   
  
  
    123.         });  
      124.   
  
  
    124.  
      125.   
  
  
    125.     },  
      126.   
  
  
    126.     _loadImages    = function( callback ) {  
      127.   
  
  
    127.  
      128.   
  
  
    128.         var loaded     = 0,  
      129.   
  
  
    129.             total    = $elems.length;  
      130.   
  
  
    130.  
      131.   
  
  
    131.         $elems.each( function(i) {  
      132.   
  
  
    132.  
      133.   
  
  
    133.             var $el = $(this);  
      134.   
  
  
    134.  
      135.   
  
  
    135.             $('').load( function() {  
      136.   
  
  
    136.  
      137.   
  
  
    137.                 ++loaded;  
      138.   
  
  
    138.                 if( loaded === total )  
      139.   
  
  
    139.                     callback.call();  
      140.   
  
  
    140.  
      141.   
  
  
    141.             }).attr( 'src', $el.attr('src') );  
      142.   
  
  
    142.  
      143.   
  
  
    143.         });  
      144.   
  
  
    144.  
      145.   
  
  
    145.     };  
      146.   
  
  
    146.  
      147.   
  
  
    147. return {  
      148.   
  
  
    148.     init    : init  
      149.   
  
  
    149. };   
      150.

    原文：http://www.cnblogs.com/gbin1/archive/2012/01/09/2317605.html

    文章标题：使用jQuery和CSS实现超酷缩略图悬浮逼近效果
    网站链接：http://www.hantingmc.com/qtweb/news19/475619.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    移动网站建设知识

    行业网站建设

    网站空间　　 　成都网站设计　　 　温江网站建设　　 　成都小程序开发　　 　软文发稿　　 　温江网站制作　　 　营销网站定位　　 　广汉锦华建材　　 　橡塑保温材料　　 　软文推广　　 　成都服务器租赁　　 　关键词优化排名　　 　成都小程序开发　　 　网站设计制作报价　　 　簇桥薇薇新娘　　 　成都移动服务器托管　　 　重庆APP开发　　 　成都网站建设　　 　网站运营　　 　成都网站建设