基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1300 次日期：2016-08-03 16:33:28

溫馨提示：易賢網(wǎng)小編為您整理了“基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫”,方便廣大網(wǎng)友查閱！

這款HTML5焦點圖不僅可以手動點擊按鈕切換圖片，而且還支持自動切換圖片，使用起來也相當(dāng)方便。如果你需要在網(wǎng)站中展示產(chǎn)品圖片，那么這款焦點圖插件非常適合你。

HTML代碼

<a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a>

<a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>

<a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>

<a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>

<a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>

<a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>

<a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>

<a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a>

<a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>

<a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>

<a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a>

<a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a>

</div>

<nav>

</nav>

</section>

CSS代碼

.dg-container{

width: 100%;

height: 450px;

position: relative;

}

.dg-wrapper{

width: 481px;

height: 316px;

margin: 0 auto;

position: relative;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-perspective: 1000px;

-moz-perspective: 1000px;

-o-perspective: 1000px;

-ms-perspective: 1000px;

perspective: 1000px;

}

.dg-wrapper a{

width: 482px;

height: 316px;

display: block;

position: absolute;

left: 0;

top: 0;

background: transparent url(../images/browser.png) no-repeat top left;

box-shadow: 0px 10px 20px rgba(0,0,0,0.3);

}

.dg-wrapper a.dg-transition{

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.dg-wrapper a img{

display: block;

padding: 41px 0px 0px 1px;

}

.dg-wrapper a div{

font-style: italic;

text-align: center;

line-height: 50px;

text-shadow: 1px 1px 1px rgba(255,255,255,0.5);

color: #333;

font-size: 16px;

width: 100%;

bottom: -55px;

display: none;

position: absolute;

}

.dg-wrapper a.dg-center div{

display: block;

}

.dg-container nav{

width: 58px;

position: absolute;

z-index: 1000;

bottom: 40px;

left: 50%;

margin-left: -29px;

}

.dg-container nav span{

text-indent: -9000px;

float: left;

cursor:pointer;

width: 24px;

height: 25px;

opacity: 0.8;

background: transparent url(../images/arrows.png) no-repeat top left;

}

.dg-container nav span:hover{

opacity: 1;

}

.dg-container nav span.dg-next{

background-position: top right;

margin-left: 10px;

}

JavaScript代碼

/**

* jquery.gallery.js

* Free to use under the MIT license.

* Date: Mon Jan 30 2012

(function( $, undefined ) {

* Gallery object.

$.Gallery = function( options, element ) {

this.$el = $( element );

this._init( options );

};

$.Gallery.defaults = {

current : 0, // index of current item

autoplay : false,// slideshow on / off

interval : 2000 // time between transitions

};

$.Gallery.prototype = {

_init : function( options ) {

this.options = $.extend( true, {}, $.Gallery.defaults, options );

// support for 3d / 2d transforms and transitions

this.support3d = Modernizr.csstransforms3d;

this.support2d = Modernizr.csstransforms;

this.supportTrans = Modernizr.csstransitions;

this.$wrapper = this.$el.find('.dg-wrapper');

this.$items = this.$wrapper.children();

this.itemsCount = this.$items.length;

this.$nav = this.$el.find('nav');

this.$navPrev = this.$nav.find('.dg-prev');

this.$navNext = this.$nav.find('.dg-next');

// minimum of 3 items

if( this.itemsCount < 3 ) {

this.$nav.remove();

return false;

}

this.current = this.options.current;

this.isAnim = false;

this.$items.css({

'opacity' : 0,

'visibility': 'hidden'

});

this._validate();

this._layout();

// load the events

this._loadEvents();

// slideshow

if( this.options.autoplay ) {

this._startSlideshow();

}

_validate : function() {

if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {

this.current = 0;

}

_layout : function() {

// current, left and right items

this._setItems();

// current item is not changed

// left and right one are rotated and translated

var leftCSS, rightCSS, currentCSS;

if( this.support3d && this.supportTrans ) {

leftCSS = {

'-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)'

};

rightCSS = {

'-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)'

};

leftCSS.opacity = 1;

leftCSS.visibility = 'visible';

rightCSS.opacity = 1;

rightCSS.visibility = 'visible';

}

else if( this.support2d && this.supportTrans ) {

leftCSS = {

'-webkit-transform' : 'translate(-350px) scale(0.8)',

'-moz-transform' : 'translate(-350px) scale(0.8)',

'-o-transform' : 'translate(-350px) scale(0.8)',

'-ms-transform' : 'translate(-350px) scale(0.8)',

'transform' : 'translate(-350px) scale(0.8)'

};

rightCSS = {

'-webkit-transform' : 'translate(350px) scale(0.8)',

'-moz-transform' : 'translate(350px) scale(0.8)',

'-o-transform' : 'translate(350px) scale(0.8)',

'-ms-transform' : 'translate(350px) scale(0.8)',

'transform' : 'translate(350px) scale(0.8)'

};

currentCSS = {

'z-index' : 999

};

leftCSS.opacity = 1;

leftCSS.visibility = 'visible';

rightCSS.opacity = 1;

rightCSS.visibility = 'visible';

}

this.$leftItm.css( leftCSS || {} );

this.$rightItm.css( rightCSS || {} );

this.$currentItm.css( currentCSS || {} ).css({

'opacity' : 1,

'visibility': 'visible'

}).addClass('dg-center');

_setItems : function() {

this.$items.removeClass('dg-center');

this.$currentItm = this.$items.eq( this.current );

this.$leftItm = ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );

this.$rightItm = ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );

if( !this.support3d && this.support2d && this.supportTrans ) {

this.$items.css( 'z-index', 1 );

this.$currentItm.css( 'z-index', 999 );

}

// next & previous items

if( this.itemsCount > 3 ) {

// next item

this.$nextItm = ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();

this.$nextItm.css( this._getCoordinates('outright') );

// previous item

this.$prevItm = ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();

this.$prevItm.css( this._getCoordinates('outleft') );

}

_loadEvents : function() {

var _self = this;

this.$navPrev.on( 'click.gallery', function( event ) {

if( _self.options.autoplay ) {

clearTimeout( _self.slideshow );

_self.options.autoplay = false;

}

_self._navigate('prev');

return false;

});

this.$navNext.on( 'click.gallery', function( event ) {

if( _self.options.autoplay ) {

clearTimeout( _self.slideshow );

_self.options.autoplay = false;

}

_self._navigate('next');

return false;

});

this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {

_self.$currentItm.addClass('dg-center');

_self.$items.removeClass('dg-transition');

_self.isAnim = false;

});

_getCoordinates : function( position ) {

if( this.support3d && this.supportTrans ) {

switch( position ) {

case 'outleft':

return {

'-webkit-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'-moz-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'-o-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'-ms-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'opacity' : 0,

'visibility' : 'hidden'

};

break;

case 'outright':

return {

'-webkit-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'-moz-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'-o-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'-ms-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'opacity' : 0,

'visibility' : 'hidden'

};

break;

case 'left':

return {

'-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'opacity' : 1,

'visibility' : 'visible'

};

break;

case 'right':

return {

'-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'opacity' : 1,

'visibility' : 'visible'

};

break;

case 'center':

return {

'-webkit-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',

'-moz-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',

'-o-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',

'-ms-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',

'transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',

'opacity' : 1,

'visibility' : 'visible'

};

break;

};

}

else if( this.support2d && this.supportTrans ) {

switch( position ) {

case 'outleft':

return {

'-webkit-transform' : 'translate(-450px) scale(0.7)',

'-moz-transform' : 'translate(-450px) scale(0.7)',

'-o-transform' : 'translate(-450px) scale(0.7)',

'-ms-transform' : 'translate(-450px) scale(0.7)',

'transform' : 'translate(-450px) scale(0.7)',

'opacity' : 0,

'visibility' : 'hidden'

};

break;

case 'outright':

return {

'-webkit-transform' : 'translate(450px) scale(0.7)',

'-moz-transform' : 'translate(450px) scale(0.7)',

'-o-transform' : 'translate(450px) scale(0.7)',

'-ms-transform' : 'translate(450px) scale(0.7)',

'transform' : 'translate(450px) scale(0.7)',

'opacity' : 0,

'visibility' : 'hidden'

};

break;

case 'left':

return {

'-webkit-transform' : 'translate(-350px) scale(0.8)',

'-moz-transform' : 'translate(-350px) scale(0.8)',

'-o-transform' : 'translate(-350px) scale(0.8)',

'-ms-transform' : 'translate(-350px) scale(0.8)',

'transform' : 'translate(-350px) scale(0.8)',

'opacity' : 1,

'visibility' : 'visible'

};

break;

case 'right':

return {

'-webkit-transform' : 'translate(350px) scale(0.8)',

'-moz-transform' : 'translate(350px) scale(0.8)',

'-o-transform' : 'translate(350px) scale(0.8)',

'-ms-transform' : 'translate(350px) scale(0.8)',

'transform' : 'translate(350px) scale(0.8)',

'opacity' : 1,

'visibility' : 'visible'

};

break;

case 'center':

return {

'-webkit-transform' : 'translate(0px) scale(1)',

'-moz-transform' : 'translate(0px) scale(1)',

'-o-transform' : 'translate(0px) scale(1)',

'-ms-transform' : 'translate(0px) scale(1)',

'transform' : 'translate(0px) scale(1)',

'opacity' : 1,

'visibility' : 'visible'

};

break;

};

}

else {

switch( position ) {

case 'outleft' :

case 'outright' :

case 'left' :

case 'right' :

return {

'opacity' : 0,

'visibility' : 'hidden'

};

break;

case 'center' :

return {

'opacity' : 1,

'visibility' : 'visible'

};

break;

};

}

_navigate : function( dir ) {

if( this.supportTrans && this.isAnim )

return false;

this.isAnim = true;

switch( dir ) {

case 'next' :

this.current = this.$rightItm.index();

// current item moves left

this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );

// right item moves to the center

this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') );

// next item moves to the right

if( this.$nextItm ) {

// left item moves out

this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );

this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );

}

else {

// left item moves right

this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );

}

break;

case 'prev' :

this.current = this.$leftItm.index();

// current item moves right

this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );

// left item moves to the center

this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );

// prev item moves to the left

if( this.$prevItm ) {

// right item moves out

this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );

this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );

}

else {

// right item moves left

this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );

}

break;

};

this._setItems();

if( !this.supportTrans )

this.$currentItm.addClass('dg-center');

_startSlideshow : function() {

var _self = this;

this.slideshow = setTimeout( function() {

_self._navigate( 'next' );

if( _self.options.autoplay ) {

_self._startSlideshow();

}

}, this.options.interval );

destroy : function() {

this.$navPrev.off('.gallery');

this.$navNext.off('.gallery');

this.$wrapper.off('.gallery');

}

};

var logError = function( message ) {

if ( this.console ) {

console.error( message );

}

};

$.fn.gallery = function( options ) {

if ( typeof options === 'string' ) {

var args = Array.prototype.slice.call( arguments, 1 );

this.each(function() {

var instance = $.data( this, 'gallery' );

if ( !instance ) {

logError( "cannot call methods on gallery prior to initialization; " +

"attempted to call method '" + options + "'" );

return;

}

if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {

logError( "no such method '" + options + "' for gallery instance" );

return;

}

instance[ options ].apply( instance, args );

});

}

else {

this.each(function() {

var instance = $.data( this, 'gallery' );

if ( !instance ) {

$.data( this, 'gallery', new $.Gallery( options, this ) );

}

});

}

return this;

};

})( jQuery );

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

更多信息請查看網(wǎng)絡(luò)編程

上一篇：JS簡單實現(xiàn)String轉(zhuǎn)Date的方法

下一篇：JS判斷是否長按某一鍵的方法

易賢網(wǎng)手機網(wǎng)站地址：基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合