基于jQuery的预览图展示特效代码

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

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

以下是基于jQuery的预览图展示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为基于jQuery的预览图展示特效代码，属于站长常用代码" />
<title>基于jQuery的预览图展示特效代码</title>
<style type="text/css">
			*{ padding:0px; margin:0px; }
			body{ background:#D5DEE7; }
			a{ color:#C8DCE5; }
			h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }
			.boxgrid{ 
				width: 325px; 
				height: 260px; 
				margin:10px; 
				float:left; 
				background:#161613; 
				border: solid 2px #8399AF; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 100px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 260;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 220;
 					left: 0;
 				}
				
		</style>
		
		<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
				//Vertical Sliding
				$('.boxgrid.slidedown').hover(function(){
					$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
				});
				//Horizontal Sliding
				$('.boxgrid.slideright').hover(function(){
					$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
				});
				//Diagnal Sliding
				$('.boxgrid.thecombo').hover(function(){
					$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
				});
				//Partial Sliding (Only show some of background)
				$('.boxgrid.peek').hover(function(){
					$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
				});
				//Full Caption Sliding (Hidden to Visible)
				$('.boxgrid.captionfull').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
				});
				//Caption Sliding (Partially Hidden to Visible)
				$('.boxgrid.caption').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
				});
			});
		</script>
		
</head>
<body>

			<div class="boxgrid captionfull">
				<img src="images/jareck.jpg"/>
				<div class="cover boxcaption">
					<h3>Jarek Kubicki</h3>
					<p>Artist<br/><a href="#" >More Work</a></p>
				</div>		
			</div>
			
			<div class="boxgrid caption">
				<img src="images/kamil.jpg"/>
				<div class="cover boxcaption">
					<h3>Kamil Smala</h3>
					<p>Artist<br/><a href="#" >More Work</a></p>
				</div>
			</div>
				
			<div class="boxgrid slideright">
				<img class="cover" src="images/martin.jpg"/>
				<h3>Martin Stranka</h3>
				<p>Photographer<br/><a href="#" >More Work</a></p>
			</div>
			<div class="boxgrid thecombo">
				<img class="cover" src="images/florian.jpg"/>
				<h3>Florian Nicolle</h3>
				<p>Graphic Designer<br/><a href="#" >More Work</a></p>
			</div>
			
			<div class="boxgrid slidedown">
				<img class="cover" src="images/nonsense.jpg"/>
					<h3>The Nonsense Society</h3>
					<p>Art, Music, Word<br/><a href="#" >Website</a></p>	
			</div>
			<div class="boxgrid peek">
				<a href="#" ><img src="images/birss.jpg"/></a>
				<a href="#" ><img class="cover" src="images/buildinternet.jpg"/></a>
			</div>
</body>
</html>

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