经验分享程序开发文档资料数据资源其它资源

jQuery电影相册大图预览代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery电影相册大图预览代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery电影相册大图预览代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery��Ӱ����ͼԤ������</title>
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/farinspace/jquery.imgpreload.min.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
</head>
<body>
<!-- ���� ��ʼ -->
<div class="gallery_container">
	<div class="gallery_top"></div>
	<div class="gallery_content">
		<div class="gallery_thumbnails">
			<a href="images/gallery/11.jpg" title="��Ӱ��YIYI���ĺ���"><img src="images/gallery/11_min.jpg"/></a>
			<a href="images/gallery/back_to_future.jpg" title="��Ӱ���ط�δ�����ĺ���"><img src="images/gallery/back_to_future_min.jpg"/></a>
			<a href="images/gallery/brave_heart.jpg" title="��Ӱ���¸ҵ��ġ��ĺ���"><img src="images/gallery/brave_heart_min.jpg"/></a>
			<a href="images/gallery/bwbj.jpg" title="��Ӱ�������𼧡��ĺ���"><img src="images/gallery/bwbj_min.jpg"/></a>
			<a href="images/gallery/district9.jpg" title="��Ӱ���ھ������ĺ���"><img src="images/gallery/district9_min.jpg"/></a>
			<a href="images/gallery/effect.jpg" title="��Ӱ������ЧӦ���ĺ���"><img src="images/gallery/effect_min.jpg"/></a>
			<a href="images/gallery/fightClub.jpg" title="��Ӱ�������ᡷ�ĺ���"><img src="images/gallery/fightClub_min.jpg"/></a>
			<a href="images/gallery/forrest.jpg" title="��Ӱ�������������ĺ���"><img src="images/gallery/forrest_min.jpg"/></a>
			<a href="images/gallery/inception.jpg" title="��Ӱ�����οռ䡷�ĺ���"><img src="images/gallery/inception_min.jpg"/></a>
			<a href="images/gallery/jarhead.jpg" title="��Ӱ������ͷ���ĺ���"><img src="images/gallery/jarhead_min.jpg"/></a>
			<a href="images/gallery/lc.jpg" title="��Ӱ���˳����ĺ���"><img src="images/gallery/lc_min.jpg"/></a>
			<a href="images/gallery/lord_of_war.jpg" title="��Ӱ��ս��֮�����ĺ���"><img src="images/gallery/lord_of_war_min.jpg"/></a>
			<a href="images/gallery/metal.jpg" title="��Ӱ��ȫ������ǡ��ĺ���"><img src="images/gallery/metal_min.jpg"/></a>
			<a href="images/gallery/oceans.jpg" title="��Ӱ�����󡷵ĺ���"><img src="images/gallery/oceans_min.jpg"/></a>
			<a href="images/gallery/prestige.jpg" title="��Ӱ������ħ�����ĺ���"><img src="images/gallery/prestige_min.jpg"/></a>
			<a href="images/gallery/rls.jpg" title="��Ӱ������ʦ���ĺ���"><img src="images/gallery/rls_min.jpg"/></a>
			<a href="images/gallery/sixth_sense.jpg" title="��Ӱ�������С��ĺ���"><img src="images/gallery/sixth_sense_min.jpg"/></a>
			<a href="images/gallery/the_boy_in.jpg" title="��Ӱ�����������µ��к����ĺ���"><img src="images/gallery/the_boy_in_min.jpg"/></a>
			<a href="images/gallery/truman.jpg" title="��Ӱ�����ŵ����硷�ĺ���"><img src="images/gallery/truman_min.jpg"/></a>
			<a href="images/gallery/rzdf.jpg" title="��Ӱ�����ӵ��ɡ��ĺ���"><img src="images/gallery/rzdf_min.jpg"/></a>
			<div class="clear_both"></div>
		</div>
		<div class="gallery_preview">
			<a href="images/gallery/11.jpg"></a>
		</div>
		<div class="clear_both"></div>
		<div class="gallery_contact"><p><a class="contactLink" href="#">abc</a></p></div>
		<div class="gallery_caption"></div>
		<div class="clear_both"></div>
		<div class="gallery_preload_area"></div>
	</div>
	<div class="gallery_bottom"></div>
</div>
</body>
</html>

JS代码(gallery.js):

