JS---ケース:アコーディオン(パッケージされたアニメーション関数を利用)

16319 ワード

ケース:オルガン
   
パッケージされたアニメーション関数はcommonです.jsの中
    //function getStyle(element, attr) {...}
    //function animate(element, json, fn) {...}
アコーディオンは背景図ですか、backgroudImage="url(image/**.jpg)";
マウスが入ると、現在の幅は800になり、残りの遍歴は100に設定されます.
マウスを離すとli幅が400になります
DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
    }

    div ul {
      width: 1300px;
    }
  style>
head>

<body>
  <div id="box">
    <ul>
      <li>li>
      <li>li>
      <li>li>
      <li>li>
      <li>li>
    ul>
  div>
  <script src="common.js">script>
  <script>

    //  2        common.js  
    //function getStyle(element, attr) {
    //function animate(element, json, fn) {

    //      li  
    var list = my$("box").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
      list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
      //    
      list[i].onmouseover = mouseoverHandle;
      //    
      list[i].onmouseout = mouseoutHandle;
    }
    //       
    function mouseoverHandle() {
      for (var j = 0; j < list.length; j++) {
        animate(list[j], { "width": 100 });//    
      }
      animate(this, { "width": 800 });

    }
    function mouseoutHandle() {
      for (var j = 0; j < list.length; j++) {
        animate(list[j], { "width": 240 });//    
      }
    }

  script>

body>

html>