您当前的位置: 首页 > 前端教程 > JS教程 > jQuery鼠标悬停滑动显示图片信息

jQuery鼠标悬停滑动显示图片信息

作者:xiaoxiao 来源:未知 发布时间: 2014-07-30 11:00 点击:
Html代码如下所示: ! DOCTYPE html PUBLIC -//W3C//DTDXHTML1.0Transitional//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鼠标悬停滑动显示图片信息

  Html代码如下所示:

  <!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>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>

  效果如下所示:
分享到:
本文"jQuery鼠标悬停滑动显示图片信息"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 广告合作 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4