jquery三维立体图片展示特效代码

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

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

以下是 jquery三维立体图片展示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery三维立体图片展示</title>
<link rel="stylesheet" type="text/css" href="f3d_index.css" />
<link rel="stylesheet" type="text/css" href="lib/f3d_slider.css" />
<script type='text/javascript' src='lib/jquery.min.js'></script>
<script type='text/javascript' src='lib/jquery.reflection.js'></script>
<script type='text/javascript' src='lib/jquery.color.js'></script>
<script type='text/javascript' src='lib/f3d.min.js'></script>
<script type="text/javascript">	
jQuery(document).ready(function() {

jQuery.noConflict();

jQuery('#f3d_wrapper').f3d ({

autoStart				: true,

hoverStop				: true,

useReflection			: true,

useShadow				: true,

useMouseX				: true,

useMouseY				: true,

controlsHide			: false,

useLogo					: 'images/logo.png',

activeSlides			: true,

dynamicColors			: false,

sliderWidth				: '100%',

sliderHeight			: '550px',

useVersion				: true,

slide_1					: {'vert': 'bottom', 'horz': 'rightOutside'},

slide_2					: {'vert': 'below', 'horz': 'center'},

slide_3					: {'vert': 'below', 'horz': 'right'},

slide_4					: {'vert': 'bottom', 'horz': 'leftOutside'},

slide_5					: {'vert': 'top', 'horz': 'right'},

slide_6					: {'vert': 'top', 'horz': 'rightOutside'},

});

jQuery("a.tab").click(function (e) { 

jQuery(".active").removeClass("active");   

jQuery(this).addClass("active");

e.preventDefault();

jQuery(".content").slideUp();    

var content_show = jQuery(this).attr("title");  

jQuery("#"+content_show).slideDown();

});

});

</script>

</head>

<body>

<div id="f3d_wrapper">

<div class="f3d_slide">

<div class="f3d_media"><img src="images/ideas.png" /></div>

<div class="f3d_details">

<h1>Welcome to the<br/>Featured 3D slider</h1>

<p><strong>Looks like</strong> it's a Flash movie...<br/>but it is not!</p>
</div>
</div>

<div class="f3d_slide">

<div class="f3d_media"><img src="images/landscape.jpg" /></div>

<div class="f3d_details">

<h1>It's a pure <strong>jQuery code</strong></h1>

<p>that converts static content into a smooth 3D animation</p>
</div>
</div>

<div class="f3d_slide">

<div class="f3d_media"><img src="images/photos.jpg" /></div>

<div class="f3d_details">

<h1>Ready for easy integration</h1>

<p>with any <strong>Wordpress theme</strong> or website in general</p>
</div>
</div>

<div class="f3d_slide">

<div class="f3d_media"><img src="images/watch.jpg" /></div>

<div class="f3d_details">

<h1>Power options</h1>

<p>Give you <strong>flexible control</strong><br/>over the final look<br/>of your presentation</p>
</div>
</div>

<div class="f3d_slide">

<div class="f3d_media"><img src="images/cards.jpg" /></div>

<div class="f3d_details">

<h1>程序员设计师联盟淘宝店<br/>images</h1>

<p>Your hidden trump<br/>to look <strong>unique</strong></p>
</div>
</div>

<div class="f3d_slide">

<div class="f3d_media"><iframe width="500" height="300" src="http://www.baidu.com/" frameborder="0"></iframe></div>

<div class="f3d_details">

<h1>Video content?</h1>

<p>Embedding a <strong>video</strong> is<br/>as <strong>easy</strong> as a child game.</p>

<p><img src="images/icon_youtube.png" /><img src="images/icon_vimeo.png" /><img src="images/icon_flickr.png" /></p>

<p class="normal">Replace slide images with video clips<br/>and you'll get a great 3D video gallery</p>
</div>
</div>
</div><!-- end #f3d_wrapper -->
</body>
</html>

JS代码(jquery.reflection.js):

/*!reflection.js for jQuery v1.1(c) 2006-2011 Christophe Beyls <http://www.digitalia.be>MIT-style license.*/
(function(a){
	a.fn.extend({
	reflect:function(b){
	b=a.extend({
	height:1/3,opacity:0.5}
,b);
	return this.unreflect().each(function(){
	var c=this;
	if(/^img$/i.test(c.tagName)){
	function d(){
	var g=c.width,f=c.height,l,i,m,h,k;
	i=Math.floor((b.height>1)?Math.min(f,b.height):f*b.height);
	l=a("<canvas />")[0];
	if(l.getContext){
	h=l.getContext("2d");
	try{
	a(l).attr({
	width:g,height:i}
);
	h.save();
	h.translate(0,f-1);
	h.scale(1,-1);
	h.drawImage(c,0,0,g,f);
	h.restore();
	h.globalCompositeOperation="destination-out";
	k=h.createLinearGradient(0,0,0,i);
	k.addColorStop(0,"rgba(255,255,255,"+(1-b.opacity)+")");
	k.addColorStop(1,"rgba(255,255,255,1.0)");
	h.fillStyle=k;
	h.rect(0,0,g,i);
	h.fill()}
catch(j){
	return}
}
else{
	if(!a.browser.msie){
	return}
l=a("<img />").attr("src",c.src).css({
	width:g,height:f,marginBottom:i-f,filter:"FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity="+(b.opacity*100)+",FinishOpacity=0,Style=1,StartX=0,StartY=0,FinishX=0,FinishY="+(i/f*100)+")"}
)[0]}
a(l).css({
	display:"block",border:0}
);
	m=a(/^a$/i.test(c.parentNode.tagName)?"<span />":"<div />").insertAfter(c).append([c,l])[0];
	m.className=c.className;
	a.data(c,"reflected",m.style.cssText=c.style.cssText);
	a(m).css({
	width:g,height:f+i,overflow:"hidden"}
);
	c.style.cssText="display:block;
	border:0px";
	c.className="reflected"}
if(c.complete){
	d()}
else{
	a(c).load(d)}
}
}
)}
,unreflect:function(){
	return this.unbind("load").each(function(){
	var c=this,b=a.data(this,"reflected"),d;
	if(b!==undefined){
	d=c.parentNode;
	c.className=d.className;
	c.style.cssText=b;
	a.removeData(c,"reflected");
	d.parentNode.replaceChild(c,d)}
}
)}
}
)}
)(jQuery);

CSS代码(f3d_index.css):

body{font:13px/30px 'Trebuchet MS',Helvetica,sans-serif;color:#333;margin:0 auto;}
input,textarea{padding:7px 0 7px 7px;border-color:#ccc #efefef #efefef #ccc;border-width:1px;border-style:solid;}
input.but{border:1px solid #ccc;padding:4px 10px 4px 10px;cursor:pointer;}
a:link,a:visited{color:#990000;text-decoration:none;}
a:hover{color:#000;text-decoration:underline;}
h1{font-size:50px;line-height:1em;letter-spacing:-0.1em}

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