^_^简约而不简单!欢迎来到梅卫平の阅览室!您是第 位访客^_^

🌱 VIP绿色通道

(一)常用检索: 1. JCR-IF查询路径一, 路径二, 路径三      2. CiteScore-IF查询     3. SCI期刊检索     4. 中科院分区查询路径一, 路径二     5. SSCI检索     6. ESCI检索     7. EI检索 (备用)     8. ISTP检索
(二)ESI检索&Nature Index查询: 1. ESI查询      2. Nature Index查询      3. Nature Index Journal列表
(三)基金查询入口: 1. 国自然官方查询     2. 国自然梅斯查询     3. 国自然科学网查询
(四)备用网址: 1. 梅斯SCI期刊智能查询     2. 论文被SCI收录情况查询方法     3. CSCD期刊检索     4. 中国知网检索     5. PubChem     6. ChemSpider     7. 科研者之家     8. 爱科研

Hexo 添加鼠标移动右上角可删除的图片


闲话少叙,直接上图(效果可在我的网站页面右侧查看):

添加鼠标移动右上角可删除的图片.JPG

鼠标移动至图片上时,即显示 删除 图标;鼠标离开图片时,删除图标消失; 刷新网页 或 鼠标再次移动至图片上时,删除图标 重新出现。 点击 删除 图标 × ,即可删除图片显示。

代码:

打开文件夹里的 E:~\Hexo\themes\landscape\layout_partial\footer.ejs 文件,在footer.ejs的内容最后面添加一下内容,保存即可。

注意:代码中的链接网址请更改为自己的想要的链接网址。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!--   add QQ online image etc. with "close button" -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
.btnbox{
z-index:999;
position:fixed;
right:0px;
top: 340px;
}
</style>

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function show(thisObj)
{
$(thisObj).children("div").css("display","block");
}

function hide(thisObj)
{
$(thisObj).children("div").css("display","none");
}

function aa(obj){
$(obj).parent().parent().remove();
}
</script>

</head>
<body>
<div id="content">
<div onmouseover="show(this)" onmouseout="hide(this)" style=" position:fixed; right:0px; top: 350px; ">

<a href="http://wpa.qq.com/msgrd?v=3&uin=2638800763&site=qq&menu=yes" title="点击图标与我qq交谈"><img border="0" src="https://i.loli.net/2017/11/07/5a0178310370f.png" width=20px height=20px ></a>
<br><a href="http://blog.sciencenet.cn/u/meiweipingg" title="科学网" target="_blank"><img src="http://i4.buimg.com/567571/0044520727e81248.png" width=20px height=20px ></a>
<br><a href="http://www.facebook.com/meiweipingg" title="Facebook" target="_blank"><img src="http://i1.piimg.com/567571/9e2302528fbac519.png" width=20px height=20px ></a>
<br><a href="http://orcid.org/0000-0001-6400-9862" title="ORCiD" target="_blank"><img src="http://i1.piimg.com/567571/a218cba2d269aca5.png" width=20px height=20px ></a>
<br><a href="https://www.researchgate.net/profile/Weiping_Mei" title="ResearchGate" target="_blank"><img src="http://i1.piimg.com/567571/553d0e51933c8e4a.png" width=20px height=20px ></a>
<br><a href="https://github.com/PhDMeiwp" title="Github" target="_blank"><img src="http://i1.piimg.com/567571/eb56cb6e640f5fcd.png" width=20px height=20px ></a>

<div class="btnbox" style="width:10px; height:10px;" >
<input type="button" value="×" onclick="aa(this)"/>
</div>
</div>
</div>
</body>
</html>

部分说明如下:

1
2
3
4
5
6
7
8
<style type="text/css">  
.btnbox{
z-index:999;
position:fixed;
right:0px;
top: 340px;
}
</style>

上面这段代码设置的是 “删除按钮” 的位置,比如 top: 340px; 。

1
2
3
4
5
<div class="btnbox" style="width:10px; height:10px;" > 

<input type="button" value="×" onclick="aa(this)"/>

</div>

上面这段代码设置的是 “删除按钮”的显示方式,主要代码是 value=”×”,即删除键是以符号 x 来表示的,点击 x 即可删除图片。

参考文献:鼠标移动到图片出现按钮,点击删除图片



<已有 次阅读>


由于本文作者水平有限,文中如有错误之处,欢迎大家批评指正!

① 本文仅代表作者个人观点,不代表任何其它立场,欢迎交流合作!

② 转载与分享请注明:本文源于 http://meiweiping.cn

^_^ 本文字数统计:772 字