花潮论坛

搜索
热搜: 活动 交友 discuz
查看: 34|回复: 10

重新封装一下偏移总量函数

[复制链接]
  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

    发表于 2022-7-28 20:42 | 显示全部楼层 |阅读模式

    请马上登录,朋友们都在花潮里等着你哦:)

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x
    新封装的函数需要更少参数,也更简短,调用也更加简单:


    let calcOffset = (ele) => {
            let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
            while(pa != null) {
                    x += pa.offsetLeft;
                    y += pa.offsetTop;
                    pa = pa.offsetParent;
            }
            return {x, y};
    }

    说明:

    一、参数 ele

    ele 为 element 的缩写,意为元素。例如,想获取 id="son" 的 元素的横向和纵向偏移量:

    let sLeft = son.offsetLeft + calcOffset(son).x;
    let sTop = son.offsetTop + calcOffset(son).y;

    二、返回值

    返回一个对象,{x,y},x 是水平偏移值,top是纵向偏移值。上面例子语句中的 calcOffset(son).x calcOffset(son).y 便是。

    评分

    参与人数 2威望 +80 金钱 +160 经验 +80 收起 理由
    红影 + 50 + 100 + 50 赞一个!
    千羽 + 30 + 60 + 30 赞一个!

    查看全部评分

    该用户从未签到

    180

    主题

    1万

    回帖

    3万

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪春风拂面缤纷心情心香一瓣音画大师共看流星我心永远天长地久幸福快乐梦幻浪漫喜乐安康指尖上的流年

    发表于 2022-7-28 21:16 | 显示全部楼层
    俺路过,最近没时间看和做,点赞是必须的
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2022-7-28 21:25 | 显示全部楼层
    千羽 发表于 2022-7-28 21:16
    俺路过,最近没时间看和做,点赞是必须的

    忙就不用关注我这里
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    180

    主题

    1万

    回帖

    3万

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪春风拂面缤纷心情心香一瓣音画大师共看流星我心永远天长地久幸福快乐梦幻浪漫喜乐安康指尖上的流年

    发表于 2022-7-28 21:26 | 显示全部楼层
    马黑黑 发表于 2022-7-28 21:25
    忙就不用关注我这里

    嗯,好吧
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2022-7-28 21:27 | 显示全部楼层

    我这地儿偏僻,来一趟不容易,喝杯热茶消消暑再走
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    180

    主题

    1万

    回帖

    3万

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪春风拂面缤纷心情心香一瓣音画大师共看流星我心永远天长地久幸福快乐梦幻浪漫喜乐安康指尖上的流年

    发表于 2022-7-28 21:29 | 显示全部楼层
    马黑黑 发表于 2022-7-28 21:27
    我这地儿偏僻,来一趟不容易,喝杯热茶消消暑再走

    好吧,俺一饮而尽了,谢了哈
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2022-7-28 21:30 | 显示全部楼层
    千羽 发表于 2022-7-28 21:29
    好吧,俺一饮而尽了,谢了哈

    不客气不客气,墙角柜那里有好多好茶,爱啥拿啥
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    180

    主题

    1万

    回帖

    3万

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪春风拂面缤纷心情心香一瓣音画大师共看流星我心永远天长地久幸福快乐梦幻浪漫喜乐安康指尖上的流年

    发表于 2022-7-28 21:33 | 显示全部楼层
    马黑黑 发表于 2022-7-28 21:30
    不客气不客气,墙角柜那里有好多好茶,爱啥拿啥

    嗯好的
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2022-7-28 21:40 | 显示全部楼层

    随意哈
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2022-7-29 00:00 | 显示全部楼层
    调用这个语句的时候,就可以做偏移了吧。来学习
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2022-7-29 07:35 | 显示全部楼层
    红影 发表于 2022-7-29 00:00
    调用这个语句的时候,就可以做偏移了吧。来学习

    可以准确计算元素的偏移量,这和之前用过的是一样的,只是这个更简洁、更方便。我将发一个鸟语的帖子,它就用到这个。之前的小鸟四处飞的帖子也用到偏移量计算,函数是之前封装的。
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持:DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-12-15 05:33 , Processed in 0.080338 second(s), 25 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表