Init: 2023 Version
从服务器拉取的最新版本
This commit is contained in:
Executable
+372
@@ -0,0 +1,372 @@
|
||||
/* ----
|
||||
|
||||
# Kico Style Docs
|
||||
# By: Dreamer-Paul
|
||||
# Last Update: 2022.12.25
|
||||
|
||||
---- */
|
||||
|
||||
/* 0 - 全局
|
||||
-------------------------------- */
|
||||
:root {
|
||||
--light-blue: #57c4fd;
|
||||
--darker-gray: #666;
|
||||
|
||||
--bg-dark: #fafafa;
|
||||
--bg-darker: #f4f4f4;
|
||||
|
||||
--padding: 1.5em;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-left: 3.5em;
|
||||
}
|
||||
|
||||
body.has-bar {
|
||||
margin-left: 15.5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
body, body.has-bar {
|
||||
margin-top: 3.5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3 { font-weight: lighter }
|
||||
h4, h5, h6 { font-weight: normal }
|
||||
|
||||
.btn.customed { border-radius: 3em }
|
||||
|
||||
.btn.blue.customed {
|
||||
background: #57c4fd;
|
||||
box-shadow: 0 4px #41a5cd;
|
||||
transition: background .3s, box-shadow .3s, transform .3s;
|
||||
}
|
||||
.btn.blue.customed:active {
|
||||
box-shadow: none;
|
||||
background: #41a5cd;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
|
||||
/* 1 - 页眉
|
||||
-------------------------------- */
|
||||
.sidebar {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
background-color: var(--light-blue);
|
||||
}
|
||||
|
||||
.sidebar img, .sidebar svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sidebar .header {
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
background-color: #3fb2ed;
|
||||
}
|
||||
|
||||
.sidebar .header img {
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.sidebar .title {
|
||||
display: none;
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
.sidebar .menu a {
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar .menu a:hover svg {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
.sidebar .menu svg {
|
||||
fill: #fff;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.sidebar .menu a::before, .sidebar .menu a::after {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.sidebar .menu a:before {
|
||||
left: 3em;
|
||||
top: 1.25em;
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: .5em solid transparent;
|
||||
border-right-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
.sidebar .menu a::after {
|
||||
top: .5em;
|
||||
left: 4em;
|
||||
padding: .5em 1em;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
border-radius: .5em;
|
||||
content: attr(content);
|
||||
background: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.sidebar .menu a:hover::before, .sidebar .menu a:hover::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.sidebar {
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.sidebar .header { float: left }
|
||||
.sidebar .title { display: inline-block }
|
||||
.sidebar .menu { float: right }
|
||||
.sidebar .menu a { float: left }
|
||||
|
||||
.sidebar .menu a::before {
|
||||
top: 3em;
|
||||
left: 1.25em;
|
||||
border-color: transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
.sidebar .menu a::after {
|
||||
top: 4em;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-sidebar {
|
||||
top: 0;
|
||||
left: 3.5em;
|
||||
bottom: 0;
|
||||
width: 12em;
|
||||
padding: 1em;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
.sub-sidebar > ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.sub-sidebar > ul > li {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.sub-sidebar > ul > li > ul a {
|
||||
color: #555;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.sub-sidebar a {
|
||||
color: inherit;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.sub-sidebar {
|
||||
left: -12em;
|
||||
top: 3.5em;
|
||||
background: #fff;
|
||||
border-right: none;
|
||||
transition: transform .3s;
|
||||
}
|
||||
.sub-sidebar.active {
|
||||
outline: 50em solid rgba(0, 0, 0, .5);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 2 - 主体内容
|
||||
-------------------------------- */
|
||||
main .ks-title {
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
margin-bottom: 2em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
main .ks-title h2 {
|
||||
color: var(--darker-gray);
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
main .ks-content {
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
main .ks-content section { margin-top: 5em }
|
||||
main .ks-content section:first-child { margin-top: 0 }
|
||||
|
||||
main .ks-content section > * { margin-bottom: 1em }
|
||||
main .ks-content section > *:last-child { margin-bottom: 0 }
|
||||
|
||||
main .ks-content > h1 {
|
||||
color: var(--darker-gray);
|
||||
font-size: 1.6em;
|
||||
position: relative;
|
||||
margin-bottom: 1.5em;
|
||||
padding-bottom: .5em;
|
||||
display: inline-block;
|
||||
scroll-margin-top: 5em;
|
||||
}
|
||||
main .ks-content > h1::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
width: 1.5em;
|
||||
position: absolute;
|
||||
border-radius: 1em;
|
||||
border-bottom: .25em solid var(--yellow);
|
||||
}
|
||||
|
||||
main .ks-content section > h2[id] { font-size: 1.4em }
|
||||
main .ks-content section > h2[id]::before {
|
||||
content: "#";
|
||||
color: var(--light-blue);
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
main .ks-content .demo-block {
|
||||
padding: var(--padding);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--bg-dark);
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
main .ks-content .code-block {
|
||||
padding: var(--padding);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--bg-darker);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
main .ks-content .code-block:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
main .ks-content .code-block summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
main .ks-content .code-block[open] summary {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* 首页更多产品 */
|
||||
.more-product {
|
||||
padding: 1.5em;
|
||||
border-radius: 1em;
|
||||
background: #fafafa;
|
||||
}
|
||||
main .more-product + .more-product { margin-top: 1em }
|
||||
|
||||
main .more-product p {
|
||||
color: var(--darker-gray);
|
||||
}
|
||||
|
||||
/* Demo 样式 */
|
||||
.show-notice .ks-notice {
|
||||
animation: none;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.float-demo .float-left, .float-demo .float-right {
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
background: #3fb2ed;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
.grids-size-demo p, .grids-auto-demo p, .grids-padding-demo p, .columns-hide-demo p {
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
background: #3fb2ed;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
.animation-demo {
|
||||
padding-top: 5em !important;
|
||||
padding-bottom: 5em !important;
|
||||
}
|
||||
|
||||
|
||||
/* 3 - 页尾
|
||||
-------------------------------- */
|
||||
footer {
|
||||
color: #666;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* 返回页首 */
|
||||
footer .to-top {
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
width: 2em;
|
||||
right: 1em;
|
||||
bottom: -2em;
|
||||
display: block;
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
transition: background .3s, bottom .3s;
|
||||
}
|
||||
footer .to-top.active {
|
||||
bottom: .85em;
|
||||
}
|
||||
footer .to-top:hover {
|
||||
color: #fff;
|
||||
background: #ffc670;
|
||||
}
|
||||
footer .to-top:before {
|
||||
content: "\f106";
|
||||
font: 1em/2em "FontAwesome";
|
||||
}
|
||||
|
||||
|
||||
/* 4 - 附加
|
||||
-------------------------------- */
|
||||
.gt-container .gt-meta { z-index: auto !important }
|
||||
.gt-comment-text, .gt-header-controls-tip { display: none }
|
||||
|
||||
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: slategray }
|
||||
.token.punctuation { color: #f8f8f2 }
|
||||
.token.namespace { opacity: .7 }
|
||||
.token.property, .token.tag, .token.function-name, .token.constant, .token.symbol, .token.deleted { color: #f92672 }
|
||||
.token.boolean, .token.number { color: #ae81ff }
|
||||
.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted { color: #a6e22e }
|
||||
|
||||
.token.operator, .token.entity, .token.url, .token.variable { color: #f8f8f2 }
|
||||
.token.atrule, .token.attr-value, .token.class-name { color: #e6db74 }
|
||||
.token.keyword { color: #66d9ef }
|
||||
.token.regex, .token.important { color: #fd971f }
|
||||
|
||||
.language-css .token.string, .style .token.string { color: #28b9be }
|
||||
|
||||
.token.important, .token.bold { font-weight: bold }
|
||||
.token.italic { font-style: italic }
|
||||
.token.entity { cursor: help }
|
||||
.token.important { font-weight: normal }
|
||||
Executable
+59
@@ -0,0 +1,59 @@
|
||||
/* ----
|
||||
|
||||
# Kico Style Docs
|
||||
# By: Dreamer-Paul
|
||||
# Last Update: 2022.12.25
|
||||
|
||||
---- */
|
||||
|
||||
const app = () => {
|
||||
ks.image("main img");
|
||||
|
||||
var obj = {
|
||||
toggle: ks.select(".sidebar .header"),
|
||||
sidebar: ks.select(".sub-sidebar"),
|
||||
};
|
||||
|
||||
if (obj.sidebar) {
|
||||
obj.toggle.onclick = () => {
|
||||
obj.sidebar.classList.toggle("active");
|
||||
};
|
||||
}
|
||||
|
||||
const renderCodeBlock = () => {
|
||||
const demoBlocks = ks.selectAll(".demo-block");
|
||||
const codeBlocks = ks.selectAll(".code-block code");
|
||||
|
||||
if (demoBlocks.length !== codeBlocks.length) {
|
||||
console.log(demoBlocks, codeBlocks);
|
||||
throw new Error("数量不匹配，请检查");
|
||||
}
|
||||
|
||||
codeBlocks.forEach((block, index) => {
|
||||
const clearedRows = demoBlocks[index].innerHTML.split("\n").filter((row) => row.search(/\S+/) !== -1);
|
||||
|
||||
if (!("fillContent" in block.dataset) || !clearedRows.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const firstSpaceBlock = clearedRows[0].match(/\s+/);
|
||||
let firstSpaceBlockLength = 0;
|
||||
let clearedContents;
|
||||
|
||||
if (firstSpaceBlock) {
|
||||
firstSpaceBlockLength = firstSpaceBlock[0].length;
|
||||
|
||||
clearedContents = clearedRows.map((item) => item.substring(firstSpaceBlockLength)).join("\n");
|
||||
}
|
||||
else {
|
||||
clearedContents = demoBlocks[index].innerHTML;
|
||||
}
|
||||
|
||||
block.innerHTML = clearedContents.replaceAll("<", "<").replaceAll(">", ">");
|
||||
});
|
||||
};
|
||||
|
||||
renderCodeBlock();
|
||||
};
|
||||
|
||||
app();
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 609 B |
Executable
+1491
File diff suppressed because it is too large
Load Diff
Executable
+418
@@ -0,0 +1,418 @@
|
||||
/* ----
|
||||
|
||||
# Kico Style 1.0
|
||||
# By: Dreamer-Paul
|
||||
# Last Update: 2020.4.10
|
||||
|
||||
一个可口的极简响应式前端框架。
|
||||
|
||||
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
|
||||
|
||||
---- */
|
||||
|
||||
Array.prototype.remove = function (value) {
|
||||
var index = this.indexOf(value);
|
||||
if(index > -1) this.splice(index, 1);
|
||||
};
|
||||
|
||||
(function (global, setting) {
|
||||
var KStyle = function (a, b) {
|
||||
return KStyle.fn.init(a, b);
|
||||
};
|
||||
|
||||
KStyle.fn = KStyle.prototype = {
|
||||
construtor: KStyle,
|
||||
init: function (a, b) {
|
||||
a = KStyle.selectAll(a);
|
||||
|
||||
a.each = function (fn){
|
||||
return KStyle.each(a, fn);
|
||||
};
|
||||
|
||||
a.image = function () {
|
||||
return KStyle.image(a);
|
||||
};
|
||||
|
||||
a.lazy = function (bg) {
|
||||
return KStyle.lazy(a, bg);
|
||||
};
|
||||
|
||||
a.scrollTo = function (offset) {
|
||||
return KStyle.scrollTo(a, offset);
|
||||
};
|
||||
|
||||
a.empty = function () {
|
||||
return KStyle.each(a, function (item) { KStyle.empty(item); });
|
||||
}
|
||||
|
||||
return a;
|
||||
}
|
||||
};
|
||||
|
||||
// 批量处理
|
||||
KStyle.each = function (data, fn) {
|
||||
for(var i = 0; i < data.length; i++){
|
||||
fn(data[i], i, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 创建对象
|
||||
KStyle.create = function (tag, prop) {
|
||||
var obj = document.createElement(tag);
|
||||
|
||||
if(prop){
|
||||
if(prop.id) obj.id = prop.id;
|
||||
if(prop.src) obj.src = prop.src;
|
||||
if(prop.href) obj.href = prop.href;
|
||||
if(prop.class) obj.className = prop.class;
|
||||
if(prop.text) obj.innerText = prop.text;
|
||||
if(prop.html) obj.innerHTML = prop.html;
|
||||
|
||||
if(prop.child){
|
||||
if(prop.child.constructor === Array){
|
||||
KStyle.each(prop.child, (i) => {
|
||||
obj.appendChild(i);
|
||||
});
|
||||
}
|
||||
else{
|
||||
obj.appendChild(prop.child);
|
||||
}
|
||||
}
|
||||
|
||||
if(prop.attr){
|
||||
if(prop.attr.constructor === Array){
|
||||
KStyle.each(prop.attr, (i) => {
|
||||
obj.setAttribute(i.name, i.value);
|
||||
});
|
||||
}
|
||||
else if(prop.attr.constructor === Object){
|
||||
obj.setAttribute(prop.attr.name, prop.attr.value);
|
||||
}
|
||||
}
|
||||
|
||||
if(prop.parent) prop.parent.appendChild(obj);
|
||||
}
|
||||
|
||||
return obj;
|
||||
};
|
||||
|
||||
// 选择对象
|
||||
KStyle.select = function (obj) {
|
||||
switch(typeof obj){
|
||||
case "object": return obj; break;
|
||||
case "string": return document.querySelector(obj); break;
|
||||
}
|
||||
};
|
||||
|
||||
KStyle.selectAll = function (obj) {
|
||||
switch(typeof obj){
|
||||
case "object": return obj; break;
|
||||
case "string": return document.querySelectorAll(obj); break;
|
||||
}
|
||||
};
|
||||
|
||||
// 清空子元素
|
||||
KStyle.empty = function (obj) {
|
||||
while(obj.firstChild){
|
||||
obj.removeChild(obj.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
var notice = {
|
||||
wrap: KStyle.create("notice"),
|
||||
list: []
|
||||
};
|
||||
|
||||
KStyle.notice = function (content, attr) {
|
||||
var item = KStyle.create("div", {class: "ks-notice", html: "<span class='content'>" + content + "</span>", parent: notice.wrap});
|
||||
|
||||
notice.list.push(item);
|
||||
|
||||
if(!document.querySelector("body > notice")) document.body.appendChild(notice.wrap);
|
||||
|
||||
if(attr && attr.time){
|
||||
setTimeout(notice_remove, attr.time);
|
||||
}
|
||||
else{
|
||||
var close = KStyle.create("span", {class: "close", parent: item});
|
||||
|
||||
close.onclick = notice_remove;
|
||||
}
|
||||
|
||||
if(attr && attr.color){
|
||||
item.classList.add(attr.color);
|
||||
}
|
||||
|
||||
function notice_remove() {
|
||||
item.classList.add("remove");
|
||||
notice.list.remove(item);
|
||||
|
||||
setTimeout(function () {
|
||||
try{
|
||||
notice.wrap.removeChild(item);
|
||||
item = null;
|
||||
}
|
||||
catch(err) {}
|
||||
|
||||
if(document.querySelector("body > notice") && notice.list.length === 0){
|
||||
document.body.removeChild(notice.wrap);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
// 灯箱
|
||||
var image_box = {
|
||||
img: KStyle.create("img"),
|
||||
prev: KStyle.create("div", {class: "ks-prev"}),
|
||||
next: KStyle.create("div", {class: "ks-next"}),
|
||||
ball: KStyle.create("div", {class: "ks-ball"})
|
||||
};
|
||||
image_box.wrap = KStyle.create("div", {class: "ks-image", child: [
|
||||
image_box.prev, image_box.img, image_box.next, image_box.ball
|
||||
]});
|
||||
|
||||
image_box.wrap.onclick = function (e) {
|
||||
image_box.wrap.classList.add("remove");
|
||||
setTimeout(function () {
|
||||
try{
|
||||
document.body.removeChild(image_box.wrap);
|
||||
image_box.wrap.classList.remove("remove");
|
||||
}
|
||||
catch (err){}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
image_box.img.onload = function () {
|
||||
image_box.wrap.classList.remove("loading");
|
||||
};
|
||||
|
||||
KStyle.image = function (selector) {
|
||||
var current = 0;
|
||||
var get_images = KStyle.selectAll(selector);
|
||||
|
||||
var actions = {
|
||||
ori: function (obj, num) {
|
||||
obj.setAttribute("ks-image", "active");
|
||||
|
||||
obj.onclick = function () {
|
||||
current = num;
|
||||
actions.set();
|
||||
document.body.appendChild(image_box.wrap);
|
||||
};
|
||||
},
|
||||
set: function () {
|
||||
var img = get_images[current];
|
||||
|
||||
current === 0 ? image_box.prev.classList.add("ended") : image_box.prev.classList.remove("ended");
|
||||
current === get_images.length - 1 ? image_box.next.classList.add("ended") : image_box.next.classList.remove("ended");
|
||||
|
||||
if(img.getAttribute("ks-original") !== null){
|
||||
image_box.img.src = img.getAttribute("ks-original");
|
||||
}
|
||||
else if(img.src){
|
||||
image_box.img.src = img.src;
|
||||
}
|
||||
else{
|
||||
console.error("This image has no valid tag!");
|
||||
}
|
||||
|
||||
image_box.wrap.classList.add("loading");
|
||||
}
|
||||
};
|
||||
|
||||
KStyle.each(get_images, function (item, id) {
|
||||
if(item.src || item.getAttribute("ks-original")){
|
||||
actions.ori(item, id);
|
||||
}
|
||||
});
|
||||
|
||||
// 设置按钮
|
||||
image_box.prev.onclick = function (e) {
|
||||
e.stopPropagation();
|
||||
if(current - 1 >= 0) current--;
|
||||
|
||||
actions.set();
|
||||
};
|
||||
image_box.next.onclick = function (e) {
|
||||
e.stopPropagation();
|
||||
if(current + 1 < get_images.length) current++;
|
||||
|
||||
actions.set();
|
||||
};
|
||||
};
|
||||
|
||||
// 懒加载
|
||||
KStyle.lazy = function (elements, bg) {
|
||||
//elements = Array.from(KStyle.selectAll(elements));
|
||||
elements = KStyle.selectAll(elements);
|
||||
|
||||
var list = [];
|
||||
|
||||
var action = {
|
||||
setFront: function (item) {
|
||||
if(item.intersectionRatio > 0) {
|
||||
item.target.src = item.target.link;
|
||||
item.target.setAttribute("ks-lazy", "finished");
|
||||
obs.unobserve(item.target);
|
||||
}
|
||||
},
|
||||
setBack: function (item) {
|
||||
if(item.boundingClientRect.top <= window.innerHeight + 100) {
|
||||
var img = new Image();
|
||||
img.src = item.target.link;
|
||||
|
||||
img.onload = function () {
|
||||
item.target.setAttribute("ks-lazy", "finished");
|
||||
item.target.style.backgroundImage = "url(" + item.target.link + ")";
|
||||
};
|
||||
|
||||
obs.unobserve(item.target);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 是否支持 OBS
|
||||
if(global.IntersectionObserver){
|
||||
var obs = new IntersectionObserver(function (changes) {
|
||||
if (bg) {
|
||||
changes.forEach(function (t) {
|
||||
action.setBack(t);
|
||||
});
|
||||
}
|
||||
else {
|
||||
changes.forEach(function (t) {
|
||||
action.setFront(t);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
KStyle.each(elements, function (item) {
|
||||
item.link = item.getAttribute("ks-thumb") || item.getAttribute("ks-original");
|
||||
|
||||
if(!item.getAttribute("ks-lazy")) obs.observe(item);
|
||||
})
|
||||
}
|
||||
else{
|
||||
function back() {
|
||||
KStyle.each(list, function (item) {
|
||||
var check = item.el.getBoundingClientRect().top <= window.innerHeight;
|
||||
|
||||
if(check && !item.showed){
|
||||
action.setBack(item.el);
|
||||
list.remove(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function front() {
|
||||
KStyle.each(list, function (item) {
|
||||
var check = item.el.getBoundingClientRect().top <= window.innerHeight;
|
||||
|
||||
if(check && !item.showed){
|
||||
action.setFront(item.el);
|
||||
list.remove(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
KStyle.each(elements, function (item) {
|
||||
item.link = item.getAttribute("ks-thumb") || item.getAttribute("ks-original");
|
||||
|
||||
if(!item.getAttribute("ks-lazy")) list.push({el: item, link: item.link});
|
||||
});
|
||||
|
||||
bg ? back() : front();
|
||||
bg ? document.addEventListener("scroll", back) : document.addEventListener("scroll", front);
|
||||
}
|
||||
};
|
||||
|
||||
// AJAX
|
||||
KStyle.ajax = function (prop) {
|
||||
if(!prop.url) prop.url = document.location.href;
|
||||
if(!prop.method) prop.method = "GET";
|
||||
|
||||
if(prop.method === "POST"){
|
||||
var data = new FormData();
|
||||
|
||||
for(var d in prop.data){
|
||||
data.append(d, prop.data[d]);
|
||||
}
|
||||
}
|
||||
else if(prop.method === "GET"){
|
||||
var url = prop.url + "?";
|
||||
|
||||
for(var d in prop.data){
|
||||
url += d + "=" + prop.data[d] + "&";
|
||||
}
|
||||
|
||||
prop.url = url.substr(0, url.length - 1);
|
||||
}
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.open(prop.method, prop.url);
|
||||
if(prop.crossDomain){ request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); }
|
||||
|
||||
if(prop.header){
|
||||
for(var i in prop.header){
|
||||
request.setRequestHeader(prop.header[i][0], prop.header[i][1]);
|
||||
}
|
||||
}
|
||||
|
||||
request.send(data);
|
||||
|
||||
request.onreadystatechange = function () {
|
||||
if(request.readyState === 4){
|
||||
if(request.status === 200 || request.status === 304){
|
||||
if(prop.type){
|
||||
switch(prop.type){
|
||||
case "text": prop.success(request.responseText); break;
|
||||
case "json": prop.success(JSON.parse(request.response)); break;
|
||||
}
|
||||
}
|
||||
else{
|
||||
prop.success ? prop.success(request) : console.log(prop.method + " 请求发送成功");
|
||||
}
|
||||
}
|
||||
else{
|
||||
prop.failed ? prop.failed(request) : console.log(prop.method + " 请求发送失败");
|
||||
}
|
||||
|
||||
request = null;
|
||||
}
|
||||
};
|
||||
|
||||
return request;
|
||||
};
|
||||
|
||||
// 平滑滚动
|
||||
KStyle.scrollTo = function (el, offset) {
|
||||
el = KStyle.selectAll(el);
|
||||
|
||||
el.forEach(function (t) {
|
||||
t.onclick = function (e) {
|
||||
var l = e.target.pathname;
|
||||
var c = window.location.pathname;
|
||||
|
||||
var t = e.target.href.match(/#[\s\S]+/);
|
||||
if(t) t = ks.select(t[0]);
|
||||
|
||||
if(c === l){
|
||||
e.preventDefault();
|
||||
|
||||
var top = t ? (offset ? t.offsetTop - offset : t.offsetTop) : 0;
|
||||
|
||||
"scrollBehavior" in document.documentElement.style ? global.scrollTo({top: top, left: 0, behavior: "smooth"}) : global.scrollTo(0, top);
|
||||
}
|
||||
else{
|
||||
console.log(c, l);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
global.ks = KStyle;
|
||||
|
||||
console.log("%c Kico Style %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
|
||||
})(window);
|
||||
Executable
+19
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
|
||||
<ellipse fill="#F7C170" cx="20" cy="35.5" rx="20" ry="4.5"/>
|
||||
<g opacity="0.2">
|
||||
<path d="M8.066,8.429c0,0,3.92,5.305,3.872,11.618S8,35.799,8,35.799h8.679l-1.297-7.725l10.948,6.994l4.803-6.217
|
||||
c0,0-13.502-1.666-13.485-8.636c0.017-6.969,15.922-6.906,15.922-6.906l-5.725-7.771l-11.165,6.994l-2.952-7.878L8.066,8.429z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M6.066,8.429c0,0,3.92,5.305,3.872,11.618S6,35.799,6,35.799h8.679l-1.297-7.725l10.948,6.994
|
||||
l4.803-6.217c0,0-13.502-1.666-13.485-8.636c0.017-6.969,15.922-6.906,15.922-6.906l-5.725-7.771l-11.165,6.994l-2.952-7.878
|
||||
L6.066,8.429z"/>
|
||||
</g>
|
||||
<g opacity="0.2">
|
||||
<circle cx="19.635" cy="4.117" r="4.117"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="#FFFFFF" cx="17.635" cy="4.117" r="4.117"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 938 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 424 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
Reference in New Issue
Block a user