以下是 jQuery图片淡出淡入效果特效代码 的示例演示效果:
部分效果截图:
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> </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;}
分享到QQ
分享到微博
微信扫一扫
