目錄
- 前言
- 貼邊打賞
- 美化二維碼
- 合并二維碼
- 壓縮二維碼
- 貼邊代碼
- 加到博客園
- 博客園效果
- 總結
前言
玩博客園到網上找各種美化博客和主題啥的，找到一些好玩的東西，比如打賞插件，我一開始也是用的別人現成的插件，但是覺得過于復雜，還是自己研究研究，搞個簡單版本吧，
同時也多多練習練習自己的前端編碼能力吧，雖然我是個后端程式猿，不過不影響我向全堆疊發展，哈哈，
貼邊打賞
美化二維碼
????首先需要在微信和支付寶的收錢頁面把收款二維碼保存好，然后通過【草料二維碼】解碼，然后把美化后的二維碼下載保存，可以看下圖：
合并二維碼
????上面操作可以得到美化后的微信和支付寶二維碼，我是通過美圖秀秀的拼圖功能將這兩張圖拼接成一張圖，如下操作：
壓縮二維碼
????生成的二維碼可以通過【tinypng】進行壓縮，這個網站我經常用，壓縮效果很不錯，我這張圖片通過壓縮減少68%體積，如下界面：
貼邊代碼
????下面代碼保存到html檔案，用瀏覽器打開就能看到效果，是不是超級簡單啊，
<html>
<head>
<title>貼邊打賞</title>
<style type="text/css">
#chargeCode {
position: fixed;
right: 0;
z-index: 10000;
padding-left: 34px;
width: 0px;
overflow: hidden;
box-sizing: content-box
}
#chargeCodeMain {
transform: scale(0.4);
width: 5px;
border: 1px solid #dbdbdb;
border-right: none
}
#btnChargeCode {
position: absolute;
left: 0;
top: 50%;
margin-top: -50px
}
</style>
</head>
<body>
<div id="chargeCode">
<a id="btnChargeCode" href="javascript:;">
<img src="https://img.uj5u.com/2020/10/23/158924232350144.bmp">
</a>
<div id="chargeCodeMain">
<img src="https://img.uj5u.com/2020/10/23/158924232350145.png">
</div>
</div>
<script type="text/javascript">
var bcc = document.getElementById('btnChargeCode');
var cc = document.getElementById('chargeCode');
var ccm = document.getElementById('chargeCodeMain');
bcc.onmouseover = function() {
cc.style.width='170px';
};
ccm.onmouseout = function() {
cc.style.width='0px';
};
</script>
</body>
</html>
加到博客園
- 首先將css樣式復制到博客園的
頁面定制 CSS 代碼中，
#chargeCode {
position: fixed;
right: 0;
z-index: 10000;
padding-left: 34px;
width: 0px;
overflow: hidden;
box-sizing: content-box
}
#chargeCodeMain {
transform: scale(0.4);
width: 5px;
border: 1px solid #dbdbdb;
border-right: none
}
#btnChargeCode {
position: absolute;
left: 0;
top: 50%;
margin-top: -50px
}
- 然后將html元素復制到博客園
頁首 HTML 代碼中，
<div id="chargeCode">
<a id="btnChargeCode" href="javascript:;">
<img src="https://img.uj5u.com/2020/10/23/158924232350144.bmp">
</a>
<div id="chargeCodeMain">
<img src="https://img.uj5u.com/2020/10/23/158924232350145.png">
</div>
</div>
- 最后將js代碼復制到博客園的
頁腳 HTML 代碼中，
<script type="text/javascript">
var bcc = document.getElementById('btnChargeCode');
var cc = document.getElementById('chargeCode');
var ccm = document.getElementById('chargeCodeMain');
bcc.onmouseover = function() {
cc.style.width='170px';
};
ccm.onmouseout = function() {
cc.style.width='0px';
};
</script>
博客園效果
總結
????還是自己動手豐衣足食，別人的總歸不太適合我額，因為太復雜了，而我只想要個簡單功能，關于本主題已經修改了好多地方了，包括js和css中多余的空格和分號這種我看到都會洗掉掉，這算不算有強迫癥啊，因為少一個字符網路傳輸就少一點，哈哈，不過呢，這個博客主題我越來越喜歡了，也有很多小伙伴看我的博客夸我的主題好看，一定是我選了一個好的主題模板，畢竟像我這樣審美不咋的也能搞出不錯的樣式，唯有偷笑抒發自己的心情，好了本篇博文都是原創，代碼簡單到爆炸，大家有需要盡管拿去用吧，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/187974.html
標籤：JavaScript
上一篇：jquery插件懶加載
下一篇：js之資料型別（1）