MyukiGCard是一款鏈接導(dǎo)航卡片,個人介紹卡片、網(wǎng)頁遮罩、或是作為網(wǎng)站的消息彈框等等,原生javript開發(fā)。簡單地支持語言設(shè)置、多種夜間模式、鏈接按鈕種類設(shè)置等等。
MyukiGCard
一個簡潔美觀的個人導(dǎo)航主頁、鏈接卡片
可以是一張名片,個人網(wǎng)址的導(dǎo)航主頁、介紹頁、或是作為網(wǎng)站的引導(dǎo)頁、消息彈框等等。
<link rel="stylesheet" href="./css/MyukiGCard.css"> <script src="./js/MyukiGCard.js"></script>
<script> //簡單用法 //window.MyNavCard = $MGC(); //高級用法 window.MyNavCard = $MGC({ icon: "https://stackblog.cf/img/avatar.jpg", /* icon: 可以是頭像、網(wǎng)站logo等 */ name: "Stack Dev", /* name: 可是是名字、網(wǎng)站名稱等 */ info: "歡迎使用MyukiGCard", /* info: 個性簽名、網(wǎng)站口號、信息等,為空或者不設(shè)置將不顯示 默認(rèn)值: 空 */ z_index: 9999, /* 不用解釋,默認(rèn)值為9999 */ blur: "#write", /* blur: 想要模糊化處理的頁面元素,取值可以是.className(類名)、#idName(id屬性值)、tagName(標(biāo)簽名) */ lang: "en-US", /* lang: 語言設(shè)置,目前和關(guān)閉按鈕的文本有關(guān) 默認(rèn)值: zh-CN 可選值: zh-CN,zh-TW,en-US 如果不提供或者提供的不在可選值內(nèi),將使用默認(rèn)值或者使用html頁面的lang屬性 */ mini: true, /* mini: 迷你按鈕,用于重新打開MyukiGCard(在頁面底部中間位置) 默認(rèn)值: true */ darkmode: 2, /* darkmode: 夜間模式 默認(rèn)值: 1 可選值: 0、1、2、3 0: 禁用夜間模式 1: 跟隨系統(tǒng)(如果系統(tǒng)支持夜間模式) 2: 根據(jù)時間,下午6時~上午6時打開夜間模式 3: 常開夜間模式 */ maxWidth: "480px", /* maxWidth: MyukiGCard的最大寬度 默認(rèn)值: 480px */ fontFamily: "", /* fontFamily: 字體,為空或不設(shè)置將使用默認(rèn)字體 */ hitokoto: { "enable": true, /* enable: 是否啟用一言API 默認(rèn)值: false */ "cats": ["d", "i", "k"], /* cats: 句子類型,詳見:https://developer.hitokoto.cn/sentence/#句子類型-參數(shù) 默認(rèn)值: [] a: 動畫, b: 漫畫, c: 游戲, d: 文學(xué), e: 原創(chuàng), f: 網(wǎng)絡(luò), g: 其他, h: 影視, i: 詩詞, j: 網(wǎng)易, k: 哲學(xué), i: 抖機(jī)靈 */ "offline": "蘭博基尼和法拉利能一樣嗎?分手!", /* offline: 一言API請求錯誤時用于替換的離線語句 */ "color": "#70a1ff", /* color: 一言語句顏色 默認(rèn)值: #70a1ff */ }, /* hitokoto: 一言API 注: 不兼容IE */ links: [{ "title": "My Blog", "url": "https://stackblog.cf/", "type": "primary", "target": "_blank" }, { "title": "My GitHub", "url": "https://github.com/Uyukisan", }, { "title": "MyukiGCard Usage", "url": "https://github.com/Uyukisan/MyukiGCard", }], /* 導(dǎo)航鏈接列表 title: 鏈接的標(biāo)題 url: 鏈接地址 type: 鏈接按鈕的類型,包括: default | primary | secondary | success | danger | waring | info | light | dark | link 如果不提供type,默認(rèn)為dafault target: 在何處打開鏈接,包括: _blank(新窗口)| _self(默認(rèn)) | _parent(父框架) | _top(整個窗口) | framename(指定的框架) 如果不提供target,將使用默認(rèn) */ }); /* 方法:close() */ MyNavCard.close(); // 使用回調(diào)函數(shù) MyNavCard.close(closeCallBack); function closeCallBack() { console.log("關(guān)閉回調(diào)函數(shù)..."); } /* 方法:open() */ MyNavCard.open(); // 使用回調(diào)函數(shù) MyNavCard.open(openCallBack); function openCallBack() { console.log("打開回調(diào)函數(shù)..."); } </script>