13518219792

NEWS

网站建设资讯

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

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

创新互联是一家专业提供大柴旦企业网站建设,专注与成都网站建设、成都做网站、H5高端网站建设、小程序制作等业务。10年已为大柴旦众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

thumbnail 的DIV代码如下所示

                              566              124              →          

                

                      

                  

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

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

$.fn.hoverfold = function( args ) {       this.each( function() {           $( this ).children( '.view' ).each( function() {               var $item   = $( this ),                   img     = $item.children( 'img' ).attr( 'src' ),                   struct  = '';                       struct  +='';                           struct  +='';                               struct  +='';                                   struct  +='';                                   struct  +='';                               struct  +='';                           struct  +='';                       struct  +='';                   struct  +='';                           var $struct = $( struct );                     $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '' ) );                   } );         });    };

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缩略图悬停效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。