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.shufengxianlan.com/qtweb/news9/357459.html

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

    广告

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

    猜你还喜欢下面的内容

    全网营销推广知识

    行业网站建设

    成都多线机房　　 　ssl证书申请　　 　网站制作公司　　 　SSL证书　　 　重庆网站建设　　 　教育培训网站建设方案　　 　成都服务器托管　　 　成都网站设计　　 　成都圣月服饰　　 　微信营销　　 　眉山服务器租用　　 　温江网站建设　　 　四川黔盛装饰　　 　主机租用　　 　成都网站设计　　 　重庆网络营销　　 　成都网络推广　　 　成都品牌官网设计公司　　 　云服务器　　 　成都企业网站建设公司