zh不聪明 2022-02-23 19:48 采纳率: 40%
浏览 35
已结题

筋斗云案例中为什么要给ul加定位?不是谁移动就给谁加定位吗?移动的不是筋斗云这个元素吗？

问题遇到的现象和发生背景

筋斗云案例中,鼠标经过li时功能正常,但是添加鼠标离开事件后,动画变的不正常。

问题相关代码，请勿粘贴截图
ul{
    position: absolute;
}
运行结果及报错内容
我的解答思路和尝试过的方法

通过给ul添加定位解决了这个问题,但是不理解的是为什么要给ul添加定位,是筋斗云移动,那么筋斗云添加定位是应该的,ul不需要移动为什么也要添加定位。

我想要达到的结果
  • 写回答

3条回答 默认 最新

  • CSDN专家-天际的海浪 2022-02-23 22:39
    关注

    因为mouseover事件中要用this.offsetLeft获取当前点击的li的left值

    offsetLeft获取的是当前元素相对于向上找第一个设置了 position: relative或 absolute; 的父辈元素左上角的left值
    当没有给ul添加position: relative或 absolute定位时,offsetLeft获取的是当前元素相对于.nav元素左上角的left值
    给ul添加position: relative或 absolute定位 offsetLeft获取的才是当前元素相对于ul元素左上角的left值

    如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • 筋斗云案例为什么筋斗云没反应 css html5 javascript
    2021-10-11 09:45
    回答 3 已采纳 <!--改变span 的浮动属性--> <span style="position:fixed"></span>
  • JS常见网页特效案例
    2021-05-30 21:04
    Iliuhu的博客 JS常见网页特效案例1、网页轮播图2、返回顶部3、筋斗云案例 1、网页轮播图 window.addEventListener('load', function() { // 1）获取元素 var arrow_l = document.querySelector('.arrow_l'); var arrow_r = ...
  • JavaScript——事件高级+BOM+PC端网页特效+移动端网页特效+本地存储+jQuery（基础+案例）
    2022-03-08 17:10
    王者热爱去地下城复活的博客 6.2 跟随鼠标的天使（案例） 分析： 鼠标不断移动，使用鼠标移动事件：mousemove 在页面内移动，给document注册事件 图片要移动距离，且不占位置，使用绝对定位 核心原理： 每次鼠标移动都会获得最新的鼠标坐标，把...
  • JavaScript核心 DOM 和 BOM操作
    2022-07-23 20:53
    捣蛋龙的博客 JavaScript核心 DOM 和 BOM操作 含案例
  • DOM与BOM与Echarts
    2022-09-03 13:31
    Weightlessly的博客 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示 获取元素 ...
  • JavaScript pink老师学习内容详解
    2023-05-15 23:08
    星辰大海1412的博客 推荐翻译网站:有道 爱词霸 name有一些游览器含有特殊含义，尽量不要直接使用name作为变量名 交换两个变量的值 JS是编程语言有很强的逻辑性在里面: 实现这个要求的思路先怎么做后怎么做 小结 ●为什么需要变量?...
  • JavaScript教程（二）
    2023-05-28 13:36
    m0_56752010的博客 offset系列经常用于获得元素位置offsetLeftoffsetTop；client经常用于获取元素大小；scroll经常用于获取滚动距离scrollTopscrollLeft；注意：页面滚动的距离通过获得；
  • 04-WebApl
    2022-03-08 13:00
    人俗� 话不多的博客 API 是为我们程序提供的一个接口 , 帮助我们实现某种功能 Web API 主要针对 于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果 Web API 一般都...
  • 【JS核心】前端学习记录11
    2022-03-24 16:18
    Limerence_ew的博客 window.pageYOffset 得到 最后是页面滚动，使用 window.scroll(x,y) 筋斗云案例 鼠标经过某个小li， 筋斗云跟这到当前小li位置 鼠标离开这个小li， 筋斗云复原为原来的位置 鼠标点击了某个小li， 筋斗云就会留在点击...
  • JavaScript进阶篇（DOM BOM）
    2022-05-17 16:23
    学前端的小王子的博客 带有动画的返回顶部 15.6.6 节流阀 15.6.7 常见网页特效案例 筋斗云 16、移动端网页特效 16.1 触屏事件 16.1.1 常见的触屏事件 16.1.2 触摸事件对象（TouchEvent） 16.1.3 移动端拖动元素 16.2移动端常见开发插件 ...
  • PC端-网页特效篇
    2022-05-02 13:44
    xml@77的博客 滚动事件和加载事件元素大小和位置scroll家族offset家族client家族综合案例
  • JavaScript（五）-- PC 端网页特效
    2022-04-24 22:02
    bug 消灭师的博客 4. 动画函数封装 4.1 动画实现原理 4.2 动画函数简单封装 4.3 动画函数给不同元素记录不同定时器 4.4 缓动效果原理 4.5 动画函数多个目标值之间移动 4.6 动画函数添加回调函数 4.7 动画函数封装到单独 JS 文件里面 5...
  • webAPI
    2022-06-29 01:43
    今晚月亮也睡了的博客 MDN 详细 API : ...根据标签名获取元素 根据类名获得某些元素集合:返回指定选择器的第一个元素对象:(.box #nav)根据指定选择器返回 获取body元素 获取html 元素 innerText和innerHTML的区别 获取内容时的区别：
  • JavaScript进阶第六天（动画+轮播图）
    2020-12-15 15:56
    皮匠大大的博客 核心算法：步长 = (目标值 - 现在的位置) / 10 做为每次移动的距离 02、缓动动画基本代码实现 简单动画函数： function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() {...
  • API笔记
    2022-04-22 15:58
    weixin_48697269的博客 WebAPIs 和 JS 基础关联性 ...比如手机充电的接口：这个充电接口就是一个API Web API Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 现阶段我们主要针对于浏览器讲解常用的 AP
  • JavaScript的DOM知识点总结
    2022-08-13 16:57
    ccj_zxy的博客 网页轮播图-自动播放功能、17-节流阀以及逻辑中断应用、18-带有动画的返回顶部、19-筋斗云案例、20-移动端网页特效导读、21-移动端touch触摸事件、22-移动端TouchEvent触摸事件对象、23-移动端拖动元素、01-移动端...
  • Js_Study
    2022-03-08 21:28
    龙槑的博客 文章目录JavaScriptjs资源初识JavaScript1.... 变量语法扩展01-更新变量02-同时声明多个变量03-声明变量特殊情况5. 变量命名规范数据类型1. 数据类型简介2. 数字型number01-数值进制02-数字型范围03-
  • 常用API和Web API知识点
    2022-02-28 21:00
    程序猿小白&小黑的博客 文档(document)：一个页面就是一个文档 元素(element)：页面中的所有标签 节点(node)：网页中的所有内容(标签、属性、文本、注释等) DOM把以上内容都看做是对象 获取元素 根据ID 使用getElementById()方法 //
  • JavaScript 学习 Day6_p287-p334
    2022-06-14 14:42
    TeacherChaos的博客 function setBodyFontSize() { // 如果页面中有body 这个元素 就设置body的字体大小 if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { // 如果页面中没有body 这个元素，则等着 ...
  • JavaScript基础学习笔记
    2021-04-10 17:21
    Zxx_2019的博客 JS基础 1.运算符 1.1 自增运算符 var e = 10; var f = e++ + ++e; // 1. e++ = 10 e = 11 // 2. e = 12 ++e = 12 ...如果第一个表达式的值为真，则返回表达式2 如果第一个表达式的值为假，则返回表达式1 conso
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 3月4日
  • 已采纳回答 2月24日
  • 创建了问题 2月23日

悬赏问题

  • ¥15 ansys fluent计算闪退
  • ¥15 有关wireshark抓包的问题
  • ¥15 需要写计算过程，不要写代码，求解答，数据都在图上
  • ¥15 向数据表用newid方式插入GUID问题
  • ¥15 multisim电路设计
  • ¥20 用keil，写代码解决两个问题，用库函数
  • ¥50 ID中开关量采样信号通道、以及程序流程的设计
  • ¥15 U-Mamba/nnunetv2固定随机数种子
  • ¥15 vba使用jmail发送邮件正文里面怎么加图片
  • ¥15 vb6.0如何向数据库中添加自动生成的字段数据。