jQuery实现的3D缩略图悬停效果

今天我们要告诉你如何创建一些令人兴奋的3D使用CSS3和jQuery悬停效果。这一想法的灵感来自于凉爽的悬停效果，再给客户做网站的时候用的这样的效果，今天就共享出来

在这个效果当中，我将使用的thumbails，就会发现一些更多的信息悬停。将创建一个使用jQuery的结构，将允许的图象出现折叠或弯曲，当他悬停时候。为悬停效果，我们将使用CSS 3D变换。效果如下 演示     下载

鼠标经过时候

看看火狐下面的效果，鼠标经过的时候展示出3D变换效果

#p#

thumbnail 的DIV代码如下所示

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

    • 每个缩略图的背视图部分，我们要为每个背景图部分创建与使用JavaScript 类视图的结构如下：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.      
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.          
      7. 
  
  
  
  
    7.          
      8. 
  
  
  
  
    8.              
      9. 
  
  
  
  
    9.              
      10. 
  
  
  
  
    10.                  
      11. 
  
  
  
  
    11.                  
      12. 
  
  
  
  
    12.                      
      13. 
  
  
  
  
    13.                      
      14. 
  
  
  
  
    14.                          
      15. 
  
  
  
  
    15.                      
      16. 
  
  
  
  
    16.                         
      17. 
  
  
  
  
    17.              
      18. 
  
  
  
  
    18.          
      19. 
  
  
  
  
    19.             
      20. 
  
  
  
  
    20.  
      21.

    每个背景图鼠标移动的时候都会有各自的形象和作为它的背景图片，因为我们有一个背景嵌套的结构，这将使我们能够控制的他的效果。此外，我们将添加一个覆盖跨度，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  +=''; 
      12. 
  
  
  
  
    12.                              struct  +=''; 
      13. 
  
  
  
  
    13.                          struct  +=''; 
      14. 
  
  
  
  
    14.                      struct  +=''; 
      15. 
  
  
  
  
    15.                  struct  +='';             
      16. 
  
  
  
  
    16.              var $struct = $( struct );       
      17. 
  
  
  
  
    17.              $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '' ) );         
      18. 
  
  
  
  
    18.          } );   
      19. 
  
  
  
  
    19.      });  
      20. 
  
  
  
  
    20.  };
      21.

    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.csdahua.cn/qtweb/news9/357459.html

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

    广告

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

    成都快上网为您推荐相关内容

    全网营销推广知识

    行业网站建设

    网站快速收录　　 　成都App定制　　 　jtfdjwx.com　　 　成都app软件开发公司　　 　设计网站　　 　成都广告招牌　　 　成都网站推广　　 　成都网站建设　　 　成都网站设计　　 　成都保温材料　　 　营山产后修复　　 　电商网店　　 　佑馨产后护理　　 　眉山发电机维修　　 　成都企业网站维护　　 　成都广告设计　　 　成都做网站　　 　快照排名　　 　app开发公司　　 　绵阳科技城电信IDC机房