前言
这里分享本站使用的插件或者扩展，使用插件部分需要加载静态资源，可能会网站加载速度变慢，请根据情况使用。黑暗模式可能没有适配，请自行修改样式文件来适配。
选项页
描述
在使用如果有选项页或者导航的需求，可以使用选项页。Fluid 使用了 Bootstrap 和 Jquery 框架，这项可能直接使用 Bootstrap 的布局，不需要引入相关静态资源。
代码和使用
<div class="row">
<div class="col-md-4 col-sm-6 jQueryEqualHeight3">
<div class="card">
<img class="card-img-top" src="https://i.vince.pub/blog-file/photo/note/9b323e9549d67ec8a75fbc14b9cd0e237ccce8de.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">🚀 随便说说</h4>
<p class="card-text">基于 Artitalk，这里是我的碎碎念，日常一些吐槽和感慨也会放到这个垃圾桶里。</p>
<a href="/note/say" class="btn btn-primary">进入页面</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 jQueryEqualHeight3">
<div class="card">
<img class="card-img-top" src="https://i.vince.pub/blog-file/photo/note/debug.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">🚧 更新计划</h4>
<p class="card-text">这里记录一些博客、主站和一些相关网站的更新计划、内容和记录一些学习的知识。</p>
<a href="/note/update" class="btn btn-primary">进入页面</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 jQueryEqualHeight3">
<div class="card">
<img class="card-img-top" src="https://i.vince.pub/blog-file/photo/note/bed6d90f1b2f62b817e17029a7261311a23231ec.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">📄 常用内容</h4>
<p class="card-text">这里记录一些网站使用到的插件的使用说明，和一些我经常使用到的链接。</p>
<a href="/note/more" class="btn btn-primary">进入页面</a>
</div>
</div>
</div>
</div>在 HTML 或者 MD 文件中添加代码即可，具体效果查看演示。
演示
介绍卡片
描述
一个超酷的介绍卡片，具体来源为 jQuery 之家，这个卡片应该来源某个国外网站。我修改了样式文件，在移动端不会显示以及和主题样式文件的冲突。
代码与使用
使用代码
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/card/linkscard.css">
<div class="linkscard">
<div class="postcard green">
<div class="additional">
<div class="user-card">
<div class="level center">
<i class="iconfont icon-youhailaji-feijiuxiaojiadian"></i> Vince's Blog
</div>
<div class="points center">
16 POSTS
</div>
<img src="https://cdn.vince.pub/blog-file/photo/i.jpg" width="110" height="110" role="img" aria-labelledby="title desc" class="center">
</div>
<div class="more-info">
<h1>Vince Ying</h1>
<div class="coords">
<span>Bad code</span>
<span>Joined Apr 2020</span>
</div>
<div class="coords">
<span>Just do it later</span>
<span>Fujian, China</span>
</div>
<div class="stats">
<div>
<div class="title">友链</div>
<div class="value">10</div>
</div>
<div>
<div class="title">文章</div>
<div class="value">16</div>
</div>
<div>
<div class="title">懒惰</div>
<div class="value infinity">∞</div>
</div>
<div>
<div class="title">学习</div>
<div class="value infinity">∞</div>
</div>
</div>
</div>
</div>
<div class="general">
<h1>Vince</h1>
<p>欢迎你访问本站，感谢关注，如果你想要交换友链，请通过以下方式。佛系网站，访客也不多，主要为了记录一些东西。
</p>
<span class="more">上次更新：2020/06/26</span>
</div>
</div>
</div>CSS 引入文件
/*---Links Card---*/
@media screen and (max-width: 767px) {
.linkscard {
display: none
}
}
@media screen and (min-width: 767px) {
.linkscard {
margin: 0 auto;
width: 500px;
}
}
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
}
.postcard {
width: 450px;
height: 250px;
background-color: #fff;
background: linear-gradient(#f8f8f8, #fff);
box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
border-radius: 6px;
overflow: hidden;
position: relative;
margin: 1.5rem;
}
.postcard h1 {
text-align: center;
}
.postcard .additional {
position: absolute;
width: 150px;
height: 100%;
background: linear-gradient(#dE685E, #EE786E);
transition: width 0.4s;
overflow: hidden;
z-index: 2;
}
.postcard.green .additional {
background: linear-gradient(#92bCa6, #A2CCB6);
}
.postcard:hover .additional {
width: 100%;
border-radius: 0 5px 5px 0;
}
.postcard .additional .user-card {
width: 150px;
height: 100%;
position: relative;
float: left;
}
.postcard .additional .user-card::after {
content: "";
display: block;
position: absolute;
top: 10%;
right: -2px;
height: 80%;
border-left: 2px solid rgba(0, 0, 0, 0.025);
*/
}
.postcard .additional .user-card .level,
.postcard .additional .user-card .points {
top: 15%;
color: #fff;
text-transform: uppercase;
font-size: 0.75em;
font-weight: bold;
background: rgba(0, 0, 0, 0.15);
padding: 0.125rem 0.75rem;
border-radius: 100px;
white-space: nowrap;
}
.postcard .additional .user-card .points {
top: 85%;
}
.postcard .additional .user-card svg {
top: 50%;
}
.postcard .additional .more-info {
width: 300px;
float: left;
position: absolute;
left: 150px;
height: 100%;
}
.postcard .additional .more-info h1 {
color: #fff;
margin-bottom: 0;
}
.postcard.green .additional .more-info h1 {
color: #224C36;
}
.postcard .additional .coords {
margin: 0 1rem;
color: #fff;
font-size: 1rem;
}
.postcard.green .additional .coords {
color: #325C46;
}
.postcard .additional .coords span+span {
float: right;
}
.postcard .additional .stats {
font-size: 2rem;
display: flex;
position: absolute;
bottom: 1rem;
left: 1rem;
right: 1rem;
top: auto;
color: #fff;
}
.postcard.green .additional .stats {
color: #325C46;
}
.postcard .additional .stats>div {
flex: 1;
text-align: center;
}
.postcard .additional .stats i {
display: block;
}
.postcard .additional .stats div.title {
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
}
.postcard .additional .stats div.value {
font-size: 1.5rem;
font-weight: bold;
line-height: 1.5rem;
}
.postcard .additional .stats div.value.infinity {
font-size: 2.5rem;
}
.postcard .general {
width: 300px;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
box-sizing: border-box;
padding: 1rem;
padding-top: 0;
}
.postcard .general .more {
position: absolute;
bottom: 1rem;
right: 1rem;
font-size: 0.9em;
}
在想要的地方中添加代码即可，具体效果查看演示。
演示
请使用 PC 端跳转到 友情链接 查看。
CDN
https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/card/linkscard.css分页栏
描述
来源 GitHub, 我觉得这个分页栏的格式和这个主题还不算太不搭配。
代码和使用
使用示例代码
<div class="content">
<div class="ah-tab-wrapper">
<div class="ah-tab">
<a class="ah-tab-item" data-ah-tab-active="true" href="">更新日志及部署状态</a>
<a class="ah-tab-item" href="">本站使用的一些服务</a>
<a class="ah-tab-item" href="">相关版权</a>
<a class="ah-tab-item" href="">本站节点信息</a>
<a class="ah-tab-item" href="">移动端页面预览</a>
</div>
</div>
<div class="ah-tab-content-wrapper">
<div class="ah-tab-content" data-ah-tab-active="true">
<img src="https://cdn.vince.pub/blog-file/photo/68747470733a2f2f6170692e6e65746c6966792e636f6d2f6170692f76312f6261646765732f33356661376434392d306333322d343766382d623839302d6365333235356336373364652f6465706c6f792d737461747573.svg" alt="badge1" /></a>
<img src="https://cdn.vince.pub/blog-file/photo/badge1.svg" alt="badge1" /></a>
<img src="https://cdn.vince.pub/blog-file/photo/badge2.svg" alt="badge2" /></a>
<h1> </h1>
<li>网站整体建设开发（2020/4/4）</li>
<li>网站插件部署（2020/4/5）</li>
<li>网站关于页面完善（2020/4/5）</li>
<li>一些错误更正（2020/4/6）</li>
<li>jsdelivr 使用参考 （2020/4/6）</li>
<li>友链页面 （2020/4/7）</li>
<li>视频播放插件 （2020/4/7）</li>
<li>关闭分类页，打开归档页面（2020/4/7）</li>
<li>更换评论系统为 valine ，创建留言页面（2020/4/7）</li>
<li>顶部任务栏图标（2020/4/8）</li>
<li>中英文规范与博客版本更新（2020/4/10）</li>
<li>加密插件（2020/4/10）</li>
<li>统计服务及内容管理页面（2020/4/10）</li>
<li>valine 邮箱提醒（2020/4/10）</li>
<li>GitHub Actions 部署（2020/5/9)</li>
<li>更新 footer (2020/5/10)</li>
<li>移动一言与运行时间到关于页面(2020/5/10)</li>
<li>更换 CDN (2020/5/11)</li>
<li>整合关于页面（2020/5/21）</li>
<li>引入 Icheck-material（2020/5/22）</li>
<li>友链界面重新整合（2020/5/24）</li>
<li>优化菜单选项及加入更多页面（2020/5/24）</li>
<li>多节点部署（2020/5/26）</li>
</div>
<div class="ah-tab-content">
<strong>以下为本站所使用程序及插件</strong>
<h2> </h2>
<li><strong><a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="noopener">Fluid</a></strong></li>
<li><strong><a href="https://www.jsdelivr.com" target="_blank" rel="noopener">JSDelivr</a></strong></li>
<li><strong><a href="https://hitokoto.cn/" target="_blank" rel="noopener">Hitokoto</a></strong></li>
<li><strong><a href="https://valine.js.org/" target="_blank" rel="noopener">Valine</a></strong></li>
<li><strong><a href="https://hexo.io/" target="_blank" rel="noopener">hexo</a></strong></li>
<li><strong><a href="https://github.com/jaredly/hexo-admin" target="_blank" rel="noopener">Hexo-admin</a></strong></li>
<li><strong><a href="https://github.com/rozbo/hexo-abbrlink" target="_blank" rel="noopener">Hexo-abbrlink</a></strong></li>
<li><strong><a href="https://github.com/MikeCoder/hexo-blog-encrypt" target="_blank" rel="noopener">Hexo-blog-encrypt</a></strong></li>
<li><strong><a href="https://github.com/netcan/hexo-generator-index-pin-top" target="_blank" rel="noopener">Hexo-generator-index-pin-top</a></strong></li>
<li><strong><a href="https://github.com/MoePlayer/hexo-tag-dplayer" target="_blank" rel="noopener">Hexo-tag-dplayer</a></strong></li>
<li><strong><a href="https://github.com/killia15/ProgressCircle" target="_blank" rel="noopener">ProgressCircle</a></strong></li>
<li><strong><a href="https://github.com/bantikyan/icheck-material/" target="_blank" rel="noopener">Icheck-material</a></strong></li>
<li><strong><a href="https://github.com/mohammad-hammal/bootsrap4-buttons-extended" target="_blank" rel="noopener">bootsrap4-buttons-extended</a></strong></li>
<li><strong><a href="https://github.com/vinceying/Hexo-Action-TencentCloudBase" target="_blank" rel="noopener">Hexo-Action-TencentCloudBase</a></strong></li>
</div>
<div class="ah-tab-content">
<li>网站内容使用 CC BY-SA 3.0 协议，除特别标注外，均可注明出处转载。Fluid 使用 MIT 协议，我会遵守相关协议。网站图片部分来源于网络，如有侵权，非常抱歉，请通过上方电子邮件按钮联系我，收到后我将尽快删除。</li>
</div>
<div class="ah-tab-content">
<strong>以下为本站的节点信息</strong>
<h2> </h2>
<li><strong><a href="https://netlify.vince.pub/" target="_blank" rel="noopener">Netlify</a></strong></li>
<li><strong><a href="https://gh.vince.pub/" target="_blank" rel="noopener">Github</a></strong></li>
<li><strong><a href="https://coding.vince.pub/" target="_blank" rel="noopener">Coding</a></strong></li>
<li><strong><a href="https://vercel.vince.pub/" target="_blank" rel="noopener">Vercel</a></strong></li>
</div>
<div class="ah-tab-content">
<iframe src="https://i.vince.pub/" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/tabs/tabs.js"></script>
<script>
$(function() {
$('.ah-tab-wrapper').horizontalmenu({
itemClick: function(item) {
$('.ah-tab-content-wrapper .ah-tab-content').removeAttr('data-ah-tab-active');
$('.ah-tab-content-wrapper .ah-tab-content:eq(' + $(item).index() + ')').attr('data-ah-tab-active', 'true');
return false; //if this finction return true then will be executed http request
}
});
});
</script>CSS 引入文件
.ah-tab-wrapper {
position: relative;
}
.ah-tab-wrapper *,
.ah-tab-wrapper *:before,
.ah-tab-wrapper *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ah-tab {
border-bottom: 1px solid #ebebeb;
position: relative;
white-space: nowrap;
overflow: hidden;
letter-spacing: -0.3em;
}
.ah-tab::before,
.ah-tab::after {
bottom: 0;
content: "";
height: 100%;
opacity: 0;
position: absolute;
z-index: 1;
transition: opacity .3s;
}
.ah-tab::before {
left: -100%;
width: 30px;
background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
}
.ah-tab::after {
right: 100%;
width: 80px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}
.ah-tab-overflow-left::before {
opacity: 1;
left: 0;
}
.ah-tab-overflow-right::after {
opacity: 1;
right: 0;
}
.ah-tab-overflow-wrapper {
position: absolute;
width: 43px;
height: 100%;
right: 100%;
opacity: 0;
top: 0;
z-index: 1;
text-align: center;
}
.ah-tab-overflow-wrapper[data-ah-tab-active="true"] {
right: 0;
opacity: 1;
transition: opacity .3s;
}
.ah-tab-overflow-menu {
background: transparent url(https://cdn.vince.pub/blog-file/photo/list.svg) center center no-repeat;
background-size: 18px;
display: inline-block;
width: 100%;
height: 100%;
border: 0;
cursor: pointer;
transition: opacity .3s;
opacity: .7;
}
.ah-tab-overflow-wrapper:hover .ah-tab-overflow-menu {
opacity: 1;
}
.ah-tab-overflow-list {
position: absolute;
top: -1000%;
right: 0;
text-align: left;
background-color: #fff;
border: 1px solid #e9e9e9;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);
list-style: none;
transition: opacity .3s;
opacity: 0;
max-width: 290px;
}
.ah-tab-overflow-list::after {
content: " ";
display: block;
position: absolute;
top: -14px;
right: 14px;
width: 0;
height: 0;
border: 7px solid transparent;
border-bottom-color: #fff;
}
.ah-tab-overflow-list::before {
content: " ";
display: block;
position: absolute;
top: -16px;
right: 13px;
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: #cdcdcd;
}
.ah-tab-overflow-wrapper:hover .ah-tab-overflow-list {
top: 99%;
padding: 10px 0;
opacity: 1;
}
.ah-tab-overflow-list:hover {
display: block;
}
.ah-tab-item {
color: #8b8b8b;
cursor: pointer;
display: inline-block;
letter-spacing: normal;
transition: all .3s;
text-decoration: none;
font-size: 16px;
}
.ah-tab>.ah-tab-item {
border-bottom: 3px solid transparent;
margin-right: 30px;
padding: 15px 0;
}
@media (min-width: 768px) {
.ah-tab>.ah-tab-item {
margin-right: 50px;
}
}
.ah-tab-item[data-ah-tab-active="true"] {
color: #215393;
}
.ah-tab>.ah-tab-item:hover {
border-bottom: 3px solid #8b8b8b;
}
.ah-tab>.ah-tab-item[data-ah-tab-active="true"] {
border-bottom-color: #215393;
}
.ah-tab-overflow-list>.ah-tab-item {
border-left: 3px solid transparent;
display: block;
overflow: hidden;
padding: 10px 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.ah-tab-overflow-list>.ah-tab-item:hover {
border-left-color: #8b8b8b;
}
.ah-tab-overflow-list>.ah-tab-item[data-ah-tab-active="true"] {
border-left-color: #215393;
}
.ah-tab-content-wrapper {
margin: 30px 0;
}
.ah-tab-content {
display: none;
padding: 30px;
border: 1px solid #ebebeb;
}
.ah-tab-content[data-ah-tab-active="true"] {
display: block;
}JS 引入文件
(function($) {
$.fn.horizontalmenu = function(option) {
var setting = {
itemClick: function(sender) {
return true;
}
};
if (option) $.extend(setting, option);
var isOverflown = function(selector) {
var element = $(selector)[0];
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
var adaptiveTab = function(tabWrapper) {
var tab = $(tabWrapper).find('.ah-tab');
var tabOvorflowList = $(tabWrapper).find('.ah-tab-overflow-wrapper');
var isOver = isOverflown(tab);
if (isOver) {
tab.addClass('ah-tab-overflow-right');
} else {
tab.removeClass('ah-tab-overflow-right');
}
tabOvorflowList.attr('data-ah-tab-active', isOver);
var items = tab.find('.ah-tab-item');
var activeItem = tab.find('.ah-tab-item[data-ah-tab-active="true"]');
var activeIndex = activeItem.index();
var marginLeft = 0,
marginRight = 0;
if (isOver) {
// console.clear()
for (var i = 0; i < items.length; i++) {
var val = items.eq(i).width() + parseInt(items.eq(i).css('margin-right'));
if (i < activeIndex) {
marginLeft += val;
continue;
}
marginRight += val;
}
console.log(marginRight);
if (marginLeft + activeItem.width() + 80 > $(tab).width()) {
marginLeft *= -1;
if (activeIndex) {
var dW = $(tab).width() - marginRight - 80;
marginLeft += parseInt(activeItem.css('margin-right'));
console.log(dW);
if (dW > 0)
marginLeft += dW;
// 胁褘褔懈褋谢懈褌褜 褕懈褉懈薪褍 锌芯褋谢械 胁褘写械谢械薪薪芯谐芯 褝谢械屑械薪褌邪 薪邪蟹芯胁械屑 械谐芯 dA. dW = 械褋谢懈 tab.width() - dA > 0, 褌芯 marginLeft -= dW
tab.addClass('ah-tab-overflow-left');
}
} else {
marginLeft = 0;
tab.removeClass('ah-tab-overflow-left');
}
} else {
tab.removeClass('ah-tab-overflow-left');
}
items.css('transform', 'translateX(' + marginLeft + 'px)');
}
var initialize = function(wrapper) {
if (wrapper.find('.ah-tab-overflow-wrapper').length) return false;
var items = wrapper.find('.ah-tab-item');
items.bind('click', function() {
var isContinue = setting.itemClick($(this));
if (!isContinue) {
var index = $(this).index();
var w = $(this).closest('.ah-tab-wrapper');
w.find('.ah-tab-item').removeAttr('data-ah-tab-active');
w.find('.ah-tab .ah-tab-item').eq(index).attr('data-ah-tab-active', 'true');
w.find('.ah-tab-overflow-wrapper .ah-tab-item').eq(index).attr('data-ah-tab-active', 'true');
adaptiveTab(w);
}
return isContinue;
});
$('<div>', {
class: 'ah-tab-overflow-wrapper',
append: $('<button>', {
type: 'menu',
class: 'ah-tab-overflow-menu'
}).add($('<div>', {
class: 'ah-tab-overflow-list',
append: items.clone(true, true).removeAttr('style')
}))
}).appendTo(wrapper);
adaptiveTab(wrapper);
var resizeStabilizer = undefined;
$(window).bind('resize', function() {
if (resizeStabilizer) clearTimeout(resizeStabilizer);
resizeStabilizer = setTimeout(function() {
adaptiveTab(wrapper);
}, 20);
});
}
return this.each(function() {
initialize($(this));
});
};
})(jQuery);在想要的地方中添加代码即可，具体效果查看演示。
演示
CDN
https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/tabs/tabs.js
https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/tabs/tabs.css基于 SVG 的状态仪表盘
描述
来源 GitHub, 我修改了样式文件，适配了移动端。
代码记使用
使用代码
<div id="html-partial">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/circlechart/circlechart.css">
<div id="percent">
<div class="circlechart" data-percentage="-50">Study</div>
<div class="circlechart" data-percentage="65">Blog</div>
<div class="circlechart" data-percentage="30">Website</div>
</div>
<script>
window.jQuery || document.write('<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"><\/script>')
</script>
<script src="https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/circlechart/circlechart.js"></script>
<script>
$('.circlechart').circlechart(); // Initialization
</script>
</div>CSS 引入文件
/**
* Inspiration for this project found at:
* https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart
* 1. The `reverse` animation direction plays the animation backwards
* which makes it start at the stroke offset 100 which means displaying
* no stroke at all and animating it to the value defined in the SVG
* via the inline `stroke-dashoffset` attribute.
* 2. Rotate by -90 degree to make the starting point of the
* stroke the top of the circle.
* 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
* and Edge, use the transform attribute directly on the SVG element as a
* . workaround.
*/
.circle-chart {
width: 150px;
height: 150px;
}
.circle-chart__circle {
stroke: #00acc1;
stroke-width: 2;
stroke-linecap: square;
fill: none;
animation: circle-chart-fill 2s reverse;
/* 1 */
transform: rotate(-90deg);
/* 2, 3 */
transform-origin: center;
/* 4 */
}
/**
* 1. Rotate by -90 degree to make the starting point of the
* stroke the top of the circle.
* 2. Scaling mirrors the circle to make the stroke move right
* to mark a positive chart value.
* 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
* and Edge, use the transform attribute directly on the SVG element as a
* . workaround.
*/
.circle-chart__circle--negative {
transform: rotate(-90deg) scale(1, -1);
/* 1, 2, 3 */
}
.circle-chart__background {
stroke: #efefef;
stroke-width: 2;
fill: none;
}
.circle-chart__info {
animation: circle-chart-appear 2s forwards;
opacity: 0;
transform: translateY(0.3em);
}
.circle-chart__percent {
alignment-baseline: central;
text-anchor: middle;
font-size: 8px;
}
.circle-chart__subline {
alignment-baseline: central;
text-anchor: middle;
font-size: 3px;
}
.success-stroke {
stroke: #00C851;
}
.warning-stroke {
stroke: #ffbb33;
}
.danger-stroke {
stroke: #ff4444;
}
@keyframes circle-chart-fill {
to {
stroke-dasharray: 0 100;
}
}
@keyframes circle-chart-appear {
to {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (max-width: 960px) {
#percent {
width: 400px;
height: 400px;
margin: 50px auto;
}
}
@media screen and (min-width: 960px) {
#percent {
width: 600px;
height: 200px;
margin: 50px auto;
}
}
.circlechart {
float: left;
padding: 20px;
}
.html-partial {
margin: 0 auto;
}JS 引入文件
function makesvg(percentage, inner_text = "") {
var abs_percentage = Math.abs(percentage).toString();
var percentage_str = percentage.toString();
var classes = ""
if (percentage < 0) {
classes = "danger-stroke circle-chart__circle--negative";
} else if (percentage > 0 && percentage <= 30) {
classes = "warning-stroke";
} else {
classes = "success-stroke";
}
var svg = '<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" xmlns="http://www.w3.org/2000/svg">' +
'<circle class="circle-chart__background" cx="16.9" cy="16.9" r="15.9" />' +
'<circle class="circle-chart__circle ' + classes + '"' +
'stroke-dasharray="' + abs_percentage + ',100" cx="16.9" cy="16.9" r="15.9" />' +
'<g class="circle-chart__info">' +
' <text class="circle-chart__percent" x="17.9" y="15.5">' + percentage_str + '%</text>';
if (inner_text) {
svg += '<text class="circle-chart__subline" x="16.91549431" y="22">' + inner_text + '</text>'
}
svg += ' </g></svg>';
return svg
}
(function($) {
$.fn.circlechart = function() {
this.each(function() {
var percentage = $(this).data("percentage");
var inner_text = $(this).text();
$(this).html(makesvg(percentage, inner_text));
});
return this;
};
}(jQuery));在想要的地方中添加代码即可，具体效果查看演示。
演示
CDN
https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/circlechart/circlechart.css
https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/circlechart/circlechart.js本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！