汽车细节描述jQuery特效代码

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

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

以下是汽车细节描述jQuery特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<title>汽车细节描述jQuery特效</title>
		<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				$('#carousel').carouFredSel({
					circular: false,
					items: 1,
					direction: 'up',
					auto: false,
					prev: {
						fx: 'uncover-fade'
					},
					next: {
						fx: 'cover-fade'
					}
				});
				$('#carousel').trigger( 'linkAnchors', [ '#carousel', 'a' ] );
			});
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				background-color: #eee;
				min-height: 450px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}

			#wrapper {
				background-color: #fff;
				border: 1px solid #ddd;
				box-shadow: 0 5px 10px #ccc;
				width: 500px;
				height: 300px;
				padding: 20px;
				margin: -161px 0 0 -261px;
				overflow: hidden;
				position: absolute;
				left: 50%;
				top: 50%;
			}
			#carousel {
				width: 576px;
				height: 335px;
			}
			#carousel div {
				width: 500px;
				height: 300px;
				position: relative;
			}
			#carousel img {
				border: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			#wrapper a {
				background-color: rgba( 255, 255, 255, 0.5 );
				border: 1px solid #fff;
				color: #fff;
				font-size: 20px;
				font-weight: bold;
				line-height: 30px;
				text-align: center;
				text-decoration: none;
				text-shadow: 0 0 2px rgba( 0, 0, 0, 0.4 );
				display: block;
				box-shadow: 0 0 2px rgba( 0, 0, 0, 0.5 );
				width: 30px;
				height: 30px;
				opacity: 0;
				position: absolute;
				top: 20px;
				left: 445px;

				-moz-transition: opacity 0.5s;
				-webkit-transition: opacity 0.5s;
				-ms-transition: opacity 0.5s;
				-o-transition: opacity 0.5s;
				transition: opacity 0.5s;
			}
			#wrapper:hover a {
				opacity: 0.3;
			}
			#wrapper:hover a:hover {
				opacity: 0.6;
			}
			#wrapper a#link-1 {
				width: 85px;
				height: 50px;
				left: 75px;
				top: 170px;
			}
			#wrapper a#link-2 {
				width: 85px;
				height: 50px;
				left: 170px;
				top: 125px;
			}
			#wrapper a#link-3 {
				width: 100px;
				height: 70px;
				left: 250px;
				top: 150px;
			}
			#wrapper a#link-4 {
				width: 85px;
				height: 50px;
				left: 295px;
				top: 90px;
			}
			#wrapper a#link-5 {
				width: 85px;
				height: 50px;
				left: 385px;
				top: 125px;
			}
			
			#donate-spacer {
				height: 100%;
			}
			#donate {
				border-top: 1px solid #999;
				width: 750px;
				padding: 50px 75px;
				margin: 0 auto;
				overflow: hidden;
			}
			#donate p, #donate form {
				margin: 0;
				float: left;
			}
			#donate p {
				width: 650px;
			}
			#donate form {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="carousel">
				<div id="overview">
					<img src="img/overview.jpg" width="500" height="300" />
					<a href="#detail-1" id="link-1"></a>
					<a href="#detail-2" id="link-2"></a>
					<a href="#detail-3" id="link-3"></a>
					<a href="#detail-4" id="link-4"></a>
					<a href="#detail-5" id="link-5"></a>
				</div>
				<div id="detail-1">
					<img src="img/detail-1.jpg" width="500" height="300" />
					<a href="#overview">X</a>
				</div>
				<div id="detail-2">
					<img src="img/detail-2.jpg" width="500" height="300" />
					<a href="#overview">X</a>
				</div>
				<div id="detail-3">
					<img src="img/detail-3.jpg" width="500" height="300" />
					<a href="#overview">X</a>
				</div>
				<div id="detail-4">
					<img src="img/detail-4.jpg" width="500" height="300" />
					<a href="#overview">X</a>
				</div>
				<div id="detail-5">
					<img src="img/detail-5.jpg" width="500" height="300" />
					<a href="#overview">X</a>
				</div>
			</div>
		</div>
	</body>
</html>

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