jQuery 3D立体带描述展示

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery 3D立体带描述展示的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>jQuery 3D���������չʾ</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/animate.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>

    <div class="container-narrow">

      <div class="row-fluid item-container" id="example1">
        <div class="popover left" id="popover1" data-left="60" data-top="150">
              <div class="arrow"></div>
              <h3 class="popover-title">Customize Position in HTML</h3>
              <div class="popover-content">
                <p>Short App information. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
              </div>
        </div>
        <div class="popover right" id="popover2" data-left="580" data-top="150">
              <div class="arrow"></div>
              <h3 class="popover-title">Auto delay slideshow</h3>
              <div class="popover-content">
                <p>Move mouse out of this container, and hover the image to puase it. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                  <button class="btn btn-primary">Open in iTunes</button>
              </div>
        </div>
        <div class="popover right" id="popover3" data-left="580" data-top="220">
              <div class="arrow"></div>
              <h3 class="popover-title">App Name 3</h3>
              <div class="popover-content">
                <p>Short App information. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                  <button class="btn btn-info">Open in iTunes</button>
              </div>
        </div>
        <div class="popover right" id="popover4" data-left="580" data-top="80">
              <div class="arrow"></div>
              <h3 class="popover-title">App Name 4</h3>
              <div class="popover-content">
                <p>Short App information. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                  <button class="btn" disabled="disabled">Coming soon...</button>
              </div>
        </div>
        <div class="popover left" id="popover5" data-left="80" data-top="150">
              <div class="arrow"></div>
              <h3 class="popover-title">App Name 5</h3>
              <div class="popover-content">
                <p>Short App information. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                  <button class="btn" disabled="disabled">Coming soon...</button>
              </div>
        </div>

        <div class="grid-container">
            <div class="image-container" data-caption="#popover1"><img src="images/iphone4.png" alt="image" /></div>
            <div class="image-container" data-caption="#popover2"><img src="images/iphone4.png" alt="image" /></div>
            <div class="image-container" data-caption="#popover3"><img src="images/iphone_lockscreen.png" alt="image" /></div>
            <div class="image-container" data-caption="#popover4"><img src="images/iphone_off.png" alt="image" /></div>
            <div class="image-container" data-caption="#popover5"><img src="images/iphone4.png" alt="image" /></div>
        </div>
      </div>
    </div> <!-- /container -->
    <script src="js/jquery.1.8.3.min.js"></script>
    <script src="js/jquery.3dcard.min.js"></script>
    <script>
      jQuery(document).ready(function($) {
          $('#example1').Card3D({
            columns: 4,
            slideshow: true
          });
      });
    </script>
</body>
</html>

JS代码(jquery.3dcard.min.js):

