zoukankan      html  css  js  c++  java
  • jQuery实现的手风琴效果

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style type="text/css">
     7         * {
     8             margin: 0;
     9             padding: 0;
    10         }
    11         ul{
    12             list-style: none;
    13         }
    14 
    15         .wrap {
    16             width: 1010px;
    17             margin: 100px auto 0;
    18         }
    19         .wrap li{
    20             width: 200px;
    21             height: 400px;
    22             float: left;
    23         }
    24     </style>
    25     <script src="../jquery-1.11.1.min.js"></script>
    26     <script>
    27         $(document).ready(function () {
    28          $('.wrap li').each(function(i,ele){
    29              $(ele).css("background","url(images/"+ (i + 1) +".jpg)");
    30          }).mouseenter(function(){
    31              $(this).stop().animate({600},500).siblings('li').stop().animate({100},500)
    32          }).mouseleave(function(){
    33              $('.wrap li').stop().animate({200},500);
    34 
    35          })
    36         });
    37     </script>
    38 </head>
    39 <body>
    40 <div class="wrap">
    41     <ul>
    42         <li></li>
    43         <li></li>
    44         <li></li>
    45         <li></li>
    46         <li></li>
    47     </ul>
    48 </div>
    49 </body>
    50 </html>
  • 相关阅读:
    JavaScript基础
    w3c网站案例
    CSS基础
    HTML基础
    MySQL--用户管理 pymysql 索引
    MySQL--高级
    MySQL--多表查询
    MySQL--单表查询
    直接插入排序与折半插入排序分析
    Nginx从安装到简单使用
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8168018.html
Copyright © 2011-2022 走看看