logo头像

技术引领生活!

给页面所有的图片加上全屏预览功能

本文于1709天之前发表,文中内容可能已经过时。

在使用主题snippet时候,图片不能全屏预览,于是自己动手写了一个,还是可以使用的

更新

添加代码段点击复制功能

示意图

demo

参考

intense
但是这玩意有bug

食用方法

  • 在页面的head部分script中加入javscript代码,同时引入css代码
  • 具体情况时需要改变js中的post-body var imgs = document.getElementsByClassName(‘post-body’)[0].getElementsByTagName(‘img’)
  • 对不需要展示的图片加上 class_no_full_screen
  • 如果要修改背景色请修改*background: rgba(255, 255, 255,0.8);*这一句

直接上干货

原理:

  • 查找所有的图片
  • 在图片点击时候获取图片地址
  • 在页面末尾插入一个div,div中插入一个img(地址为点击图片的地址)
  • 设置div样式为全屏,透明

javscript 代码

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<script type="text/javascript">
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}

function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}

function copyToClip(event) {
let cb = event.target.parentNode
var cls = cb.getElementsByClassName("line");

var pt = ""
for (var k = 0; k < cls.length; k++) {
var cl = (cls[k].textContent || cls[k].innerHTML);
cl = cl.replace(`<span class="css"></span>`, "\n")
cl = cl.replace(`<span class="javascript"></span>`, "\n")

pt += cl
pt += "\n";
}
const textarea = document.createElement('textarea');
textarea.value = pt;
document.body.appendChild(textarea);
textarea.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
}
document.body.removeChild(textarea);
alert("复制成功");
}

function doAddCopyCode() {
var codeBlocks = document.getElementsByClassName('code');
for (var i = 0; i < codeBlocks.length; i++) {
//创建一个div
var divCopy = document.createElement("div");
divCopy.innerHTML = "点击复制"
//为div创建属性class = "test"
var divattr = document.createAttribute("class");
divattr.value = "copy_my_code";

//把属性class = "test"添加到div
divCopy.setAttributeNode(divattr);
codeBlocks[i].appendChild(divCopy)

var code = codeBlocks[i].getElementsByTagName("pre")[1];

codeBlocks[i].onclick = (e) => {
copyToClip(e);

}
}
}

function doAddImg() {
var imgAll = document.getElementsByClassName('post-body')[0];
if (imgAll == undefined) {
return;
}

var imgs = imgAll.getElementsByTagName('img')
for (var i = 0; i < imgs.length; i++) {
if (hasClass(imgs[i], 'class_no_full_screen')) {
continue;
}

imgs[i].setAttribute('style', "cursor: zoom-in");
imgs[i].onclick = function () {

var section = document.getElementsByTagName("section")[0];

var imgView = document.getElementById('imgViewDom');
if (imgView == undefined) {
imgView = document.createElement("div");
imgView.id = "imgViewDom";

section.appendChild(imgView)


imgView.onclick = function () {
addClass(imgView, "disnone");
imgView.innerHTML = "";
}

}

imgView.innerHTML = "<img id = 'jackslowfuck' src=" + this.src + " style='cursor: zoom-out; max-width: 100%;'" + ">";
removeClass(imgView, "disnone");

var jackslowfuck = document.getElementById('jackslowfuck');
jackslowfuck.onclick = function () {
addClass(imgView, "disnone");
imgView.innerHTML = "";
}

}
}
}

window.addEventListener('load', function () {
doAddImg();
doAddCopyCode();
}, false);
</scirpt>

css代码

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
<style type="text/css">
.copy_my_code {
position: absolute;
top: 0;
right: 0;
border: 1px solid;
background: #555;
color: #fff;
margin: 1px;
padding: 0px 5px;
cursor: pointer;
}
#imgViewDom {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 99999999;
background: rgba(0, 0, 0,0.7);
overflow: auto;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
display: -o-box;
-o-box-align: center;
-o-box-pack: center;
display: -ms-box;
-ms-box-align: center;
-ms-box-pack: center;
display: box;
box-align: center;
box-pack: center;
cursor: zoom-out;
}

.disnone{
display: none !important;
}
</style>

ps

我是javascript菜鸟,如果有打包好的请联系告知本人

支付宝打赏 微信打赏

您的支持是我前行的动力!