筋头云案例

功能需求:

  1. 鼠标经过某个小li,筋斗云跟到当前小li位置
  2. 鼠标离开这个小li ,筋斗云复原为原来的位置
  3. 鼠标点击了某个小li,筋斗云就会留在点击这个小li的位置

案例分析:

  1. 利用动画函数做动画效果
  2. 原先筋斗云的起始位置是0
  3. 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可
  4. 鼠标离开某个小li,就把目标值设为 0
  5. 如果点击了某个小li, 就把li当前的位置存储起来,做为筋斗云的起始位置

注意:ul也要有定位

 window.addEventListener('load', function() {
            // 1. 获取元素
            var cloud = document.querySelector('.cloud');
            var c_nav = document.querySelector('.c-nav');
            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) 鼠标离开就回到起始的位置 
                lis[i].addEventListener('mouseleave', function() {
                    animate(cloud, current);
                });
                // (3) 当我们鼠标点击,就把当前位置做为目标值
                lis[i].addEventListener('click', function() {
                    current = this.offsetLeft;
                });
            }
        })
​

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 获取元素

    例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,再对其进行操作。

    星辰_大海
  • jQuery 选择器

    原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。

    星辰_大海
  • 网页轮播图案例

    节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。

    星辰_大海
  • 常见闭合百叶窗

    李才哥
  • 【CSS】828- 纯CSS导航栏下划线跟随效果

    在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。

    pingan8787
  • PHP之多条件混合筛选功能的实现方法

    以上这篇PHP之多条件混合筛选功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • <li>标签

    <li> 标签定义列表,<li> 元素通常与有序列表 (<ol>) 和无序列表 (<ul>) 一起运用。

    Html5知典
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study

扫码关注云+社区

领取腾讯云代金券