jQuery图片淡出淡入效果特效代码

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

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

以下是 jQuery图片淡出淡入效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>jQuery多图片淡出淡入</title>
	<link rel="stylesheet" href="style.css" />
	<style>
		.container {
			position: relative;
			width: 480px;	
			height: 360px;
			margin: 0 auto;
		}

		.container img {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}
				
		.container span {
			position: absolute;
			top: 20px;
			left: 10px;	
			width: 440px;
			padding: 10px;
			color: #FFF;
			background: url('images/bg.png');
			z-index: 11;
		}

		.container span a {
			float: right;
			color: #FFF;
			font-size: 12px;
		}
		
		.tooltip {
			position: absolute;
			display: none;
			padding: 3px 10px;
			background: #fff;
			color: #222;
			border: 1px solid #CCC;
			font-family: Arial;
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: 1px;
			z-index: 11;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
	<script language="javascript">
		$(document).ready(function() {

			$(".container img:first-child").addClass('last');

			$(".container img").click(function() {
				$(this).fadeOut('normal', function() {

					if ( $(this).hasClass('last') ) {
						$("img", $(this).parent()).css('z-index', 10);

					} else {
						$(this).css('z-index', 9)
					}

					$(this).show();	
				});
			});

			// show tooltip when the mouse is moved over container
			$(".container").mouseenter(function() {
				$(".tooltip", this).show();
				
			}).mousemove(function(e) {
				// update position
				$(".tooltip", this).css({
					'top'	: e.pageY - this.offsetTop + 8,
					'left'	: e.pageX - this.offsetLeft + 15
				});
				
			}).mouseleave(function() {
				$(".tooltip", this).hide();
				
			}).append('<div class="tooltip">Next</div>');

			// hide tooltip when the mouse is moved over caption
			$(".container span").mouseenter(function() {
				$(".tooltip", $(this).parent()).hide();
				
			}).mouseleave(function() {
				$(".tooltip", $(this).parent()).show();
			});
				
		});
	</script>
</head>
<body>
	<div id="content">
		<h1>jQuery多图片淡出淡入效果</h1>
		<div class="container">
			<img src="images/bmw_3.jpg" alt="" />
			<img src="images/bmw_2.jpg" alt="" />
			<img src="images/bmw_1.jpg" alt="" />
			<span>BMW Gran Turismo <a href="javascript:;">Read more</a></span>
		</div>
		<p>&nbsp;</p>
		<div class="container">
			<img src="images/lamborghini_3.jpg" alt="" />
			<img src="images/lamborghini_2.jpg" alt="" />
			<img src="images/lamborghini_1.jpg" alt="" />
			<span>Lamborghini Gallardo LP550-2 <a href="javascript:;">Read more</a></span>
		</div>
	</div>
</body>
</html>

CSS代码(style.css):

body{background:#EEE;font-family:"Trebuchet MS",Verdana,Arial,sans-serif;font-size:14px;line-height:1.6;}
#content{width:750px;margin:50px auto;padding:20px;background:#FFF;border:1px solid #CCC;}
h1{margin:0;}
hr{border:none;height:1px;line-height:1px;background:#CCC;margin-bottom:20px;}

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