(function(e){
	e.fn.Card3D=function(t){
	function d(e){
	if(s){
	m(e.data.target)}
else{
	b(true)}
}
function m(t){
	E();
	var n=t;
	var u=n.width();
	var a=n.height();
	w(n);
	v=e(n.data("caption"));
	o=n.css({
	"z-index":1001}
).addClass("animated normal_card");
	if(e.browser.msie&&parseInt(e.browser.version,10)<=9){
	u=t.data("size").w;
	a=t.data("size").h;
	o.animate({
	width:u,height:a,top:r.ieTop,left:r.ieLeft}
,300)}
i.data("prevCard",o);
	v=e(n.data("caption")).css({
	position:"absolute",opacity:0,left:v.data("left"),top:v.data("top")}
).show().delay(500).animate({
	opacity:1}
,300,function(){
	if(r.slideshow&&i.is(":visible")&&x){
	T()}
}
);
	s=s==true?false:true}
function b(t){
	g=true;
	t=typeof t!=="undefined"?t:false;
	e(r.imageContainer,i).each(function(t){
	e(this).stop(true,true).animate({
	opacity:1}
,300)}
);
	o=i.data("prevCard");
	if(o){
	o.removeClass("normal_card").addClass("animated tilt_card").css("z-index",100);
	p=o.data("rel");
	i.data("prevCard",o);
	if(e.browser.msie&&parseInt(e.browser.version,10)<=9){
	var n=o.width();
	var u=o.height();
	var a=o.data("size").x;
	var f=o.data("size").y;
	o.css({
	width:n*r.ieScale,height:u*r.ieScale,left:a,top:f}
).data("size",{
	w:n,h:u,x:a,y:f}
)}
}
if(v)v.animate({
	opacity:0}
,300,function(){
	e(this).hide();
	if(r.click2next&&t||x){
	var n=p;
	n++;
	if(n>h.length-1)n=0;
	m(h[n])}
}
);
	s=s==true?false:true}
function w(t){
	e(r.imageContainer,i).each(function(n){
	e(this).animate({
	opacity:r.outFocusOpacity}
,400);
	t.stop(true,true).animate({
	opacity:1}
,300)}
)}
function E(){
	clearInterval(S);
	i.data("interval",S)}
function T(){
	clearInterval(i.data("interval"));
	S=setInterval(function(){
	b()}
,r.slideShowDelay);
	i.data("interval",S)}
var n=this;
	var r=e.extend({
	xPadding:220,yPadding:160,columns:4,imageContainer:".image-container",click2next:false,slideshow:false,slideShowDelay:4e3,outFocusOpacity:.2,ieScale:.4,ieTop:20,ieLeft:240,ieXPadding:220,ieYPadding:240}
,t);
	var i=this;
	var s=true;
	var o;
	var u=r.columns||4;
	var a=0;
	var f=0;
	var l=220;
	var c=160;
	var h=[];
	var p=0;
	e(r.imageContainer,i).each(function(t){
	h[t]=e(this);
	e(this).data("rel",t).css({
	position:"absolute",top:c*f,left:l*a}
);
	if(e.browser.msie&&parseInt(e.browser.version,10)<=9){
	var n=e(this).width();
	var i=e(this).height();
	e(this).addClass("ie-fix").css({
	width:n*r.ieScale,height:i*r.ieScale,top:r.ieYPadding*f,left:r.ieXPadding*a}
);
	var s=e(this).css("left");
	var o=e(this).css("top");
	e(this).data("size",{
	w:n,h:i,x:s,y:o}
)}
if(a+1<u){
	a++}
else{
	a=0;
	f++}
e(this).on("click",{
	target:e(this)}
,d)}
);
	var v;
	var g=true;
	var y;
	i.on("mouseover",function(e){
	x=false}
).on("mouseleave",function(e){
	if(r.slideshow){
	x=r.slideshow;
	T()}
}
);
	var S;
	var x=r.slideshow;
	return this}
}
)(jQuery)

CSS代码(style.css):

