日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用jQuery和CSS實(shí)現(xiàn)超酷縮略圖懸浮逼近效果

今天我們?yōu)榇蠹医榻B一個(gè)使用jQuery實(shí)現(xiàn)的縮略圖逼近效果。主要的想法是當(dāng)鼠標(biāo)接近縮略圖后，當(dāng)前的縮略圖會(huì)放大，并且周圍相鄰的縮略圖也會(huì)相應(yīng)變大一些，當(dāng)你移動(dòng)鼠標(biāo)時(shí)，會(huì)影響移動(dòng)方向上的縮略圖大小變化，具體效果請(qǐng)大家查看演示。

實(shí)例下載

你可以在這個(gè)網(wǎng)站http://porscheeveryday.com/ 看到這個(gè)效果的原型，這里我們使用jQuery實(shí)現(xiàn)了一個(gè)jQuery版本的基本效果，希望大家喜歡!

在這個(gè)教程中，我們將使用James Padolsey的 jQuery Proximity plugin。

HTML標(biāo)簽

以下代碼生成一個(gè)無序的縮略圖并且添加相關(guān)圖片描述：

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

    • CSS樣式

    以下定義了縮略圖居中，并且添加背景圖片使得圖片產(chǎn)生透明度變化效果

     
 
 
      
  
  
  
    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.

    同時(shí)我們也使用一個(gè)RGBA的背景顏色添加一個(gè)小點(diǎn)綴到背景圖片。

     
 
 
      
  
  
  
    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.

    列表中的項(xiàng)目將會(huì)向左float，并且我們?cè)O(shè)置錨定和圖片的相對(duì)位置：

     
 
 
      
  
  
  
    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.

    每一個(gè)縮略圖都初始100px并且透明度為0.2：

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

    ***我們定義描述內(nèi)容的樣式：

     
 
 
      
  
  
  
    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代碼

    主要的想法是當(dāng)鼠標(biāo)懸浮后計(jì)算所有的描述容器大小和位置。主要依賴于縮略圖的***尺寸及其居于主要wrapper中的位置。例如，當(dāng)縮略圖接近邊緣，我們就使得描述區(qū)域顯示在縮略圖左邊

    然后我們將幫定逼近事件到圖片。主要想法是根據(jù)鼠標(biāo)位置來變化圖片大小。一旦圖片達(dá)到***尺寸，我們?cè)O(shè)置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


    分享標(biāo)題：使用jQuery和CSS實(shí)現(xiàn)超酷縮略圖懸浮逼近效果
    網(wǎng)站地址：http://www.dlmjj.cn/article/cdgspos.html