利用PHP實現404頁自動更換圖片 附api
- 2019 年 12 月 13 日
- 筆記
前幾天分享了N款自適應的404頁面源碼 不過歸其還是要自己換圖片來實現。
PHP寫了個隨機圖片，404頁面直接調用，達到每次訪問圖片隨機顯示效果。
404頁面樣式里添加了圖片大小自適應，以及圖片圓角和位置修正。
性感鑽芒，在線修圖。
效果如下
搭配鑽芒圖床，實現特定賬號上傳圖片至圖床，博客404頁面背景圖自動更新
css寫了個圖片自適應大小及圓角顯示。
PHP隨機輸出圖片（可支持多種圖片格式）
<?php
$img_array = glob("./*.{gif,jpg,png}",GLOB_BRACE);
$img = array_rand($img_array);
header("location:$img_array[$img]");
echo $img;
?>
404界面及div樣式(圖片處理css都有寫注釋)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>404頁面 - 鑽芒博客</title>
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<!--[if lte IE 8]> <script> location = "/ie.html?url=" + encodeURIComponent(location.href); </script> <![endif]-->
<style>
*{ padding:0; margin:0; box-sizing: border-box;font-family: "微軟雅黑"; }
body,html{ width:100%; height:100%; }
img{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.container{ max-width:90%; margin:0 auto; padding:80px 0px; }
.bg{
display:block; max-width:100%; margin:0px auto;
/* border:2px solid darkslategray; /*/圖片添加邊框/*/*/
background: darkcyan; /*定位居中*/
width:100%; /*橫向拉伸*/
height:auto; /*縱向自動匹配大小*/
border-radius:30px; /*圓角值*/
text-align: center; /*元素的文本對齊方式*/
line-height: 200px; /*設置以百分比計的行高*/
max-width:500px; /*最大寬度值*/
max-height:300px; /*最大高度值*/
align-items:center; /*元素居中顯示*/
justify-content:center; /*元素居中顯示*/
}
.btn{ width:400px; margin:0 auto; max-width:100%; margin-top:40px; }
.btn a{ float:left; text-decoration: none; width:46.5%; border:1px solid #5298ff; background:#5298ff; color:#FFF; display:block; height:46px; line-height:44px; text-align:center; font-size:16px; border-radius:3px; overflow: hidden; }
.btn .goindex{ margin-right:7%; }
.btn .lx{ border: 1px solid #d8d8d8; background: #ffffff; color: #8c8c8c; }
@media screen and (max-width: 500px) {
.btn{ width:85%; }
.btn a{ width:100%; font-size:15px; height:42px; line-height:42px; }
.btn .goindex{ margin-right:0; margin-bottom:20px; }
}
</style>
</head>
<body>
<div class="container">
<img src="https://img.zmki.cn/img" class="bg" />
<div class="btn">
<a href="/" class="goindex">回到首頁</a>
<a href="https://wpa.qq.com/msgrd?v=3&uin=20838641&site=qq&menu=yes" target="_blank" class="lx">聯繫站長</a>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
在圖片文件夾內創建一個PHP隨機輸出，然後404界面圖片調用即可。
隨機圖片api
https://img.zmki.cn/img/index.php
只拿來做404頁背景圖或許有點太單調了，實際上也可以用來寫廣告位banner隨機圖片，單個圖標ico隨機（效果會太花里胡哨）。甚至文章縮略圖也能指定圖片隨機顯示。等等等等…只要是能插圖片的地方，都可以用隨機圖片API。
· 如同一滴水裡看見汪洋大海 ·
——此項目完成需鳴謝
- PHP指導老師
- 小和博客
End.
