jQuery中怎么实现3D缩略图悬停效果

本篇文章给大家分享的是有关jQuery中怎么实现3D缩略图悬停效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

thumbnail 的DIV代码如下所示

<div id="grid" class="main">      <div class="view">          <div class="view-back">              <span data-icon="A">566</span>              <span data-icon="B">124</span>              <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">&rarr;</a>          </div>          <img src="images/1.jpg" />      </div>      <div class="view">        <!-- ... -->        </div>         <!-- ... -->         </div>

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

<div class="view">      <div class="view-back">          <!-- ... -->      </div>      <div class="slice s1" style="background-image: url(images/1.jpg); ">          <span class="overlay"></span>          <div class="slice s2" style="background-image: url(images/1.jpg); ">              <span class="overlay"></span>              <div class="slice s3" style="background-image: url(images/1.jpg); ">                  <span class="overlay"></span>                  <div class="slice s4" style="background-image: url(images/1.jpg); ">                      <span class="overlay"></span>                      <div class="slice s5" style="background-image: url(images/1.jpg); ">                          <span class="overlay"></span>                      </div><!-- /s5 -->                  </div><!-- /s4 -->                     </div><!-- /s3 -->          </div><!-- /s2 -->      </div><!-- /s1 -->         </div><!-- /view -->

每个背景图鼠标移动的时候都会有各自的形象和作为它的背景图片，因为我们有一个背景嵌套的结构，这将使我们能够控制的他的效果。此外，我们将添加一个覆盖跨度，javascript代码如下

$.fn.hoverfold = function( args ) {       this.each( function() {           $( this ).children( '.view' ).each( function() {               var $item   = $( this ),                   img     = $item.children( 'img' ).attr( 'src' ),                   struct  = '<div class="slice s1">';                       struct  +='<div class="slice s2">';                           struct  +='<div class="slice s3">';                               struct  +='<div class="slice s4">';                                   struct  +='<div class="slice s5">';                                   struct  +='</div>';                               struct  +='</div>';                           struct  +='</div>';                       struct  +='</div>';                   struct  +='</div>';                           var $struct = $( struct );                     $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );                   } );         });    };

CSS代码如下

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

3D过度效果CSS代码

.view .slice{       width: 60px;       height: 100%;       z-index: 100;       transform-style: preserve-3d;       transform-origin: left center;       transition: transform 150ms ease-in-out;           }

描述部分的CSS代码

.view div.view-back{       width: 50%;       height: 100%;       position: absolute;       right: 0;       background: #666;       z-index: 0;   }

前台风格跨度的代码

.view-back span {       display: block;       float: right;       padding: 5px 20px 5px;       width: 100%;       text-align: right;       font-size: 16px;       color: rgba(255,255,255,0.6);   }       .view-back span:first-child {       padding-top: 20px;   }       .view-back a {       display: bock;       font-size: 18px;       color: rgba(255,255,255,0.4);       position: absolute;       right: 15px;       bottom: 15px;       border: 2px solid rgba(255,255,255,0.3);       border-radius: 50%;       width: 30px;       height: 30px;       line-height: 22px;       text-align: center;       font-weight: 700;   }       .view-back a:hover {       color: #fff;       border-color: #fff;   }

有的浏览器不支持3D，我们需要额外的定义这个效果

.view {      overflow: hidden;  }  .view:hover img {      left: -85px;  }  .view div.view-back {      background: #666;  }

以上就是jQuery中怎么实现3D缩略图悬停效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。