现如今的网络上边有好多优秀的博客系统;
其中最出名的就是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] //逻辑错误
后者一定要等浮窗加载出来之后再执行,不然会因为绑定不到而失效
新版本已经没有这个问题了(我用的是老版本)。。。
有不对的地方翻迎大佬指出,不吝赐教~
将窗口上移封装为函数,通过判断终端类型决定监听方式 :
if ($('div.weather')[0]) { function weatherUp() { $(document).ready(function() { setTimeout(function() { $("div[data-v-db6ccf64]")[0].style.top = "-300px"; }, 300); }); } if(isPC){ $('div.weather')[0].addEventListener("mouseover", weatherUp); }else{ $('div.weather')[0].addEventListener("click", weatherUp); } }
本站个别资源来源于网络,还请自行再次甄别本资源安全性及合法性!
本站提供的资源(包括但不限于源码,软件,文章)仅供个人为了学习和研究其内含的设计思想和原理,请在查阅后后自觉删除。
请先
!