全国免费服务热线：

18982081108
✕

成都弹性云服务器,成都高防云服务器,互联网数据服务,成都祈钰瑶

成都祈钰瑶 >> 网站建设知识

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

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

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

鼠标经过时候

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

#p#

thumbnail 的DIV代码如下所示

 
 
 
 
    
  
  
  
  
  1. <div id="grid" class="main">
    2. 
  
  
  
  
  2.      <div class="view">
    3. 
  
  
  
  
  3.          <div class="view-back">
    4. 
  
  
  
  
  4.              <span data-icon="A">566</span>
    5. 
  
  
  
  
  5.              <span data-icon="B">124</span>
    6. 
  
  
  
  
  6.              <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
    7. 
  
  
  
  
  7.          </div>
    8. 
  
  
  
  
  8.          <img src="images/1.jpg" />
    9. 
  
  
  
  
  9.      </div>
    10. 
  
  
  
  
  10.      <div class="view">  
    11. 
  
  
  
  
  11.      <!-- ... -->  
    12. 
  
  
  
  
  12.      </div>   
    13. 
  
  
  
  
  13.      <!-- ... -->       
    14. 
  
  
  
  
  14.  </div>
    15.

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

 
 
 
 
    
  
  
  
  
  1. <div class="view">
    2. 
  
  
  
  
  2.      <div class="view-back">
    3. 
  
  
  
  
  3.          <!-- ... -->
    4. 
  
  
  
  
  4.      </div>
    5. 
  
  
  
  
  5.      <div class="slice s1" style="background-image: url(images/1.jpg); ">
    6. 
  
  
  
  
  6.          <span class="overlay"></span>
    7. 
  
  
  
  
  7.          <div class="slice s2" style="background-image: url(images/1.jpg); ">
    8. 
  
  
  
  
  8.              <span class="overlay"></span>
    9. 
  
  
  
  
  9.              <div class="slice s3" style="background-image: url(images/1.jpg); ">
    10. 
  
  
  
  
  10.                  <span class="overlay"></span>
    11. 
  
  
  
  
  11.                  <div class="slice s4" style="background-image: url(images/1.jpg); ">
    12. 
  
  
  
  
  12.                      <span class="overlay"></span>
    13. 
  
  
  
  
  13.                      <div class="slice s5" style="background-image: url(images/1.jpg); ">
    14. 
  
  
  
  
  14.                          <span class="overlay"></span>
    15. 
  
  
  
  
  15.                      </div><!-- /s5 -->
    16. 
  
  
  
  
  16.                  </div><!-- /s4 -->       
    17. 
  
  
  
  
  17.              </div><!-- /s3 -->
    18. 
  
  
  
  
  18.          </div><!-- /s2 -->
    19. 
  
  
  
  
  19.      </div><!-- /s1 -->       
    20. 
  
  
  
  
  20.  </div><!-- /view -->
    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  = '<div class="slice s1">'; 
    7. 
  
  
  
  
  7.                      struct  +='<div class="slice s2">'; 
    8. 
  
  
  
  
  8.                          struct  +='<div class="slice s3">'; 
    9. 
  
  
  
  
  9.                              struct  +='<div class="slice s4">'; 
    10. 
  
  
  
  
  10.                                  struct  +='<div class="slice s5">'; 
    11. 
  
  
  
  
  11.                                  struct  +='</div>'; 
    12. 
  
  
  
  
  12.                              struct  +='</div>'; 
    13. 
  
  
  
  
  13.                          struct  +='</div>'; 
    14. 
  
  
  
  
  14.                      struct  +='</div>'; 
    15. 
  
  
  
  
  15.                  struct  +='</div>';             
    16. 
  
  
  
  
  16.              var $struct = $( struct );       
    17. 
  
  
  
  
  17.              $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );         
    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.
上一篇：将个人PC搭建成小型服务器,简易网站？小网站服务器
下一篇：服务器繁忙请稍后再试怎么解决？（服务器死机）
友情链接 : 成都弹性云服务器　app服务器配置　app服务器配置　安卓播放ftp服务器文件格式　便宜云虚拟主机购买怎么选择带宽　hp服务器怎么看型号和主机号　服务器连接加密保障信息安全　国外网站服务器租用好处有哪些　dns服务器地址设定错误怎么解决　找不到服务器报错怎么解决呢　正确选择网站服务器空间对网站有什么帮助？