MyukiGCard:简洁美观的个人主页导航卡片、网页遮罩

 3635去下载

MyukiGCard是一款链接导航卡片,个人介绍卡片、网页遮罩、或是作为网站的消息弹框等等,原生javript开发。简单地支持语言设置、多种夜间模式、链接按钮种类设置等等。


MyukiGCard:简洁美观的个人主页导航卡片、网页遮罩


MyukiGCard

一个简洁美观的个人导航主页、链接卡片

可以是一张名片,个人网址的导航主页、介绍页、或是作为网站的引导页、消息弹框等等。

  1. <link rel="stylesheet" href="./css/MyukiGCard.css">
  2. <script src="./js/MyukiGCard.js"></script>
  1. <script>
  2. //简单用法
  3. //window.MyNavCard = $MGC();
  4. //高级用法
  5. window.MyNavCard = $MGC({
  6.   icon: "https://stackblog.cf/img/avatar.jpg",
  7.   /*
  8.   icon: 可以是头像、网站logo等
  9.   */
  10.   name: "Stack Dev",
  11.   /*
  12.   name: 可是是名字、网站名称等
  13.   */
  14.   info: "欢迎使用MyukiGCard",
  15.   /*
  16.   info: 个性签名、网站口号、信息等,为空或者不设置将不显示
  17.   默认值: 空
  18.   */
  19.   z_index: 9999,
  20.   /*
  21.   不用解释,默认值为9999
  22.   */
  23.   blur: "#write",
  24.   /*
  25.   blur: 想要模糊化处理的页面元素,取值可以是.className(类名)、#idName(id属性值)、tagName(标签名)
  26.   */
  27.   lang: "en-US",
  28.   /*
  29.   lang: 语言设置,目前和关闭按钮的文本有关
  30.   默认值: zh-CN
  31.   可选值: zh-CN,zh-TW,en-US
  32.   如果不提供或者提供的不在可选值内,将使用默认值或者使用html页面的lang属性
  33.   */
  34.   mini: true,
  35.   /*
  36.   mini: 迷你按钮,用于重新打开MyukiGCard(在页面底部中间位置)
  37.   默认值: true
  38.   */
  39.   darkmode: 2,
  40.   /*
  41.   darkmode: 夜间模式
  42.   默认值: 1
  43.   可选值: 0、1、2、3
  44.   0: 禁用夜间模式
  45.   1: 跟随系统(如果系统支持夜间模式)
  46.   2: 根据时间,下午6时~上午6时打开夜间模式
  47.   3: 常开夜间模式
  48.   */
  49.   maxWidth: "480px",
  50.   /*
  51.   maxWidth: MyukiGCard的最大宽度
  52.   默认值: 480px
  53.   */
  54.   fontFamily: "",
  55.   /*
  56.   fontFamily: 字体,为空或不设置将使用默认字体
  57.   */
  58.   hitokoto: {
  59.     "enable": true,
  60.     /*
  61.     enable: 是否启用一言API
  62.     默认值: false
  63.     */
  64.     "cats": ["d", "i", "k"],
  65.     /*
  66.     cats: 句子类型,详见:https://developer.hitokoto.cn/sentence/#句子类型-参数
  67.     默认值: []
  68.     a: 动画, b: 漫画, c: 游戏, d: 文学, e: 原创, f: 网络, 
  69.     g: 其他, h: 影视, i: 诗词, j: 网易, k: 哲学, i: 抖机灵
  70.     */
  71.     "offline": "兰博基尼和法拉利能一样吗?分手!",
  72.     /*
  73.     offline: 一言API请求错误时用于替换的离线语句
  74.     */
  75.     "color": "#70a1ff",
  76.     /*
  77.     color: 一言语句颜色
  78.     默认值: #70a1ff
  79.     */
  80.   },
  81.   /*
  82.   hitokoto: 一言API
  83.   注: 不兼容IE
  84.   */
  85.   links: [{
  86.     "title": "My Blog",
  87.     "url": "https://stackblog.cf/",
  88.     "type": "primary",
  89.     "target": "_blank"
  90.   }, {
  91.     "title": "My GitHub",
  92.     "url": "https://github.com/Uyukisan",
  93.   }, {
  94.     "title": "MyukiGCard Usage",
  95.     "url": "https://github.com/Uyukisan/MyukiGCard",
  96.   }],
  97.   /*
  98.   导航链接列表
  99.   title: 链接的标题
  100.   url: 链接地址
  101.    
  102.   type: 链接按钮的类型,包括:
  103.   default | primary | secondary | success | danger | waring | info | light | dark | link
  104.   如果不提供type,默认为dafault
  105.    
  106.   target: 在何处打开链接,包括:
  107.   _blank(新窗口)| _self(默认) | _parent(父框架) | _top(整个窗口) | framename(指定的框架)
  108.   如果不提供target,将使用默认
  109.   */
  110. });
  111. /*
  112.  方法:close()
  113. */
  114. MyNavCard.close();
  115. // 使用回调函数
  116. MyNavCard.close(closeCallBack);
  117. function closeCallBack() {
  118.   console.log("关闭回调函数...");
  119. }
  120. /*
  121.  方法:open()
  122. */
  123. MyNavCard.open();
  124. // 使用回调函数
  125. MyNavCard.open(openCallBack);
  126. function openCallBack() {
  127.   console.log("打开回调函数...");
  128. }
  129. </script>


本文网址:https://www.zztuku.com/index.php/detail-13515.html
转载请声明来自:站长图库 - MyukiGCard:简洁美观的个人主页导航卡片、网页遮罩


使用声明:

1、本站所有素材,仅限学习交流,请勿用于商业用途。

2、本站资源大多无解压密码,如遇需要解压密码,无特殊说明,均为:zztuku.com

3、下载积分可通过日常 签到绑定邮箱 等途径免费获得!

4、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!由于资源大多存储在云盘,如出现链接失效请评论反馈。

5、如果素材损害你的权益,请 联系我们 给予处理。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