HTML5网页设计

图片效果

jQuery鼠标悬停图片翻转显示说明文字

时间:2014-12-09 14:56来源:未知作者:user点击:
默认显示图片,当鼠标悬停的时候,切换过程带有一个立体翻转效果,说明显示文字。

默认显示图片,当鼠标悬停的时候,切换过程带有一个立体翻转效果,说明显示文字。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标悬停图片翻转显示文字说明-ShejiCool.com</title>
<style>
* {	margin:0px;	padding:0px;}
li {list-style:none;}
#brand {width:330px;height:400px;border:1px solid #dddddd;box-shadow:0px 0px 5px #dddddd;margin:30px auto;overflow:hidden;}
#brand .title {width:100%;height:35px;line-height:35px;font-size:16px;margin-top:4px;border-bottom:2px solid #33261c;text-align:center;color:#33261c;}
#brand .bd-box {width:284px;height:358px;overflow:hidden;padding:0px 24px;}
#brand .bd-box li {float:left;width:122px;height:77px;overflow:hidden;position:relative;margin:10px 10px 0px 10px;_margin:10px 10px 0px 5px;}
#brand .bd-box li img {width:120px;	height:75px;border:1px solid #e9e8e8;position:absolute;left:0px;top:0px;z-index:2;overflow:hidden;}
#brand .bd-box li span {width:120px;border:1px solid #e9e8e8;position:absolute;	left:0px;z-index:1;	text-align:center;line-height:75px;font-size:14px;color:#FFF;background:#ffa340;font-weight:bold;overflow:hidden;height:0px;display:none;top:38px;}
#brand .bd-box li a {width:120px;height:75px;position:absolute;left:0px;top:0px;z-index:3;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="brand">
  <div class='title'> 热门图片推荐 </div>
  <ul class='bd-box'>
    <li> <a href="javascript:void(0);"></a><img src="http://www.shejicool.com/images/demo/400_1.jpg" /><span >说明1</span></li>
    <li> <a href="javascript:void(0);"></a><img src="http://www.shejicool.com/images/demo/400_2.jpg" /><span>说明2</span></li>
    <li> <a href="javascript:void(0);"></a><img src="http://www.shejicool.com/images/demo/400_3.jpg" /><span>说明3</span></li>
    <li> <a href="javascript:void(0);"></a><img src="http://www.shejicool.com/images/demo/400_4.jpg" /><span>说明4</span></li>
    <li> <a href="javascript:void(0);"></a><img src="http://www.shejicool.com/images/demo/400_3.jpg" /><span>说明5</span></li>
    <li> <a href="javascript:void(0);"></a><img src="http://www.shejicool.com/images/demo/400_1.jpg" /><span>说明6</span></li>
    <li> <a href="javascript:void(0);"></a><img src="http://www.shejicool.com/images/demo/400_2.jpg" /><span>说明7</span></li>
    <li> <a href="javascript:void(0);"></a><img src="http://www.shejicool.com/images/demo/400_4.jpg" /><span>说明8</span></li>
  </ul>
</div>
<script src="http://www.shejicool.com/demo/jquery.min.js"></script>
<script>
//display:block;height:75px;top:0px;		显示
//style="display:none;height:0px;top:38px;" 隐藏
$(function(){
	var aLi = $('#brand .bd-box li');			
	var aSpan = aLi.find('span');
	var aImg = aLi.find('img');
	aLi.each(function(index){
		$(this).mouseover(function(){
			aImg.eq(index).stop();
			aSpan.eq(index).stop();
			aImg.eq(index).animate({
				height:0,
				top:38
			},80,'',function(){
				$(this).hide();
				aSpan.eq(index).show().animate({
					height:75,
					top:0
				},80)
			})
		})
		$(this).mouseout(function(){
			aImg.eq(index).stop();
			aSpan.eq(index).stop();
			aSpan.eq(index).animate({
				height:0,
				top:38
			},80,'',function(){
				$(this).hide();
				aImg.eq(index).show().animate({
					height:75,
					top:0
				},80)
			})
		})
	})
})
</script>
<!-- 代码部分end -->
</body>
</html>
上一篇:上一篇:鼠标经过图片动画显示文字说明 上一篇:下一篇:没有了
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