zoukankan      html  css  js  c++  java
  • 筋头云案例

     案例:筋头云案例

    1. 利用动画函数做动画效果

    2. 原先筋斗云的起始位置是0

    3. 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可

    4. 鼠标离开某个小li,就把目标值设为 0

    5. 如果点击了某个小li, 就把li当前的位置存储起来,做为筋斗云的起始位置

    <script>
          window.addEventListener("load", function () {
            // 1. 获取元素
            var c_nav = document.querySelector(".c-nav");
            var cloud = document.querySelector(".cloud");
            var lis = c_nav.querySelectorAll("li");
            // 2. 给所有的小li绑定事件
            // 这个current 作为筋斗云的起始位置
            var current = 0;
            for (var i = 0; i < lis.length; i++) {
              // (1) 鼠标经过把小li 的位置作为目标值
              lis[i].addEventListener("mouseenter", function () {
                animate(cloud, this.offsetLeft);
              });
              // (2) 鼠标离开就复原为0
              lis[i].addEventListener("mouseleave", function () {
                animate(cloud, current);
              });
              // (3) 当我们鼠标点击,就把当前位置作为目标值
              lis[i].addEventListener("click", function () {
                current = this.offsetLeft;
              });
            }
          });
        </script>
  • 相关阅读:
    influxdb服务器 relay
    browse-agent type and curl post
    使用 Ansible 管理 MySQL 复制
    ansible里的item和with_items
    Ansible 从MySQL数据库添加或删除用户
    ansibel---tag模块
    ll | wc -l的陷阱
    ansible 判断和循环
    Ansible详解(二)
    Ansible详解(一)
  • 原文地址:https://www.cnblogs.com/bky-/p/13768717.html
Copyright © 2011-2022 走看看