jqueryhtml5模拟3d云彩飘动效果，基于Jquery和html5实现炫酷
的3D焦点图动画
这款HTML5焦点图不仅可以⼿动点击按钮切换图⽚，⽽且还⽀持⾃动切换图⽚，使⽤起来也相当⽅便。如果你需要在⽹站中展⽰产品图⽚，那么这款焦点图插件⾮常适合你。
在线演⽰源码下载
HTML代码
<
>
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;js制作简单的焦点图效果
-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
* Copyright 2011, Pedro Botelho / Codrops
* 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.$ve();
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)',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。