jQuery学习笔记(3)--图片导航

来源：互联网发布：网络线管的种类及作用编辑：程序博客网时间：2024/06/09 20:27

在一组图片中，当鼠标放在上面时，会从下面浮动一个小的提示导航功能，用到了动画效果和链式编程。

html代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{margin:0;padding:0;}        ul{list-style: none;}        img{display: block; border:0;}        .wrapper{width: 752px;  border:1px solid #ccc;            padding: 10px 0 0 10px;            font-family: arial;            overflow: hidden;            margin:100px auto;        }        .wrapper li{            float: left;            margin:0 10px 10px 0;            width: 178px;            height: 125px;            overflow: hidden;            position: relative;        }        .wrapper li div,.wrapper li p{            width:178px;            height: 25px;            position: absolute;            font-size:14px;            text-align: center;            line-height: 25px;            color:white;            left:0;            bottom:-25px;            _bottom:-26px;        }        .wrapper li div{            background-color:#000;        }        .wrapper li p{            background: url(images/bg.png) no-repeat 5px 0;        }    </style>    <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>    <script type="text/javascript">//author:一叶扁舟(skiff)//作用:图片导航//时间:19:12 2017/3/18       $(function(){   var tag = $("<div></div><p>百度一下，你就知道</p>");   //追加到li标签后面   $(".wrapper li").append(tag).children("div").fadeTo(0,0.5);//灰度 $(".wrapper li").each(function(index,ele){$(ele).children("p").css("background-position","5px -"+25+"px");}).hover( function () {console.log($(this));       $(this).children("div,p").stop().animate({bottom:0},600);  },  function () {  //当前jQuery对象即li,下的子元素div和p元素的当前动画停止，div和p元素的bottom改为-25px       $(this).children("div,p").stop().animate({bottom:"-25"},600);  });      });    </script></head><body><div class="wrapper">    <ul>        <li><a href="###"><img src="images/01.jpg" alt=""/></a></li>        <li><a href="###"><img src="images/02.jpg" alt=""/></a></li>        <li><a href="###"><img src="images/03.jpg" alt=""/></a></li>        <li><a href="###"><img src="images/04.jpg" alt=""/></a></li>        <li><a href="###"><img src="images/05.jpg" alt=""/></a></li>        <li><a href="###"><img src="images/06.jpg" alt=""/></a></li>        <li><a href="###"><img src="images/07.jpg" alt=""/></a></li>        <li><a href="###"><img src="images/08.jpg" alt=""/></a></li>    </ul></div></body></html>

效果图：

0 0