jquery照片画廊过度效果代码

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

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

以下是 jquery照片画廊过度效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>jquery照片画廊过度效果</title>
        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />
         <link type="text/css" rel="Stylesheet" href="css/bar.css" />
        <!-- add scripts -->
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/jqFancyTransitions.1.8.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>

<header>           
<h2></h2>        
</header>
        <div class="main">
            <div id="gallery">
                <img src="images/pic1.jpg" alt="<i>A look to New Jersey <a href='#'>by Hannes Cmarits</a></i>" />
                <img src="images/pic2.jpg" alt="<i>Reflections [color] <a href='#'>by Sven Fennema</a></i>" />
                <img src="images/pic3.jpg" alt="<i>Silk <a href='#'>by Bryan Jolly</a></i>" />
                <img src="images/pic4.jpg" alt="<i>Space City III <a href='#'>by WisoNet</a></i>" />
                <img src="images/pic5.jpg" alt="<i>Forms and reflections <a href='#'>by Sven Fennema</a></i>" />
                <img src="images/pic6.jpg" alt="<i>Skyarena <a href='#'>by Luis Romero</a></i>" />
            </div>
        </div><br>
    </body>
</html>

JS代码(jqFancyTransitions.1.8.min.js):

/** * jqFancyTransitions - jQuery plugin * @version:1.8 (2010/06/13) * @requires jQuery v1.2.2 or later * @author Ivan Lazarevic * Examples and documentation at:http://www.workshop.rs/projects/jqfancytransitions * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html**/
(function($){
	var opts=new Array;
	var level=new Array;
	var img=new Array;
	var links=new Array;
	var titles=new Array;
	var order=new Array;
	var imgInc=new Array;
	var inc=new Array;
	var stripInt=new Array;
	var imgInt=new Array;
	$.fn.jqFancyTransitions=$.fn.jqfancytransitions=function(options){
	init=function(el){
	opts[el.id]=$.extend({
}
,$.fn.jqFancyTransitions.defaults,options);
	img[el.id]=new Array();
	links[el.id]=new Array();
	titles[el.id]=new Array();
	order[el.id]=new Array();
	imgInc[el.id]=0;
	inc[el.id]=0;
	params=opts[el.id];
	if(params.effect=='zipper'){
	params.direction='alternate';
	params.position='alternate';
}
if(params.effect=='wave'){
	params.direction='alternate';
	params.position='top';
}
if(params.effect=='curtain'){
	params.direction='alternate';
	params.position='curtain';
}
stripWidth=parseInt(params.width/params.strips);
	gap=params.width-stripWidth*params.strips;
	stripLeft=0;
	$.each($('#'+el.id+' img'),function(i,item){
	img[el.id][i]=$(item).attr('src');
	links[el.id][i]=$(item).next().attr('href');
	titles[el.id][i]=$(item).attr('alt')?$(item).attr('alt'):'';
	$(item).hide();
}
);
	$('#'+el.id).css({
	'background-image':'url('+img[el.id][0]+')','width':params.width,'height':params.height,'position':'relative','background-position':'top left'}
);
	$('#'+el.id).append("<div class='ft-title' id='ft-title-"+el.id+"' style='position:absolute;
	bottom:0;
	left:0;
	z-index:1000;
	color:#fff;
	background-color:#000;
	'>"+titles[el.id][0]+"</div>");
	if(titles[el.id][imgInc[el.id]])$('#ft-title-'+el.id).css('opacity',opts[el.id].titleOpacity);
	else$('#ft-title-'+el.id).css('opacity',0);
	if(params.navigation){
	$.navigation(el);
	$('#ft-buttons-'+el.id).children().first().addClass('ft-button-'+el.id+'-active');
}
odd=1;
	for(j=1;
	j<params.strips+1;
	j++){
	if(gap>0){
	tstripWidth=stripWidth+1;
	gap--;
}
else{
	tstripWidth=stripWidth;
}
if(params.links)$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px;
	height:"+params.height+"px;
	float:left;
	position:absolute;
	outline:none;
	'></a>");
	else$('#'+el.id).append("<div class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px;
	height:"+params.height+"px;
	float:left;
	position:absolute;
	'></div>");
	$("#ft-"+el.id+j).css({
	'background-position':-stripLeft+'px top','left':stripLeft}
);
	stripLeft+=tstripWidth;
	if(params.position=='bottom')$("#ft-"+el.id+j).css('bottom',0);
	if(j%2==0&&params.position=='alternate')$("#ft-"+el.id+j).css('bottom',0);
	if(params.direction=='fountain'||params.direction=='fountainAlternate'){
	order[el.id][j-1]=parseInt(params.strips/2)-(parseInt(j/2)*odd);
	order[el.id][params.strips-1]=params.strips;
	odd*=-1;
}
else{
	order[el.id][j-1]=j;
}
}
$('.ft-'+el.id).mouseover(function(){
	opts[el.id].pause=true;
}
);
	$('.ft-'+el.id).mouseout(function(){
	opts[el.id].pause=false;
}
);
	$('#ft-title-'+el.id).mouseover(function(){
	opts[el.id].pause=true;
}
);
	$('#ft-title-'+el.id).mouseout(function(){
	opts[el.id].pause=false;
}
);
	clearInterval(imgInt[el.id]);
	imgInt[el.id]=setInterval(function(){
	$.transition(el)}
,params.delay+params.stripDelay*params.strips);
}
;
	$.transition=function(el,direction){
	if(opts[el.id].pause==true)return;
	stripInt[el.id]=setInterval(function(){
	$.strips(order[el.id][inc[el.id]],el)}
,opts[el.id].stripDelay);
	$('#'+el.id).css({
	'background-image':'url('+img[el.id][imgInc[el.id]]+')'}
);
	if(typeof(direction)=="undefined")imgInc[el.id]++;
	elseif(direction=='prev')imgInc[el.id]--;
	elseimgInc[el.id]=direction;
	if(imgInc[el.id]==img[el.id].length){
	imgInc[el.id]=0;
}
if(imgInc[el.id]==-1){
	imgInc[el.id]=img[el.id].length-1;
}
if(titles[el.id][imgInc[el.id]]!=''){
	$('#ft-title-'+el.id).animate({
	opacity:0}
,opts[el.id].titleSpeed,function(){
	$(this).html(titles[el.id][imgInc[el.id]]).animate({
	opacity:opts[el.id].titleOpacity}
,opts[el.id].titleSpeed);
}
);
}
else{
	$('#ft-title-'+el.id).animate({
	opacity:0}
,opts[el.id].titleSpeed);
}
inc[el.id]=0;
	buttons=$('#ft-buttons-'+el.id).children();
	buttons.each(function(index){
	if(index==imgInc[el.id]){
	$(this).addClass('ft-button-'+el.id+'-active');
}
else{
	$(this).removeClass('ft-button-'+el.id+'-active');
}
}
);
	if(opts[el.id].direction=='random')$.fisherYates(order[el.id]);
	if((opts[el.id].direction=='right'&&order[el.id][0]==1)||opts[el.id].direction=='alternate'||opts[el.id].direction=='fountainAlternate')order[el.id].reverse();
}
;
	$.strips=function(itemId,el){
	temp=opts[el.id].strips;
	if(inc[el.id]==temp){
	clearInterval(stripInt[el.id]);
	return;
}
$('.ft-'+el.id).attr('href',links[el.id][imgInc[el.id]]);
	if(opts[el.id].position=='curtain'){
	currWidth=$('#ft-'+el.id+itemId).width();
	$('#ft-'+el.id+itemId).css({
	width:0,opacity:0,'background-image':'url('+img[el.id][imgInc[el.id]]+')'}
);
	$('#ft-'+el.id+itemId).animate({
	width:currWidth,opacity:1}
,1000);
}
else{
	$('#ft-'+el.id+itemId).css({
	height:0,opacity:0,'background-image':'url('+img[el.id][imgInc[el.id]]+')'}
);
	$('#ft-'+el.id+itemId).animate({
	height:opts[el.id].height,opacity:1}
,1000);
}
inc[el.id]++;
}
;
	$.navigation=function(el){
	$('#'+el.id).append("<a href='#' id='ft-prev-"+el.id+"' class='ft-prev'>prev</a>");
	$('#'+el.id).append("<a href='#' id='ft-next-"+el.id+"' class='ft-next'>next</a>");
	$('#ft-prev-'+el.id).css({
	'position':'absolute','top':params.height/2-15,'left':0,'z-index':1001,'line-height':'30px','opacity':0.7}
).click(function(e){
	e.preventDefault();
	$.transition(el,'prev');
	clearInterval(imgInt[el.id]);
	imgInt[el.id]=setInterval(function(){
	$.transition(el)}
,params.delay+params.stripDelay*params.strips);
}
);
	$('#ft-next-'+el.id).css({
	'position':'absolute','top':params.height/2-15,'right':0,'z-index':1001,'line-height':'30px','opacity':0.7}
).click(function(e){
	e.preventDefault();
	$.transition(el);
	clearInterval(imgInt[el.id]);
	imgInt[el.id]=setInterval(function(){
	$.transition(el)}
,params.delay+params.stripDelay*params.strips);
}
);
	$("<div id='ft-buttons-"+el.id+"'></div>").insertAfter($('#'+el.id));
	$('#ft-buttons-'+el.id).css({
	'text-align':'right','padding-top':5,'width':opts[el.id].width}
);
	for(k=1;
	k<img[el.id].length+1;
	k++){
	$('#ft-buttons-'+el.id).append("<a href='#' class='ft-button-"+el.id+"'>"+k+"</a>");
}
$('.ft-button-'+el.id).css({
	'padding':5}
);
	$.each($('.ft-button-'+el.id),function(i,item){
	$(item).click(function(e){
	e.preventDefault();
	$.transition(el,i);
	clearInterval(imgInt[el.id]);
	imgInt[el.id]=setInterval(function(){
	$.transition(el)}
,params.delay+params.stripDelay*params.strips);
}
)}
);
}
$.fisherYates=function(arr){
	var i=arr.length;
	if(i==0)return false;
	while(--i){
	var j=Math.floor(Math.random()*(i+1));
	var tempi=arr[i];
	var tempj=arr[j];
	arr[i]=tempj;
	arr[j]=tempi;
}
}
this.each(function(){
	init(this);
}
);
}
;
	$.fn.jqFancyTransitions.defaults={
	width:500,height:332,strips:10,delay:5000,stripDelay:50,titleOpacity:0.7,titleSpeed:1000,position:'alternate',direction:'fountainAlternate',effect:'',navigation:false,links:false}
;
}
)(jQuery);

JS代码(main.js):

$(function(){
	$('#gallery').jqFancyTransitions({
	effect:'zipper',// wave,zipper,curtain width:850,// width of panel height:600,// height of panel strips:15,// number of strips delay:3000,// delay between images in ms stripDelay:20,// delay beetwen strips in ms titleOpacity:0.8,// opacity of title titleSpeed:2000,// speed of title appereance in ms position:'curtain',// top,bottom,alternate,curtain direction:'fountainAlternate',// left,right,alternate,random,fountain,fountainAlternate navigation:true,// prev and next navigation buttons links:false // show images as links}
);
}
)

CSS代码(bar.css):

html,body{font-size:12px;}
body{padding:30px 0 0 0;font-size:12px;margin:0;height:100%;background-color:#eee;font:12px/1.5 Arial,Tahoma,Helvetica,sans-serif;}
#barframe{width:100%;height:100%;z-index:3;position:absolute;}
#barload{position:absolute;top:50%;font-size:14px;left:48%;z-index:1;color:#888;}
#bar{position:absolute;top:0;left:0;right:0;height:30px;overflow:hidden;background:#ddd url(/images/bar/bar.gif) repeat-x scroll 0 0;color:#fff;z-index:2;line-height:30px;width:100%;}
.barImage{margin:20px 0;}
#bar a,#bar p{display:block;float:left;height:30px;margin:0;}
#bar a{background:transparent url(/images/bar/sp.png) no-repeat scroll 0 0;_background:transparent url(/images/bar/sp-ie6.gif) no-repeat scroll 0 0;overflow:hidden;text-decoration:none;color:#fff;line-height:30px;}
#bar a.logo{width:50px;text-indent:-99999px;}
#bar a.link{background-position:0 -31px;position:relative;padding:0 5px 0 32px;overflow:visible;_padding-left:10px;}
#bar a.link em{width:30px;height:30px;display:block;position:absolute;left:5px;top:0;background:transparent url(/images/bar/sp.png) no-repeat scroll 0 -61px;_display:none;}
#bar a.linkimage em{background-position:-30px -61px;}
#bar a.linkvideo em{background-position:-60px -61px;}
#bar a.link span{width:10px;height:30px;display:block;position:absolute;right:-10px;top:0;background:transparent url(/images/bar/sp.png) no-repeat scroll -390px -31px;_background:transparent url(/images/bar/sp-ie6.gif) no-repeat scroll -390px -31px;}
#bar p.action,#bar p.share,#bar a.keeper,#bar a.next,#bar a.close{position:absolute;top:0;}
#bar a.close{right:5px;width:16px;background-position:-367px -150px;}
#bar a.next{width:86px;background-position:-3px -151px;right:30px;text-indent:-99999px;}
#bar a.next:hover{background-position:-94px -151px;}
#bar a.keeper{right:130px;background:none;_margin-top:5px;}
#bar a.keeper img{width:18px;height:18px;background-color:#fff;border:1px solid #fff;vertical-align:middle;margin-top:-1px;}
#bar p.share{width:151px;right:210px;background:transparent url(/images/bar/sp.png) no-repeat scroll 0 -122px;_background:transparent url(/images/bar/sp-ie6.gif) no-repeat scroll 0 -122px;}
#bar p.share a{background:none;width:18px;display:inline;padding:0;}
#bar p.share a.sina{margin:0 8px;}
#bar p.share a.qq{margin:0 6px 0 2px;}
#bar p.share a.renren{margin:0 6px 0 0;}
#bar p.share a.kaixin{margin:0 5px 0 0;}
#bar p.share a.sohu{margin:0 5px 0 0;}
#bar p.action{right:370px;}
#bar p.action a{padding-left:30px;}
#bar p.action a.keep{background-position:-120px -90px;}
#bar p.action a.keeped{background-position:0 -90px;cursor:default;}
#bar p.action a.comment{background-position:-240px -91px;}
#bar p.action a.flag{background-position:-360px -91px;}
.bartip{width:259px;position:absolute;z-index:4;top:25px;}
.bartip .t{height:15px;background:transparent url(/images/bar/sp.png) scroll no-repeat -1px -180px;_display:none;}
.bartip .b{background:#444;color:#fff;}
.bartip .b .loading{height:100px;background:transparent url(/images/bar/load.gif) scroll no-repeat center center;}
.bartip .f{height:10px;background:transparent url(/images/bar/sp.png) scroll no-repeat -1px -200px;_display:none;}
.bartip .b .form{padding:5px 10px;position:relative;}
.bartip .b .form textarea{width:95%;font-size:12px;height:50px;padding:5px;}
.bartip .b .form a.submit{color:#333;text-decoration:none;position:absolute;background:transparent url(/images/bar/sp.png) scroll no-repeat 0 -210px;_background:transparent url(/images/bar/sp-ie6.gif) no-repeat scroll 0 -210px;padding:5px 21px;top:70px;right:10px;_padding-top:5px;_padding-bottom:0;_line-height:24px;}
.bartip .commentLst h3{margin:0;padding:5px 5px 5px 10px;font-size:12px;}
.bartip .commentLst .item{border-top:1px solid #aaa;overflow:auto;padding:5px 10px;}
.bartip .commentLst .itemf{text-align:right;}
.bartip .commentLst .item a{color:#999;text-decoration:none;}
.bartip .commentLst .item a:hover{text-decoration:underline;}
.bartip .commentLst .item a.user{float:left;margin-top:5px;}
.bartip .commentLst .item a.user img{width:30px;height:30px;border:1px solid #fff;}
.bartip .commentLst .item p{padding-left:40px;margin:0;color:#ccc;}
.bartip .commentLst .item p a{color:#ccc;}
.bartip .commentLst .item p a.username{color:#fff;}
.bartip .commentLst .item p span{display:block;}
.bartip .loginLst{padding:5px 20px;color:#fff;font-size:14px;}
.bartip .loginLst a{color:#fff;}
.done{background:#444;color:#fff;font-size:14px;left:48%;line-height:50px;position:absolute;text-align:center;top:100px;width:60px;height:50px;z-index:10;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;}
.content{margin:30px}
body,h1,h2,h3,h4,h5,h6,div,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
fieldset,img{border:0}
h1,h2,h3,h4,h5,h6{font-size:100%}

CSS代码(main.css):

*{margin:0;padding:0;}
header{background-color:rgba(33,33,33,0.9);color:#fff;display:block;font:14px/1.3 Arial,sans-serif;height:50px;position:relative;}
header h2{font-size:22px;margin:0px auto;padding:10px 0;width:80%;text-align:center;}
header a,a:visited{text-decoration:none;color:#fcfcfc;}
body{background:url("../images/back_3d.jpg") no-repeat scroll top center transparent;}
.main{height:600px;margin:20px auto;position:relative;width:850px;}
.ft-title{background-color:rgba(128,128,128,0.8) !important;font-size:18px;font-weight:bold;height:37px;line-height:40px;margin-right:10px;text-align:right;width:100%;}
.ft-title a{color:#fff;}
.ft-prev,.ft-next{/* CSS3 transform */
 -webkit-transition:all 0.2s ease-in-out 0s;-moz-transition:all 0.2s ease-in-out 0s;-o-transition:all 0.2s ease-in-out 0s;-ms-transition:all 0.2s ease-in-out 0s;transition:all 0.2s ease-in-out 0s;}
.ft-prev{background-color:rgba(128,128,128,0.5);border-color:transparent #0072BC transparent transparent;border-radius:0 30px 30px 0;border-style:solid;border-width:30px;height:0;overflow:hidden;width:0;}
.ft-next{background-color:rgba(128,128,128,0.5);border-color:transparent transparent transparent #0072BC;border-radius:30px 0 0 30px;border-style:solid;border-width:30px;overflow:hidden;width:0;height:0;}
.ft-prev:hover{border-right-color:#00548b;}
.ft-next:hover{border-left-color:#00548b;}
#ft-buttons-gallery a:link,#ft-buttons-gallery a:visited{background-color:#F5F5F5;border:1px solid #EBEBEB;color:#0072BC;font-weight:normal;margin-left:10px;padding:2px 7px;text-decoration:none;width:22px;}
#ft-buttons-gallery a.ft-button-gallery-active{background-color:#DDEEFF;border:1px solid #BBDDFF;color:#0072BC;cursor:default;margin-left:10px;padding:2px 7px;text-decoration:none;}

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