body{padding-top:20px;padding-bottom:40px;-webkit-backface-visibility:visible !important;backface-visibility:visible !important;}
.container-narrow{position:relative;margin:0 auto;max-width:960px;}
.container-narrow > hr{margin:8px 0;}
.wrapper{width:92px;margin:0 auto;}
#example1{/*display:none;*/
}
#example2{/*display:none;*/
}
#example3{/*display:none;*/
}
.item-container .popover{position:absolute;top:240px;left:240px;}
.item-container{position:relative;width:100%;height:540px;margin:0px 0 0 0;overflow:hidden;/*-webkit-transform-style:flat;*/
}
.grid-container{position:relative;display:block;width:960px;height:500px;-webkit-transform:translateX(24px) translateY(-64px);-moz-transform:translateX(24px) translateY(-64px);-ms-transform:translateX(24px) translateY(-64px);-o-transform:translateX(24px) translateY(-64px);transform:translateX(24px) translateY(-64px);}
.image-container{cursor:pointer;position:absolute;z-index:100;margin-right:-120px;margin-bottom:-300px;-webkit-transform:scale(0.4) perspective(0px) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);-moz-transform:scale(0.4) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);-o-transform:scale(0.4) rotate(-45deg);transform:scale(0.4) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);-webkit-backface-visibility:visible !important;backface-visibility:visible !important;-webkit-transform-style:flat !important;outline:1px solid transparent;}
.ie-fix{margin-left:80px;}
#example2 .image-container{-webkit-transform:scale(0.4) perspective(0px) rotateX(-50deg) rotateY(0deg) rotateZ(45deg);-moz-transform:scale(0.4) rotateX(-50deg) rotateY(0deg) rotateZ(45deg);-o-transform:scale(0.4) rotate(45deg);transform:scale(0.4) rotateX(-50deg) rotateY(0deg) rotateZ(45deg);box-shadow:4px 4px 24px #635A5A;}
#example3 .image-container{box-shadow:4px 4px 24px #635A5A;}
.image-title{display:inline-block;position:absolute;left:0;bottom:0;height:auto;padding:12px;background:#FFF;opacity:.8;color:#333;width:296px;}
.image-caption{/*display:none;*/
}
@-webkit-keyframes tilt_card{0%{-webkit-transform:scale(1) perspective(0px) rotateZ(0deg) rotateY(0deg);top:90px;left:280px;}
100%{-webkit-transform:scale(0.4) perspective(0px) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);}
}
@-moz-keyframes tilt_card{0%{-moz-transform:scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);top:90px;left:280px;}
100%{-webkit-transform:scale(0.4) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);}
}
@-o-keyframes tilt_card{0%{-o-transform:scale(1) rotate(0deg);top:90px;left:280px;}
100%{/*-o-transform:scale(0.4) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);*/
-o-transform:scale(0.4) rotate(-45deg);}
}
@keyframes tilt_card{0%{/*transform:scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);*/
transform:scale(1) rotate(0deg);top:90px;left:280px;}
100%{transform:scale(0.4) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);}
}
.tilt_card{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;-webkit-animation-name:tilt_card;-moz-animation-name:tilt_card;-o-animation-name:tilt_card;animation-name:tilt_card;}
@-webkit-keyframes tilt_card2{0%{-webkit-transform:scale(1) perspective(0px) rotateZ(0deg) rotateY(0deg);top:90px;left:280px;}
100%{-webkit-transform:scale(0.4) perspective(0px) rotateX(-50deg) rotateY(0deg) rotateZ(45deg);}
}
@-moz-keyframes tilt_card2{0%{-moz-transform:scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);top:90px;left:280px;}
100%{-webkit-transform:scale(0.4) rotateX(-50deg) rotateY(0deg) rotateZ(45deg);}
}
@-o-keyframes tilt_card2{0%{-o-transform:scale(1) rotate(0deg);top:90px;left:280px;}
100%{/*-o-transform:scale(0.4) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);*/
-o-transform:scale(0.4) rotate(45deg);}
}
@keyframes tilt_card2{0%{/*transform:scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);*/
transform:scale(1) rotate(0deg);top:90px;left:280px;}
100%{transform:scale(0.4) rotateX(-50deg) rotateY(0deg) rotateZ(45deg);}
}
#example2 .tilt_card{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;-webkit-animation-name:tilt_card2;-moz-animation-name:tilt_card2;-o-animation-name:tilt_card2;animation-name:tilt_card2;}
@-webkit-keyframes normal_card{0%{-webkit-transform:scale(0.4) perspective(0px) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);}
100%{-webkit-transform:scale(1) perspective(0px) rotateZ(0deg) rotateY(0deg);top:90px;left:280px;}
}
@-moz-keyframes normal_card{0%{-moz-transform:scale(0.4) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);}
100%{-moz-transform:scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);top:90px;left:280px;}
}
@-o-keyframes normal_card{0%{-o-transform:scale(0.4) rotate(-45deg);}
100%{-o-transform:scale(1) rotate(0deg);top:90px;left:280px;}
}
@keyframes normal_card{0%{transform:scale(0.4) rotateX(45deg) rotateY(0deg) rotateZ(-45deg);}
100%{transform:scale(1);top:90px;left:280px;}
}
.normal_card{-webkit-backface-visibility:visible !important;-webkit-animation-name:normal_card;-moz-animation-name:normal_card;-o-animation-name:normal_card;animation-name:normal_card;}
@-webkit-keyframes normal_card2{0%{-webkit-transform:scale(0.4) perspective(0px) rotateX(-50deg) rotateY(0deg) rotateZ(45deg);}
100%{-webkit-transform:scale(1) perspective(0px) rotateZ(0deg) rotateY(0deg);top:90px;left:280px;}
}
@-moz-keyframes normal_card2{0%{-moz-transform:scale(0.4) rotateX(-50deg) rotateY(0deg) rotateZ(45deg);}
100%{-moz-transform:scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);top:90px;left:280px;}
}
@-o-keyframes normal_card2{0%{-o-transform:scale(0.4) rotate(45deg);}
100%{-o-transform:scale(1) rotate(0deg);top:90px;left:280px;}
}
@keyframes normal_card2{0%{transform:scale(0.4) rotateX(-45deg) rotateY(0deg) rotateZ(45deg);}
100%{transform:scale(1);top:90px;left:280px;}
}
#example2 .normal_card{-webkit-backface-visibility:visible !important;-webkit-animation-name:normal_card2;-moz-animation-name:normal_card2;-o-animation-name:normal_card2;animation-name:normal_card2;}

附件:下载该文件资源,减少时间成本(增值服务)