JS---案例：筋斗雲

時間 2019-12-19

原文原文鏈接

案例：筋斗雲

鼠標進入，一朵雲的樣式跟隨鼠標移動，鼠標點擊後離開，雲樣式回到上次點擊的位置html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    body {
      background-color: #333;
    }

    .nav {
      width: 800px;
      height: 42px;
      margin: 100px auto;
      background: url(images/rss.png) right center no-repeat;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
    }

    .nav li {
      width: 83px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      float: left;
      cursor: pointer;
    }

    .nav span {
      position: absolute;
      top: 0;
      left: 0;
      width: 83px;
      height: 42px;
      background: url(images/cloud.gif) no-repeat;
    }

    ul {
      position: relative;
    }
  </style>
</head>

<body>
  <div class="nav">
    <span id="cloud"></span>
    <ul id="navBar">
      <li>北京校區</li>
      <li>上海校區</li>
      <li>廣州校區</li>
      <li>深圳校區</li>
      <li>武漢校區</li>
      <li>關於咱們</li>
      <li>聯繫咱們</li>
      <li>招賢納士</li>
    </ul>
  </div>
  <script src="common.js"></script>
  <script>

    //獲取雲彩
    var cloud = my$("cloud");
    //獲取全部的li標籤
    var list = my$("navBar").children;
    //循環遍歷分別註冊鼠標進入，鼠標離開，和鼠標點擊事件
    for (var i = 0; i < list.length; i++) {
      //鼠標進入事件
      list[i].onmouseover = mouseoverHandle;
      //鼠標點擊事件
      list[i].onclick = clickHandle;
      //鼠標離開事件
      list[i].onmouseout = mouseoutHandle;
    }
    function mouseoverHandle() { //進入
      //移動到鼠標這次進入的li的位置
      animate(cloud, this.offsetLeft);
    }
    //點擊的時候，記錄這次點擊的位置
    var lastPosition = 0;
    function clickHandle() {//點擊
      lastPosition = this.offsetLeft;
    }
    function mouseoutHandle() {//離開
      animate(cloud, lastPosition);
    }

  </script>
</body>

</html>

相關標籤/搜索