jQuery中怎么實(shí)現(xiàn)3D縮略圖懸停效果

本篇文章給大家分享的是有關(guān)jQuery中怎么實(shí)現(xiàn)3D縮略圖懸停效果，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

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>

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

<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 -->

每個(gè)背景圖鼠標(biāo)移動(dòng)的時(shí)候都會(huì)有各自的形象和作為它的背景圖片，因?yàn)槲覀冇幸粋€(gè)背景嵌套的結(jié)構(gòu)，這將使我們能夠控制的他的效果。此外，我們將添加一個(gè)覆蓋跨度，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過(guò)度效果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;   }

前臺(tái)風(fēng)格跨度的代碼

.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，我們需要額外的定義這個(gè)效果

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

以上就是jQuery中怎么實(shí)現(xiàn)3D縮略圖懸停效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。