zoukankan      html  css  js  c++  java
  • 第62天:手风琴效果

    手风琴效果:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>手风琴效果</title>
     6     <style>
     7         *{
     8             margin: 0;
     9             padding: 0;
    10             list-style: none;
    11         }
    12         div{
    13             width: 1200px;
    14             height: 400px;
    15             margin: 100px auto;
    16             border:1px solid red;
    17             overflow: hidden;
    18         }
    19         div li{
    20             width: 240px;
    21             height: 400px;
    22             float: left;
    23         }
    24         div ul{
    25             width: 1300px;
    26         }
    27     </style>
    28 </head>
    29 <body>
    30     <div>
    31         <ul>
    32             <li></li>
    33             <li></li>
    34             <li></li>
    35             <li></li>
    36             <li></li>
    37         </ul>
    38     </div>
    39 </body>
    40 </html>
    41 <script src="animate.js" type="text/javascript"></script><!--引入动画js-->
    42 <script>
    43     var box=document.getElementsByTagName("div")[0];
    44     var lis=box.children[0].children;
    45     for(var i=0;i<=lis.length;i++){
    46         lis[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
    47         lis[i].onmouseover=function(){
    48             for(var i=0;i<lis.length;i++){
    49                 animate(lis[i],{100})//调用动画函数 li宽度变成100
    50             }
    51             animate(this,{800})//当前li宽度改为800
    52         }
    53         lis[i].onmouseout=function(){
    54             for(var i=0;i<lis.length;i++){
    55                 animate(lis[i],{240})//鼠标移出每个li宽度都改为初始值
    56             }
    57         }
    58     }
    59 </script>

    运行效果:

  • 相关阅读:
    聊聊MySQL的索引吧
    污力满满的技术解读,瞬间印象深刻
    lua语言(1):安装、基本结构、函数、输入输出
    pandas中的那些让人有点懵逼的异常(坑向)
    与分布式相关的面试题
    图解IP基础知识
    Date类
    String 与StringBuffer习题
    Java的常用类 String
    线程练习题
  • 原文地址:https://www.cnblogs.com/le220/p/7719682.html
Copyright © 2011-2022 走看看