日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
jQuery實現的3D縮略圖懸停效果

今天我們要告訴你如何創(chuàng)建一些令人興奮的3D使用CSS3和jQuery懸停效果。這一想法的靈感來自于涼爽的懸停效果，再給客戶做網站的時候用的這樣的效果，今天就共享出來

在這個效果當中，我將使用的thumbails，就會發(fā)現一些更多的信息懸停。將創(chuàng)建一個使用jQuery的結構，將允許的圖象出現折疊或彎曲，當他懸停時候。為懸停效果，我們將使用CSS 3D變換。效果如下 演示     下載

鼠標經過時候

看看火狐下面的效果，鼠標經過的時候展示出3D變換效果

#p#

thumbnail 的DIV代碼如下所示

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.          
    4. 
  
  
  
  
  4.              566
    5. 
  
  
  
  
  5.              124
    6. 
  
  
  
  
  6.              →
    7. 
  
  
  
  
  7.          
  •          
  •      
  •       
  •       
  •      
    •   
  •            
  •  

    • 每個縮略圖的背視圖部分，我們要為每個背景圖部分創(chuàng)建與使用JavaScript 類視圖的結構如下：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.      
  •      
  •          
  •          
  •              
  •              
  •                  
  •                  
  •                      
  •                      
  •                          
  •                      
  •                  
    •       
  •              
  •          
  •      
    •       
  •  

    • 每個背景圖鼠標移動的時候都會有各自的形象和作為它的背景圖片，因為我們有一個背景嵌套的結構，這將使我們能夠控制的他的效果。此外，我們將添加一個覆蓋跨度，javascript代碼如下

     
 
 
 
      
  
  
  
  
    1. $.fn.hoverfold = function( args ) { 
      2. 
  
  
  
  
    2.      this.each( function() { 
      3. 
  
  
  
  
    3.          $( this ).children( '.view' ).each( function() { 
      4. 
  
  
  
  
    4.              var $item   = $( this ), 
      5. 
  
  
  
  
    5.                  img     = $item.children( 'img' ).attr( 'src' ), 
      6. 
  
  
  
  
    6.                  struct  = ''; 
      7. 
  
  
  
  
    7.                      struct  +=''; 
      8. 
  
  
  
  
    8.                          struct  +=''; 
      9. 
  
  
  
  
    9.                              struct  +=''; 
      10. 
  
  
  
  
    10.                                  struct  +=''; 
      11. 
  
  
  
  
    11.                                  struct  +='
    ';
  •                              struct  +='';
  •                          struct  +='';
  •                      struct  +='';
  •                  struct  +='';            
  •              var $struct = $( struct );      
  •              $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '' ) );        
  •          } );  
  •      }); 
  •  };

    • CSS代碼如下

     
 
 
 
      
  
  
  
  
    1. .view { 
      2. 
  
  
  
  
    2.      width: 316px; 
      3. 
  
  
  
  
    3.      height: 216px; 
      4. 
  
  
  
  
    4.      margin: 10px; 
      5. 
  
  
  
  
    5.      float: left; 
      6. 
  
  
  
  
    6.      position: relative; 
      7. 
  
  
  
  
    7.      border: 8px solid #fff; 
      8. 
  
  
  
  
    8.      box-shadow: 1px 1px 2px rgba(0,0,0,0.05); 
      9. 
  
  
  
  
    9.      background: #333; 
      10. 
  
  
  
  
    10.      perspective: 500px; 
      11. 
  
  
  
  
    11.  }
      12.

    3D過度效果CSS代碼

     
 
 
 
      
  
  
  
  
    1. .view .slice{ 
      2. 
  
  
  
  
    2.      width: 60px; 
      3. 
  
  
  
  
    3.      height: 100%; 
      4. 
  
  
  
  
    4.      z-index: 100; 
      5. 
  
  
  
  
    5.      transform-style: preserve-3d; 
      6. 
  
  
  
  
    6.      transform-origin: left center; 
      7. 
  
  
  
  
    7.      transition: transform 150ms ease-in-out; 
      8. 
  
  
  
  
    8.        
      9. 
  
  
  
  
    9.  }
      10.

    描述部分的CSS代碼

     
 
 
 
      
  
  
  
  
    1. .view div.view-back{ 
      2. 
  
  
  
  
    2.      width: 50%; 
      3. 
  
  
  
  
    3.      height: 100%; 
      4. 
  
  
  
  
    4.      position: absolute; 
      5. 
  
  
  
  
    5.      right: 0; 
      6. 
  
  
  
  
    6.      background: #666; 
      7. 
  
  
  
  
    7.      z-index: 0; 
      8. 
  
  
  
  
    8.  }
      9.

    前臺風格跨度的代碼

     
 
 
 
      
  
  
  
  
    1. .view-back span { 
      2. 
  
  
  
  
    2.      display: block; 
      3. 
  
  
  
  
    3.      float: right; 
      4. 
  
  
  
  
    4.      padding: 5px 20px 5px; 
      5. 
  
  
  
  
    5.      width: 100%; 
      6. 
  
  
  
  
    6.      text-align: right; 
      7. 
  
  
  
  
    7.      font-size: 16px; 
      8. 
  
  
  
  
    8.      color: rgba(255,255,255,0.6); 
      9. 
  
  
  
  
    9.  } 
      10. 
  
  
  
  
    10.    
      11. 
  
  
  
  
    11.  .view-back span:first-child { 
      12. 
  
  
  
  
    12.      padding-top: 20px; 
      13. 
  
  
  
  
    13.  } 
      14. 
  
  
  
  
    14.    
      15. 
  
  
  
  
    15.  .view-back a { 
      16. 
  
  
  
  
    16.      display: bock; 
      17. 
  
  
  
  
    17.      font-size: 18px; 
      18. 
  
  
  
  
    18.      color: rgba(255,255,255,0.4); 
      19. 
  
  
  
  
    19.      position: absolute; 
      20. 
  
  
  
  
    20.      right: 15px; 
      21. 
  
  
  
  
    21.      bottom: 15px; 
      22. 
  
  
  
  
    22.      border: 2px solid rgba(255,255,255,0.3); 
      23. 
  
  
  
  
    23.      border-radius: 50%; 
      24. 
  
  
  
  
    24.      width: 30px; 
      25. 
  
  
  
  
    25.      height: 30px; 
      26. 
  
  
  
  
    26.      line-height: 22px; 
      27. 
  
  
  
  
    27.      text-align: center; 
      28. 
  
  
  
  
    28.      font-weight: 700; 
      29. 
  
  
  
  
    29.  } 
      30. 
  
  
  
  
    30.    
      31. 
  
  
  
  
    31.  .view-back a:hover { 
      32. 
  
  
  
  
    32.      color: #fff; 
      33. 
  
  
  
  
    33.      border-color: #fff; 
      34. 
  
  
  
  
    34.  }
      35.

    有的瀏覽器不支持3D，我們需要額外的定義這個效果

     
 
 
 
      
  
  
  
  
    1. .view { 
      2. 
  
  
  
  
    2.     overflow: hidden; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .view:hover img { 
      5. 
  
  
  
  
    5.     left: -85px; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. .view div.view-back { 
      8. 
  
  
  
  
    8.     background: #666; 
      9. 
  
  
  
  
    9. }
      10.

    網頁名稱：jQuery實現的3D縮略圖懸停效果
    本文來源：http://www.5511xx.com/article/cosjigd.html

    其他資訊