头图

绕着弯儿的实现需求,前端的快乐如此简单

前言

当产品提出一个新的需求,你的第一反应是不是皱眉头 ? 听完以后又心想“easy” ,然后勉为其难的挤出几个字“可以吧” ? 产品问工期,你会 少说一两天,多说那就没谱了,周末前吧, 表现出需求不简单的样子 ? 其实这时心里已经有了实现的大框...
于是产品前脚刚走,你就卯足了劲撸码,恨不得两分钟实现

7a36451c46dafc8efbb6f9639e470728.jpeg

然后在撸码的道路上走着走着会发现由于种种原因(技术选型、插件限制,改动太大...)导致此路不通,于是我们又要另辟蹊径,绕着弯儿的实现需求

9150e4e5gy1g76sizg0xtg204603umxy.gif

需求

现有功能:点击图中所画区域,弹窗显示具体信息,这里用到的是高德地图提供的信息窗体 对其自定义实现的弹窗

新增需求:点击弹窗后,鼠标划到其他区域,弹窗显示该区域具体地址

image.png

实现

想法一

乍一看需求,easy,高德地图这不就有现成的信息窗口弹窗吗,用起来

image.png

只要代码搭的好,二次开发不费力(代码不怎么样,但这是实打实的道理,哈哈),照猫画虎,给鼠标划入加了弹窗,接下来看效果

20220922_111658.gif

有个大问题,划入和点击都用到高德的信息窗口这个api,但是他没有提供同时打开多个的方法,所以当我点击弹窗以后只要滑动就会触发划入弹窗导致点击弹窗消失;

还有一个小问题是,我点击的弹窗修改了默认弹窗样式,而我划入弹窗又不想要点击弹窗的样式,同时不需要关闭按钮,但是他们共用同样的class名,将关闭按钮隐藏 两个弹窗都会隐藏,当然这个小问题稍微绕点圈子加个判断即可解决,只是稍显麻烦...

总之这个方法离瑕疵太多

36901471b06c9565c973b379c02999d3.gif

想法二

点击弹窗多好看,信息又全,关键还简单,同样的代码我cv就好了,劝劝产品经理吧

“咱不要点击弹窗了,都划入弹窗显示所有信息吧”,“太大了不好看,而且盖住其他区域了你不好划入”

实践才是检验真理的唯一标准,看效果

20220922_114054.gif

气氛有点尴尬...

ff0880d554a3b4842c888263ab3ca12b.jpeg

那能怎么办,继续捣鼓吧

600c9e286bcf0873d01de4b1ac9e6a90.jpeg

想法三

自己写一个跟随鼠标滑动的弹窗,监听鼠标move事件,判断划入划出所渲染的区域内控制是否显示

  1. 写一个自定义的满足要求的div作为弹窗,注意一定要绝对定位,默认不显示

image.png

  1. 页面加载完成后绑定匿名函数实现div跟随鼠标移动

    window.onload = function () {
      var box = document.getElementById("info_tit");
      document.onmousemove = function (event) {
     // 解决兼容问题
     event = event || window.event;
     // 获取滚动条滚动的距离
     // chrome浏览器认为滚动条是body的,火狐等浏览器认为滚动条是html的
     var st = document.body.scrollTop || document.documentElement.scrollTop;
     var sl = document.body.left || document.documentElement.scrollLeft;
     // 获取鼠标的坐标
     var left = event.clientX;
     var top = event.clientY;
     // 设置div偏移量
     box.style.left = left + sl + 15 + "px";
     box.style.top = top + st - 40 + "px";
      };
    }
  2. 鼠标移入区域内显示对应的内容,移出隐藏

image.png

看效果

20220922_121930.gif

6af89bc8gw1f8q8803fuaj205i0443yb.jpg

故事到此结束...

总结

条条大路通罗马,但通往罗马的路不总是一马平川

68d7c7ae1cd35e9e400531f1d9b044db.jpeg

奉上壁纸图

image.png

翻译一下:
“三思而后行”

1 声望
0 粉丝
0 条评论
推荐阅读
绝配!周杰伦bgm+阿瑟爱心代码 = 酷炫播放器
最近电视剧《点燃我,温暖你》中的一个桥段,李峋写的爱心代码火了 ❤️‍🔥❤️‍🔥❤️‍🔥,类似的表白神器每年都会在特定的时间(这些日期你都知道吗)出圈几个。

用户bPbJLQQ阅读 556

封面图
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.3k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

1 声望
0 粉丝
宣传栏