侧边栏js样式代码
2024-09-08 03:34:50
<!-- menu html -->
<div class="container">
<div class="menu-wrap optiscroll" id="menuWrap" style="display:none">
<nav class="menu"> <!-- 个人简介 -->
<div class="introduce-box">
<div class="introduce-head">
<div class="introduce-via" id="menuBlogAvatar"></div>
</div>
<div id="introduce"></div>
</div> <!-- 导航 -->
<div class="nav-title"></div>
<div class="icon-list">
<ul>
<li><a href="https://www.cnblogs.com/kjdr/" target="_self">首页</a></li>
<li><a href="https://www.cnblogs.com/kjdr/" target="_blank">联系</a></li>
<li><a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" target="_blank">新随笔</a></li>
<li><a href="https://i.cnblogs.com/" target="_blank">管理</a></li>
<li><a href="https://www.cnblogs.com/kjdr/" target="_blank">GitHub</a></li>
<li><a href="https://blog.csdn.net/qq_47099828" target="_blank">CSDN</a></li>
</ul>
</div> <!-- 最新随笔 -->
<div class="m-list-title"><span>最新随笔</span></div>
<div class="m-icon-list" id="sb-sidebarRecentposts"></div> <!-- 我的标签 -->
<div class="m-list-title"><span>我的标签</span></div>
<div class="m-icon-list" id="sb-toptags"></div> <!-- 随笔分类 -->
<div class="m-list-title"><span>随笔分类</span></div>
<div class="m-icon-list" id="sb-classify"></div> <!-- 随笔档案 -->
<div class="m-list-title"><span>随笔档案</span></div>
<div class="m-icon-list" id="sb-record"></div> <!-- 阅读排行 -->
<div class="m-list-title"><span>阅读排行</span></div>
<div class="m-icon-list" id="sb-topview"></div> <!-- 推荐排行 -->
<div class="m-list-title"><span>推荐排行</span></div>
<div class="m-icon-list" id="sb-topDiggPosts"></div> </nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none">
<path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">MENU</button>
<div class="content-wrap" id="content-wrap"></div><!-- /content-wrap -->
</div>
<!-- menu html end --> <!-- banner html -->
<div class="main-header">
<canvas id="notHomeTopCanvas" style=" position: absolute;margin: auto;width: 100%;height: 100%;top: 0;bottom: 0;left: 0;right: 0;"></canvas>
<div class="vertical">
<div class="main-header-content inner">
<h1 class="page-title cssf79d1841e1b313" id="homeTopTitle"></h1>
<h2 class="page-description" id="hitokoto"></h2>
<h3 class="page-author" id="hitokotoAuthor"></h3>
</div>
</div>
<a class="scroll-down" href="javascript:void(0);" data-offset="-45">
<span class="hidden">Scroll Down</span>
<i class="scroll-down-icon iconfont icon-fanhui"></i>
</a>
</div>
<!-- banner html end --> <!-- global var -->
<script type="text/javascript"> /*!
* UPDATES AND DOCS AT: https://github.com/BNDong
* https://www.cnblogs.com/bndong/
* @author: BNDong, dbnuo@foxmail.com
**/ /**
* 博客全局配置，请仔细配置！！
*/
window.cnblogsConfig = { // ---- GitHub文件源配置 ----
GhUserName: 'BNDong', // GitHub用户名(不是昵称)，注意大小写
GhRepositories: 'Cnblogs-Theme-SimpleMemory', // GitHub主题仓库名称
GhVersions : '1bdd29aa067dd0fa8865ab6e64e6cd4d928448ac', // GitHub提交版本哈希值，根据版本加载代码，我有时候会提交代码进行调试，大家最好加载我仓库代码此处的版本 https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/commits/master
// ---- 基础信息配置 ----
blogUser : "科技狂人", // 博主名称，文章后缀和主页图片上都会使用此名称
blogAvatar : "https://pic.cnblogs.com/face/2008883/20200415194441.png", // 用户头像URL
blogStartDate : "2018-08-08", // 入园时间，年-月-日，入园时间查看方法：鼠标停留园龄时间上，会显示入园时间 // ---- 网站配置 ----
webpageTitleOnblur : "Hi,科技狂人", // 当前页失去焦点，页面title显示文字
webpageTitleOnblurTimeOut : 500, // 当前页失去焦点，页面title变化，延时时间，单位毫秒
webpageTitleFocus : "欢迎回来！", // 当前页获取焦点，页面title显示文字，显示后延时恢复原title
webpageTitleFocusTimeOut : 1000, // 当前页获取焦点，页面title变化，延时时间，单位毫秒
webpageIcon : "https://pic.cnblogs.com/face/2008883/20200415194441.png", // 网站图标 // ---- 进度条配置 ----
progressBar: {
id : 'top-progress-bar',
color : '#77b6ff',
height : '2px',
duration: 0.2
}, // ---- Loading配置 ----
loading: {
rebound: {
tension: 16,
friction: 5
},
spinner: {
id: 'spinner',
radius: 90,
sides: 3,
depth: 4,
colors: {
background: '#f0f0f0',
stroke: '#272633',
base: null,
child: '#272633'
},
alwaysForward: true, // When false the spring will reverse normally.
restAt: 0.5, // A number from 0.1 to 0.9 || null for full rotation
renderBase: false
}
}, // ---- 页面动效配置 ----
homeTopAnimationRendered: true, // true || false ,是否渲染主页头图动效
homeTopAnimation: { // 主页头图动效设置
radius: 15,
density: 0.2,
color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色
clearOffset: 0.3
}, essayTopAnimationRendered: true, // true || false ,是否渲染随笔页头图动效
essayTopAnimation: { // 随笔页头图动效设置
triW : 14,
triH : 20,
neighbours : ["side", "top", "bottom"],
speedTrailAppear : .1,
speedTrailDisappear : .1,
speedTriOpen : 1,
trailMaxLength : 30,
trailIntervalCreation : 100,
delayBeforeDisappear : 2,
colors: [
'#96EDA6', '#5BC6A9',
'#38668C', '#374D84',
'#BED5CB', '#62ADC6',
'#8EE5DE', '#304E7B'
]
}, bgAnimationRendered: true, // true || false ,是否渲染背景动效
backgroundAnimation : { // 背景动效设置
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
}, // ---- 主页配置 ----
homeTopImg : [ // 主页图片Url，推荐尺寸>= 1920*1080，支持多张，每次刷新随机设置一张
"https://files-cdn.cnblogs.com/files/IIYMGF/06.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/07.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/08.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/11.bmp",
],
homeBannerText: "", // 主页头图上的标语，设置此选项会固定显示文字，默认为空，自动获取一句。 // ---- 随笔页配置 ----
essayTopImg: [ // 随笔页图片Url，支持多张，每次刷新随机设置一张
"https://files-cdn.cnblogs.com/files/IIYMGF/15.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/16.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/17.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/18.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/19.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/20.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/22.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/23.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/24.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/25.bmp",
],
essayCodeHighlightingType: 'cnblogs', // 代码主题插件类型：cnblogs || highlightjs || prettify
essayCodeHighlighting: 'cnblogs', // 代码高亮主题，具体主题参考文档
essaySuffix:{ // 随笔后缀处配置
aboutHtml : '', // 关于博主，不配置使用默认
copyrightHtml: '', // 版权声明，不配置使用默认
supportHtml : '' // 声援博主，不配置使用默认
}, // ---- 页脚配置 ----
bottomBlogroll: [ // 友情链接，[[链接名,链接]....]
["申请坑位", 'https://www.cnblogs.com/kjdr/'],
],
bottomText: { // 页脚标语
icon: "️", // 图标
left : "既然选择了远方", // 图标左侧文字
right: "便只顾风雨兼程" // 图标右侧文字
}, // ---- 控制台输出 ----
consoleList: [
['IIYMGF CNBlogs', 'https://www.cnblogs.com/kjdr/'],
['IIYMGF GitHub', 'https://www.cnblogs.com/kjdr/'],
['IIYMGF Email', '22727382@qq.com']
['IIYMGF CSDN', 'https://blog.csdn.net/qq_47099828']
],
themeAuthor: false // 是否显示主题作者（原谅我的臭屁，O(∩_∩)O哈哈~）
}; // start cache
$.ajaxSetup({cache: true}); // load loadingJs
$.getScript(getJsDelivrUrl('loading.js'), function () { // Loading start
pageLoading.initRebound();
pageLoading.initSpinner();
pageLoading.spinner.init(pageLoading.spring, true); $.getScript(getJsDelivrUrl('jquery.mCustomScrollbar.min.js'), function () {
$.getScript(getJsDelivrUrl('require.min.js'), function () {
$.getScript(getJsDelivrUrl('config.js'), function () {
var staticResource = [
'optiscroll', 'ToProgress', 'rotate',
'snapSvg', 'classie', 'main4', 'tools'];
require(staticResource, function() {
require(['base'], function() {
(new Base).init();
});
});
});
});
});
}); // get file url
function getJsDelivrUrl(file, directory) {
file = setFileNameMin(file, directory);
return 'https://cdn.jsdelivr.net/gh/'+(window.cnblogsConfig.GhUserName)+'/'+(window.cnblogsConfig.GhRepositories)+'@'+(window.cnblogsConfig.GhVersions)+'/' + (file ? file : '');
} // optimization file name
function setFileNameMin(file, directory) {
if (typeof file == 'undefined') return '';
var suffix = null,fileArr = file.split('.');
if (fileArr.length > 0 && $.inArray(fileArr[(fileArr.length -1)], ['js', 'css']) != -1)
{suffix = fileArr.pop(); directory = suffix;}
file.search('.min') == -1 && fileArr.push('min');
suffix != null && fileArr.push(suffix);
return (typeof directory !== 'undefined' ? (directory + '/' + fileArr.join('.')) : (fileArr.join('.')));
}
</script>
<!-- global var end -->
最新文章
- Angular实现注册系统
- JVM 基础知识
- Active-MQ的安装
- zoj2132-The Most Frequent Number
- iPhone 3GS／4 ／ 4s／5
- 由底层和逻辑说开去——c++之类与对象的深入剖析
- phaser源码解析（三） Phaser.Utils类下isPlainObject方法
- 浅谈C++ 异常处理的语义和性能
- React.js再探（四）
- ThinkPHP 模板的包含、渲染、继承
- Golang 入门 : 结构体(struct)
- Redis Windows 64位下安装Redis详细教程
- 通用唯一识别码UUID
- [lightoj P1306] Solutions to an Equation
- easyui datagrid去掉全选按钮
- BZOJ 3259 [Sdoi2014]数表 (莫比乌斯反演 + 树状数组)
- Easyui中 messager出现的位置
- WP8.1学习系列(第七章)——应用选项卡Pivot交互UX
- C++ Dll 编写入门
- python继承问题
热门文章
- Linux系统学习07-Centos软件安装几种方法
- Tomcat AJP 文件包含漏洞复现(CVE-2020-1938)
- 面试官：你说你精通SpringBoot，你给我说一下类的自动装配吧
- 深度分享：面试阿里，字节跳动，美团90%会被问到的HashMap知识
- mongodb查询前10条
- 本地VM安装虚拟机，使用xshell连接
- leetcode 33和 leetcode81
- Thread.start() ，它是怎么让线程启动的呢？
- selenium调用JS实现自动化
- ?.可选链操作符( ?. ) 可选链运算符可防止抛出 TypeError: Cannot read property ’xxx' of undefined。