// JavaScript Document// Written by Chris Converse// for Lynda.com$(document).ready(function(){
	// Set these DIVs to show for browsers suporting JavaScipt$('.gallery_data').css('display','block');
	$('.gallery_thumbnails').css('width','500px');
	$('.gallery_preview').css('display','block');
	$('.gallery_caption').css('display','block');
	// Capture the thumbnail links$('.gallery_thumbnails a').click(function(e){
	// Disables standard link behaviore.preventDefault();
	// Sets up variables based on linked thumbnailsvar photo_caption = $(this).attr('title');
	var photo_fullsize = $(this).attr('href');
	var photo_preview = photo_fullsize.replace("_fullsize","_preview");
	// Fade out preview,preload new image,fade preview back in$('.gallery_caption').slideUp(500);
	$('.gallery_preview').fadeOut(500,function(){
	$('.gallery_preload_area').html('<img src="'+photo_preview+'" />');
	$('.gallery_preload_area img').imgpreload(function(){
	$('.gallery_preview').html('<a class="overlayLink" title="'+photo_caption+'" href="'+photo_fullsize+'" style="background-image:url('+photo_preview+');
	"></a>');
	$('.gallery_preview').fadeIn(500);
	$('.gallery_caption').html('<p><a class="overlayLink zoom" title="'+photo_caption+'" href="'+photo_fullsize+'">�鿴��ͼ</a></p><p>'+photo_caption+'</p>');
	$('.gallery_caption').slideDown(500);
	setFancyBoxLinks();
	updateThumbnails();
}
);
}
);
}
);
	// Set the first preview imagevar first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
	var first_photo_fullsize = $('.gallery_thumbnails a').first().attr('href');
	var first_photo_preview = first_photo_fullsize.replace("_fullsize","_preview");
	$('.gallery_preview').html('<a class="overlayLink" title="'+first_photo_caption+'" href="'+first_photo_fullsize+'" style="background-image:url('+first_photo_preview+');
	"></a>');
	$('.gallery_caption').html('<p><a class="overlayLink zoom" title="'+first_photo_caption+'" href="'+first_photo_fullsize+'">�鿴��ͼ</a></p><p>'+first_photo_caption+'<a href="'+first_photo_fullsize+'" style="background-image:url('+first_photo_preview+');
	"></a></p>');
	updateThumbnails();
	setFancyBoxLinks();
}
);
	function setFancyBoxLinks(){
	// Links for Facnybox$("a.overlayLink").fancybox({
	'titlePosition':'over','overlayColor':'#000','overlayOpacity':0.8,'transitionIn':'elastic','transitionOut':'elastic','autoScale':true}
);
}
function updateThumbnails(){
	$('.gallery_thumbnails a').each(function(index){
	if ( $('.gallery_preview a').attr('href') == $(this).attr('href') ){
	$(this).addClass('selected');
	$(this).children().fadeTo(250,.4);
}
else{
	$(this).removeClass('selected');
	$(this).children().css('opacity','1');
}
}
);
}

CSS代码(zzsc.css):

@charset "UTF-8";/* CSS Document */
/* Written by Chris Converse */
/* for Lynda.com */
body{background-color:#000;font-family:Arial;color:#555;font-size:12px;}
p{margin:0px 0px 15px 0px;}
a img{border:none;}
a{color:#fff;}
a:hover{color:#bbb;}
a.contactLink{font-size:.8em;background:url(../images/template/link_email.png) no-repeat 0px right;padding:0px 30px 0px 0px;text-transform:uppercase;text-decoration:none}
a.zoom{font-size:.8em;background:url(../images/template/link_zoom.png) no-repeat 0px 0px;padding:0px 0px 5px 20px;text-transform:uppercase;text-decoration:none}
.clear_both{clear:both;line-height:1px;}
.gallery_data{padding:40px;display:none;}
.gallery_preload_area{display:none;}
.gallery_container{width:960px;margin:20px auto 0px auto;}
.gallery_credit{margin:0px 0px 10px 15px;float:left;width:425px;}
.gallery_type{margin:0px 0px 10px 0px;float:left;width:500px;text-align:right;padding:4px 0px 0px 0px;}
.gallery_top{margin:0px;padding:0px;height:20px;background:url(../images/template/page_top.jpg) no-repeat 0px 0px;}
.gallery_content{margin:0px;padding:15px 0px 1px 0px;background:url(../images/template/page_tile.jpg) repeat-y 0px 0px;}
.gallery_bottom{margin:0px;padding:0px;height:20px;background:url(../images/template/page_bottom.jpg) no-repeat 0px 0px;}
.gallery_thumbnails{width:500px;margin-left:40px;float:left;display:inline;}
.gallery_thumbnails a{display:inline-block;height:75px;width:75px;overflow:hidden;float:left;border:1px solid #555;margin:0px 20px 23px 0px;}
.gallery_thumbnails a:hover{border-color:#fff;}
.gallery_thumbnails a.selected{border-color:#fff;}
.gallery_preview{width:375px;height:375px;float:left;}
.gallery_preview a{display:block;width:375px;height:375px;border:1px solid #555;}
.gallery_preview a:hover{border-color:#fff;}
.gallery_contact{width:477px;height:60px;margin-left:40px;padding-right:23px;float:left;text-align:right;display:inline;}
.gallery_caption{width:375px;float:left;}
/* Hide for browsers with no JavaScript support */
.gallery_data{display:block}
.gallery_thumbnails{width:auto;}
.gallery_preview{display:none;}
.gallery_caption{display:none;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
2.35 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
2.35 MB
立即下载
蒋枝思
了解
打赏作者 鼓励作者
jquery特效6
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章