jQuery鼠标悬停滑动显示图片信息
摘要：jQuery鼠标悬停滑动显示图片信息
jQuery鼠标悬停滑动显示图片信息
Html代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quber-jQuery鼠标悬停滑动显示图片信息</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body { padding: 0; margin: 0; font-family:"Microsoft YaHei", Arial, "宋体"; color: #898989; font-size: 12px; line-height: 24px; }
ul, li, ol, dl, dt, dd, p { padding: 0; margin: 0; list-style: none; }
a { color: #fff; text-decoration: none; }
a:hover { cursor: pointer; color: #e69714; }
/* floor-nav */
.floor-nav { width: 761px; padding-left: 5px; overflow: hidden; margin: 20px auto; }
.floor-nav li { float: left; width: 120px; height: 140px; position: relative; overflow: hidden; margin: 3px 2px; border: 1px solid #f3f3f3; }
.floor-nav li a.floor-nav-delete{ display:block; width: 32px; height: 32px; position:absolute; background: url(images/delete.png) no-repeat;z-index:300;right:0;top:0; }
/*.floor-nav li img{ width: 120px;}*/
.floor-nav-box { width: 120px; height: 140px; overflow: hidden; color: #fff; background-color: #020000; position: absolute; left: 0; line-height: 18px; top: -140px; filter: alpha(Opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
.floor-nav-box div { padding: 0 2px; }
.floor-nav-box .pro-name { font-size: 14px; font-weight: bold; padding: 0 2px; color: #e69714; max-height: 80px; overflow: hidden; }
.floor-nav-box .pro-edit a { background: url(images/edit.png) no-repeat; padding-left: 16px; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$('.floor-nav ul li').hover(function () {
$(this).children('.floor-nav-box').stop(true, true).delay(100).animate({ 'top': 0, opacity: 0.8 }, 300);
}, function () {
$(this).children('.floor-nav-box').stop(true, true).animate({ 'top': -140, opacity: 0 }, 200);
});
});
</script>
</head>
<body>
<div class="floor-nav">
<ul>
<li>
<img src="images/food_rimg01.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
吉列打破刀架</div>
<div class="pro-code">
编号:1210010001</div>
<div class="pro-order">
序号:66</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg02.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
保鲜膜</div>
<div class="pro-code">
编号:1210010002</div>
<div class="pro-order">
序号:89</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg03.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
雅姿兰</div>
<div class="pro-code">
编号:1210010003</div>
<div class="pro-order">
序号:68</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg04.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
抽抽纸</div>
<div class="pro-code">
编号:1210010004</div>
<div class="pro-order">
序号:23</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg05.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
南京</div>
<div class="pro-code">
编号:1210010005</div>
<div class="pro-order">
序号:45</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg06.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
巧克力棒</div>
<div class="pro-code">
编号:1210010006</div>
<div class="pro-order">
序号:88</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg07.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
衣服鞋帽</div>
<div class="pro-code">
编号:1210010007</div>
<div class="pro-order">
序号:88</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
</ul>
</div>
</body>
</html>
效果如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quber-jQuery鼠标悬停滑动显示图片信息</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body { padding: 0; margin: 0; font-family:"Microsoft YaHei", Arial, "宋体"; color: #898989; font-size: 12px; line-height: 24px; }
ul, li, ol, dl, dt, dd, p { padding: 0; margin: 0; list-style: none; }
a { color: #fff; text-decoration: none; }
a:hover { cursor: pointer; color: #e69714; }
/* floor-nav */
.floor-nav { width: 761px; padding-left: 5px; overflow: hidden; margin: 20px auto; }
.floor-nav li { float: left; width: 120px; height: 140px; position: relative; overflow: hidden; margin: 3px 2px; border: 1px solid #f3f3f3; }
.floor-nav li a.floor-nav-delete{ display:block; width: 32px; height: 32px; position:absolute; background: url(images/delete.png) no-repeat;z-index:300;right:0;top:0; }
/*.floor-nav li img{ width: 120px;}*/
.floor-nav-box { width: 120px; height: 140px; overflow: hidden; color: #fff; background-color: #020000; position: absolute; left: 0; line-height: 18px; top: -140px; filter: alpha(Opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
.floor-nav-box div { padding: 0 2px; }
.floor-nav-box .pro-name { font-size: 14px; font-weight: bold; padding: 0 2px; color: #e69714; max-height: 80px; overflow: hidden; }
.floor-nav-box .pro-edit a { background: url(images/edit.png) no-repeat; padding-left: 16px; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$('.floor-nav ul li').hover(function () {
$(this).children('.floor-nav-box').stop(true, true).delay(100).animate({ 'top': 0, opacity: 0.8 }, 300);
}, function () {
$(this).children('.floor-nav-box').stop(true, true).animate({ 'top': -140, opacity: 0 }, 200);
});
});
</script>
</head>
<body>
<div class="floor-nav">
<ul>
<li>
<img src="images/food_rimg01.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
吉列打破刀架</div>
<div class="pro-code">
编号:1210010001</div>
<div class="pro-order">
序号:66</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg02.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
保鲜膜</div>
<div class="pro-code">
编号:1210010002</div>
<div class="pro-order">
序号:89</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg03.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
雅姿兰</div>
<div class="pro-code">
编号:1210010003</div>
<div class="pro-order">
序号:68</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg04.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
抽抽纸</div>
<div class="pro-code">
编号:1210010004</div>
<div class="pro-order">
序号:23</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg05.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
南京</div>
<div class="pro-code">
编号:1210010005</div>
<div class="pro-order">
序号:45</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg06.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
巧克力棒</div>
<div class="pro-code">
编号:1210010006</div>
<div class="pro-order">
序号:88</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
<li>
<img src="images/food_rimg07.jpg" /><a class="floor-nav-delete" href="javascript:;" title="点击删除该商品"> </a>
<div class="floor-nav-box">
<div class="pro-name">
衣服鞋帽</div>
<div class="pro-code">
编号:1210010007</div>
<div class="pro-order">
序号:88</div>
<div class="pro-edit">
<a href="javascript:;" title="点击修正该商品">编辑</a></div>
</div>
</li>
</ul>
</div>
</body>
</html>
效果如下所示：
