记天使导航之天气小插件的布局问题

现如今的网络上边有好多优秀的博客系统;

其中最出名的就是word press,也就是我们口头说的WP,因为这套系统算得上是老字号了;

自然而然就有很多模板可以选择,于是吸引了很多小白用户,傻瓜式安装,傻瓜式维护.. zhenxing!

最近发现了一个宝藏主题,这个作者的审美看上去跟我差不多;看了下代码就用到了自己的导航站上边;

蛋是发现了一个小问题,呢就是 天气插件的布局不是很友好,api请求过来生成的DIV是默认在左下角的,但模板定位是以左上角为顶点,所以就成了这个样子:

记天使导航之天气小插件的布局问题

手机版的也是只露半截出来,最近在复习JS的jquery部分 ;正好就派上用场了;

改完的效果 :

记天使导航之天气小插件的布局问题

好了,废话不多说直接祭出代码 ;

<script>
 $('div.weather')[0].addEventListener("click", function() {
  $(document).ready(function() {
   console.log($("div[data-v-db6ccf64]")[0]);
   setTimeout(function() {
    $("div[data-v-db6ccf64]")[0].style.top = "-300px";
   }, 300);
  });
 });
</script>

因为是通过api加载数据,所以监听时间要有一定的延迟,不然可能监听不到;

只修改了点击时间,还可以监听 鼠标划入事件

onmouseenter  ||  $('div[data-v-db6ccf64]')[0] 

后者一定要等浮窗加载出来之后再执行,不然会因为绑定不到而失效

新版本已经没有这个问题了(我用的是老版本)。。。

有不对的地方翻迎大佬指出,不吝赐教~

版权声明:奥利大哥 发表于 2021-04-03 17:17:23。
转载请注明:记天使导航之天气小插件的布局问题 | 天使导航

1 条评论

  • 奔跑的五花肉

    节点标识(data-v-*)是固定的还好,如果不是固定的,这种选择节点的方式就不好使了哦

    回复