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

創(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代碼如下所示

                              566              124              ' ) );                   } );         });    };

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

前臺(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ì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。