html实现随机图片

注:暂时还不知道如何制作能被引用的随机图片,只能查看图片,而不能通过类似于![](图片地址)的方式查看。

demo

欢迎投稿图片:投稿地址

核心代码

1
2
3
4
5
<script type="text/javascript" src="imagelist.json"></script>
<script type="text/javascript">
var r=Math.floor(Math.random()*images.length)
document.write("<img src="+images[r]+">")
</script>

图片列表保存在 imagelist.json 内。

参考示例

https://ouuan.github.io/randpic/people/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<script type="text/javascript" src="imagelist.json"></script>
<title>随机图片-人物类</title>
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon16.png">
<style>
img
{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<script type="text/javascript">
var r=Math.floor(Math.random()*images.length)
document.write("<img src="+images[r]+">")
</script>
</body>
</html>

https://ouuan.github.io/randpic/people/imagelist.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var images=
[
"https://z4a.net/images/2018/12/12/70469686_p0.png",
"https://z4a.net/images/2018/12/12/69212051_p0.jpg",
"https://z4a.net/images/2018/12/12/64660644_p0.jpg",
"https://z4a.net/images/2018/12/12/61438972_p0.jpg",
"https://z4a.net/images/2018/12/12/60141148_p0.png",
"https://z4a.net/images/2018/12/12/1200296-20170715113653118-1762611401.jpg",
"https://z4a.net/images/2018/12/12/71631241_p0.jpg",
"https://z4a.net/images/2018/12/12/f0Q5-g62pXkZ5lT3cS1hc-rs.jpg",
"https://z4a.net/images/2018/12/12/36224612_p0.jpg",
"https://z4a.net/images/2018/12/12/64702477_p0.jpg",
"https://z4a.net/images/2018/12/12/64670588_p0.jpg",
"https://z4a.net/images/2018/12/12/61815260_p0.jpg",
"https://i.loli.net/2018/12/12/5c10a02b0831b.jpg",
"https://i.loli.net/2018/12/12/5c1119665c83a.jpg",
"https://i.loli.net/2018/12/12/5c111a8bed8e8.jpg",
"https://i.loli.net/2018/12/12/5c111ab43f7cf.jpg",
"https://i.loli.net/2018/12/12/5c111ade38590.jpg",
"https://i.loli.net/2018/12/12/5c111b8240591.png"
]

UPD

研究了一下 js 后写了一下图片缩放:(代码很丑,毕竟是靠百度学了一个小时写出来的)(大括号不换行是因为sublime缩进写着写着就炸了,只好在网上格式化了一下)

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
<html>
<head>
<script type="text/javascript" src="imagelist.json">
</script>
<title>
随机图片-人物类
</title>
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon16.png">
</head>
<body style="margin: 0px; background: #0e0e0e;">
<script type="text/javascript">
var cur = 1;
var xx = 0;
var yy = 0;
var rx = 0;
var ry = 0;
var nw;
var nh;
var mw;
var mh;
var w;
var h;
function setSize() {
if (cur == 1) {
var p = document.getElementsByTagName("img")[0];
nw = p.naturalWidth;
nh = p.naturalHeight;
mw = window.innerWidth;
mh = window.innerHeight;
if (nw > mw || nh > mh) {
p.style = "cursor: zoom-in";
} else {
p.style = "cursor: auto";
}
if (nw * mh > nh * mw) {
h = nh * mw / nw;
w = mw;
} else {
w = nw * mh / nh;
h = mh;
}
p.style.width = w;
p.style.height = h;
p.style.marginTop = (mh - h) / 2;
p.style.marginLeft = (mw - w) / 2;
} else {
if (nw > mw || nh > mh) {
p.style = "cursor: zoom-out";
} else {
p.style = "cursor: auto";
}
}
}
function picLoaded() {
setSize();
window.onresize = function() {
setSize();
}
}
function BigSmall() {
mw = window.innerWidth;
mh = window.innerHeight;
if (nw > mw || nh > mh) {
if (cur == 1) {
cur = 2;
var p = document.getElementsByTagName("img")[0];
p.style = "cursor: zoom-out";
var e = event || window.event;
mw = window.innerWidth;
mh = window.innerHeight;
if (nw * mh > nh * mw) {
h = nh * mw / nw;
w = mw;
} else {
w = nw * mh / nh;
h = mh;
}
if (nw <= mw) {
xx = (mw - nw) / 2;
rx = 0;
} else {
xx = 0;
rx = (nw - mw) * (e.clientX - (mw - w) / 2) / w;
}
if (nh <= mh) {
yy = (mh - nh) / 2;
ry = 0;
} else {
yy = 0;
ry = (nh - mh) * (e.clientY - (mh - h) / 2) / h;
}
p.style.marginTop = yy;
p.style.marginLeft = xx;
document.body.scrollLeft = rx;
document.body.scrollTop = ry;
} else {
cur = 1;
setSize();
}
}
}
var r = Math.floor(Math.random() * images.length);
document.write("<img src=" + images[r] + " onload=\"picLoaded()\" onclick=\"BigSmall()\">");
</script>
</body>
</html>