当前路径：
星河码客 »
插件特效 »
CSS3和JQUERY带动画效果的图片扇形展示
HTML
All Settings
User Modes
Profile
We ? color
CSS首先,让我们定义包含包装的风格。我们将同样的宽度就像一个色板(尽管他们会占用更多的空间),这样我们可以很容易地中心:.sb-container { position: relative; width: 150px; height: 400px; margin: 30px auto 0 auto;}.sb-container div { position: absolute; top: 0; left: 0; width: 130px; background: #fff; height: 400px; border-radius: 5px; cursor: pointer; text-align: center; background-image: url(../images/fabric.png); transform-origin: 25% 90%; backface-visibility: hidden;}让我们定义一个不同的背景颜色和盒阴影:.sb-container div:nth-child(1){ background-color: #ea2a29; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);}.sb-container div:nth-child(2){ background-color: #f16729; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);}.sb-container div:nth-child(3){ background-color: #f89322; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);}.sb-container div:nth-child(4){ background-color: #ffcf14; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);}.sb-container div:nth-child(5){ background-color: #ffea0d; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);}.sb-container div:nth-child(6){ background-color: #87b11d; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);}.sb-container div:nth-child(7){ background-color: #008253; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);}.sb-container div:nth-child(8){ background-color: #3277b5; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);}.sb-container div:nth-child(9){ background-color: #4c549f; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);}.sb-container div:nth-child(10){ background-color: #764394; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);}.sb-container div:nth-child(11){ background-color: #ca0d86; box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);}我们想让它看起来尽可能的现实,所以我们会给最底部的元素,这是我们的第一个元素,一个非常微妙的阴影。为每个元素后我们将增加第二个影子。最后一个样本将作为封面,所以我们要给它一个特殊的背景和盒阴影:.sb-container div:last-child{ background: #645b5c url(../images/cover.jpg) repeat center center; box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 12px 12px 20px rgba(0,0,0,0.6), inset 2px 2px 0 rgba(255, 255, 255, 0.1);}让我们添加一个小铜扣。为此,我们将使用伪类:后。它将有一个梯度和一盒阴影让它看起来像如果是金属。的位置取决于transform-origin色板,既然我们已经选择了左下角,我们将设置显示位置的黄铜紧固件,:.sb-container div:last-child:after{ content: ''; position: absolute; bottom: 15px; left: 15px; width: 20px; height: 20px; border-radius: 50%; background: #dddddd; background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%); box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1);}让我们风格化标题:.sb-container div h4{ color: rgba(255,255,255,0.9); text-shadow: 1px 1px 1px rgba(0,0,0,0.2); font-weight: 700; font-size: 16px; text-transform: uppercase; border-top: 1px dashed rgba(0,0,0,0.1); border-bottom: 1px dashed rgba(0,0,0,0.1); margin: 5px; padding: 5px; user-select: none;}.sb-container div:last-child h4{ background: rgba(0,0,0,0.2); box-shadow: 0 1px 1px rgba(255,255,255,0.1);}封面大标题会旋转,翻译成正确的位置。这取决于它的大小,所以如果我们使用,换句话说,我们需要调整这些值:.sb-container div:last-child h5{ font-size: 50px; white-space: nowrap; text-align: left; margin: 0; padding: 0; position: absolute; line-height: 50px; top: 0px; left: 0px; color: #111; text-shadow: -1px -1px 1px rgba(255,255,255,0.1); text-transform: uppercase; transform: rotate(-90deg) translateX(-157%) translateY(73px); transform-origin: 0 0; user-select: none;}最后,但并非最不重要,让我们风格化图标类。span.sb-icon{ display: block; height: 70px; width: 70px; margin: 20px auto; user-select: none;}span.sb-icon:before { font-family: 'icons'; font-style: normal; font-weight: normal; speak: none; display: block; text-decoration: inherit; text-align: center; text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); line-height: 64px; width: 100%; font-size: 60px; color: #000; text-shadow: 0 0 1px #000; }.icon-cog:before { content: '\35'; } /* '5' */.icon-flight:before { content: '\37'; } /* '7' */.icon-eye:before { content: '\34'; } /* '4' */.icon-install:before { content: '\39'; } /* '9' */.icon-bag:before { content: '\36'; } /* '6' */.icon-globe:before { content: '\38'; } /* '8' */.icon-picture:before { content: '\32'; } /* '2' */.icon-video:before { content: '\30'; } /* '0' */.icon-download:before { content: '\41'; } /* 'A' */.icon-mobile:before { content: '\42'; } /* 'B' */.icon-camera:before { content: '\33'; } /* '3' */这是所有的风格!现在,让我们做一些效果!JAVASCRIPT让我们先看一看我们的插件选项:$.SwatchBook.defaults = { // index of initial centered item center : 6, // number of degrees that is between each item angleInc : 8, speed : 700, easing : 'ease', // amount in degrees for the opened item's next sibling proximity : 45, // amount in degrees between the opened item's next siblings neighbor : 4, // animate on load onLoadAnim : true, // if it should be closed by default initclosed : false, // index of the element that when clicked, triggers the open/close function // by default there is no such element closeIdx : -1, // open one specific item initially (overrides initclosed) openAt : -1};我们将首先执行_init功能:_init : function( options ) { this.options = $.extend( true, {}, $.SwatchBook.defaults, options ); this.$items = this.$el.children( 'div' ); this.itemsCount = this.$items.length; this.current = -1; this.support = Modernizr.csstransitions; this.cache = []; if( this.options.onLoadAnim ) { this._setTransition(); } if( !this.options.initclosed ) { this._center( this.options.center, this.options.onLoadAnim ); } else { this.isClosed = true; if( !this.options.onLoadAnim ) { this._setTransition(); } } if( this.options.openAt >= 0 && this.options.openAt < this.itemsCount ) { this._openItem( this.$items.eq( this.options.openAt ) ); } this._initEvents(); }最后我们加载项的单击事件。_setTransition : function() { if( this.support ) { this.$items.css( { 'transition': 'all ' + this.options.speed + 'ms ' + this.options.easing } ); } }当我们单击其中一个项目,项目将旋转因此0度。我们还需要旋转它的兄弟姐妹,在这样的方式,我们可以阅读打开项目的内容:_initEvents : function() { var self = this; this.$items.on( 'click.swatchbook', function( event ) { self._openItem( $( this ) ); } ); } _openItem : function( $item ) { var itmIdx = $item.index(); if( itmIdx !== this.current ) { if( this.options.closeIdx !== -1 && itmIdx === this.options.closeIdx ) { this._openclose(); this._setCurrent(); } else { this._setCurrent( $item ); $item.css( { 'transform' : 'rotate(0deg)' } ); this._rotateSiblings( $item ); } } }_rotateSiblings像这样:_rotateSiblings : function( $item ) { var self = this, idx = $item.index(), $cached = this.cache[ idx ], $siblings; if( $cached ) { $siblings = $cached; } else { $siblings = $item.siblings(); this.cache[ idx ] = $siblings; } $siblings.each( function( i ) { var rotateVal = i < idx ? self.options.angleInc * ( i - idx ) : i - idx === 1 ? self.options.proximity : self.options.proximity + ( i - idx - 1 ) * self.options.neighbor; var transformStr = 'rotate(' + rotateVal + 'deg)'; $( this ).css( { 'transform' : transformStr } ); } ); }如果我们希望最初关闭和/或我们指定一个项目来触发打开/关闭功能,点击事件,项目将打开/关闭样本书,根据其目前状况:_openclose : function() { this.isClosed ? this._center( this.options.center, true ) : this.$items.css( { 'transform' : 'rotate(0deg)' } ); this.isClosed = !this.isClosed; }好了，希望对你有帮助 ![CSS3和JQUERY带动画效果的图片扇形展示]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······