基于jQuery可爱T恤展开特效代码

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

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

以下是基于jQuery可爱T恤展开特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery可爱T恤展开特效</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {  
			$(".teebox a").mouseover(function(){
				$(this).parent().addClass("selected");
				$(this).find('img').animate({opacity: "0.0"}, 0); //Hides overlay
				$(this).parent().find('.caption').hide(); //Hides Caption
			}).mouseout(function(){
				$(this).parent().removeClass("selected");
				$(this).find('img').animate({opacity: "1.0"}, 0); //Shows overlay
				$(this).parent().find('.caption').show(); //Shows Caption
			});
		});	
	</script>
	<style type="text/css">
	    *{
	    	margin:0;
	    	padding:0;
	    }
	    img{
			border: none;
		}
	    body {
	    	text-align: center;
	    	background: #222;
	    }
	    h2{
	    	color: #333;
			font:italic 36px Georgia, serif;
			padding: 20px;
			border-bottom: dashed 1px #999;
			clear: both;
		}
	    #content{
	    	width: 100%;
	    	margin: 0px auto;
			background: #fff;
	    	text-align: center;
	    	margin-bottom: 50px;
		}
		.row{ /*Container for each row of shirts*/
			width: 495px;
			margin: 0px auto;
			clear:both;
			padding: 20px 0;
		}
		.teebox{
			overflow: hidden; /*Prevents excess of image from showing*/
			position: relative;
	    	margin: 0 10px;
			width: 144px; /*Width and height define thumbnail size*/
			height: 183px;
			float: left;
			clear: right;
			z-index: 0;
		}
		.selected{
			overflow: visible; /*Display part of image that not currently visible*/
			z-index: 10;
		}
		
		.teebox img {
			left:-84px; /*Use this number to center your image when not hovered*/
			position: absolute;
		}
		.teebox a{ /*Area that changes to selected class when hovered over*/
			display:block;
			position: relative;
			float: left;
			left: 84px; /*Use to line up the overlay image*/
			z-index: 1;
		}
		.caption{
			color: #2FB5FF;
			font:14px Arial;
			position: relative;
			float: left;
			left: 0px;
			top: 146px;
			padding: 10px;
			background: #222;
			z-index: 1;
		}
	</style>
</head>

<body>
	<div id="content">
		<h2>Build Internet's Tee Palace</h2>
		<div class="row">
				<div class="teebox">
					<a href="#"><img src="overlay.png"/></a><img src="pinktee.png"/>
					<div class="caption">$10</div>
				</div>
				<div class="teebox">
					<a href="#"><img src="overlay.png"/></a><img src="bluetee.png"/>
					<div class="caption">$10</div>
				</div>
				<div class="teebox">
				<a href="#"><img src="overlay.png"/></a><img src="greytee.png"/>
					<div class="caption">$10</div>
				</div>
		</div>
		<div class="row">
				<div class="teebox">
					<a href="#"><img src="overlay.png"/></a><img src="redtee.png"/>
					<div class="caption">$10</div>
				</div>
				<div class="teebox">
					<a href="#"><img src="overlay.png"/></a><img src="redtee.png"/>
					<div class="caption">$10</div>
				</div>
				<div class="teebox">
					<a href="#"><img src="overlay.png"/></a><img src="redtee.png"/>
					<div class="caption">$10</div>
				</div>
		</div>

	</div>
</body>
</html>

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