精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
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缩略图悬停效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
本文标题：jQuery中怎么实现3D缩略图悬停效果
文章来源：http://cdkjz.cn/article/jjhojp.html
