zoukankan      html  css  js  c++  java
  • 第74天:jQuery实现图片导航效果

    图片导航效果

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         *{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         li{
    12             list-style: none;
    13         }
    14         a{
    15             text-decoration: none;
    16         }
    17         .wrap{
    18             width: 752px;
    19             border:1px solid #c1c1c1;
    20             padding: 10px 0 0 10px;
    21             margin:100px auto;
    22             overflow: hidden;
    23         }
    24         .wrap li{
    25             width: 178px;
    26             height: 125px;
    27             float: left;
    28             margin:0 10px 10px 0;
    29             position: relative;
    30             overflow: hidden;
    31 
    32         }
    33         .wrap li p{
    34             width: 178px;
    35             text-align: center;;
    36             background-color: #6a6a6a;
    37             background-position: 5px 0;
    38             color: #ffffff;
    39             position: absolute;
    40             left:0;
    41             bottom:-26px;
    42         }
    43     </style>
    44     <script src="jquery-1.11.1.min.js"></script>
    45     <script>
    46         $(document).ready(function(){
    47             $(".wrap li").append("<div></div><p>全栈,你值得拥有</p>").children("div").fadeTo(0,0.5).next("p").each(function(index,ele){//ele指向当前对象p
    48                 $(ele).css("background-position","5px -"+index*25+"px");
    49             }).parent();
    50 
    51             $(".wrap li").mouseenter(function(){
    52                 $(this).children("div,p").stop().animate({
    53                         "bottom":0,
    54 
    55                 },400);
    56 
    57             }).mouseleave(function(){
    58                 $(this).children("div,p").stop().animate({
    59                     "bottom":"-26px"
    60                 },400);
    61             });
    62 
    63         });
    64     </script>
    65 </head>
    66 <body>
    67 <div class="wrap">
    68     <ul>
    69         <li><a href=""><img src="images/01.JPG" alt=""></a></li>
    70         <li><a href=""><img src="images/02.JPG" alt=""></a></li>
    71         <li><a href=""><img src="images/03.JPG" alt=""></a></li>
    72         <li><a href=""><img src="images/04.JPG" alt=""></a></li>
    73         <li><a href=""><img src="images/05.JPG" alt=""></a></li>
    74         <li><a href=""><img src="images/06.JPG" alt=""></a></li>
    75         <li><a href=""><img src="images/07.JPG" alt=""></a></li>
    76         <li><a href=""><img src="images/08.JPG" alt=""></a></li>
    77     </ul>
    78 </div>
    79 </body>
    80 </html>

    运行效果:

  • 相关阅读:
    STL源码剖析之_allocate函数
    PAT 1018. Public Bike Management
    PAT 1016. Phone Bills
    PAT 1012. The Best Rank
    PAT 1014. Waiting in Line
    PAT 1026. Table Tennis
    PAT 1017. Queueing at Bank
    STL源码剖析之list的sort函数实现
    吃到鸡蛋好吃,看看是哪只母鸡下的蛋:好用的Sqlite3
    cJSON
  • 原文地址:https://www.cnblogs.com/le220/p/7784979.html
Copyright © 2011-2022 走看看