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

創(chuàng)新互聯(lián)是一家專業(yè)提供大柴旦企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為大柴旦眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

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í)候都會有各自的形象和作為它的背景圖片，因?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過度效果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;   }

前臺風(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縮略圖懸停效果，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：jQuery中怎么實(shí)現(xiàn)3D縮略圖懸停效果
文章路徑：http://jinyejixie.com/article28/jjhojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)