L
O
A
D
I
N
G

Hexo博客(一) ——基础搭建

hexo
hexo
发布日期:   2024-01-25
更新日期:   2024-05-21
文章字数:   4.3k
阅读时长:   24 分
阅读次数:  

环境准备

下载git

安装git for windows（或者其它git客户端）git下载

验证git安装命令(cmd窗口或鼠标右键菜单的git bash 窗口)

git --version

下载node.js

在官网下载node.js的安装程序，根据你电脑系统的配置信息，下载对应的安装程序。

验证node安装命令 (cmd窗口或鼠标右键菜单的git bash 窗口)

node --version

vscode安装

Visual Studio Code 官网下载

github账号

如果没有就注册一个：https://github.com/

Github Pages创建

音乐页面

书籍页面

vlog页面

导航页面

影视页面

生成电影卡#

安装插件

npm install hexo-tag-mtime --save

用法：

{% mtime 218707 %}
id可以在时光网 https://www.mtime.com 相应的电影网址获取

在站点目录下的source文件夹下，新建movies文件夹，然后在movies下新建index.md，粘贴以下代码

---
title: movies
date: 2023-10-05 19:31:28
type: movies
---
# 电影推荐
##  教父
{% mtime 10968 %}
##  白日梦想家
{% mtime 21250 %}
## 海上钢琴师
{% mtime 10746 %}
## 闻香识女人
{% mtime 13695 %}

id可以在时光网 https://www.mtime.com 相应的电影网址获取

找到matery主题的配置文件_config.yml，在menu中添加

movies:
	url: /movies
	icon: fas fa-film

然后使用hexo s进行预览查看效果

其他

hexo博客搭建及主题优化(二)_5ezuy.top-CSDN博客

  • 电影卡片
  • 归档时间轴和时间列表
  • 快捷导航
  • 站点统计不显示

buttrefly鼠标：

* {
    cursor: url(data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='1.0' fill='rgb(57, 197, 187)'/></svg>) 4 4, auto;
}

data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='1.0' fill='rgb(57, 197, 187)'/></svg>

https://seayj.cn/

  • footer-wave.css

  • matery.css

  • matery.js

  • cursor.css

    /* build time:Sat Feb 03 2024 21:39:20 GMT+0800 (ä¸­å›½æ ‡å‡†æ—¶é—´)*/
body,div,html,span {
    cursor: url(/cursor/normal.png),auto!important
}

#vcomments svg,a,button {
    cursor: url(/cursor/a.png),auto!important
}

::-moz-selection {
    cursor: url(/cursor/love.png),auto!important
}

::selection,img,pre,select {
    cursor: url(/cursor/love.png),auto!important
}

input,textarea {
    cursor: url(/cursor/input.png),auto!important
}

.celeste canvas {
    cursor: url(/cursor/move.png),auto!important
}

/* rebuild by neat */

  • rightMenu.js

    // 初始化函数
let rm = {};
var btf = {
  scrollToDest: (pos, time) => {
    if (pos < 0 || time < 0) {
      return
    }

    const currentPos = window.scrollY || window.screenTop
    pos = pos - 70

    if ('CSS' in window && CSS.supports('scroll-behavior', 'smooth')) {
      window.scrollTo({
        top: pos,
        behavior: 'smooth'
      })
      return
    }

    let start = null
    time = time || 500
    window.requestAnimationFrame(function step(currentTime) {
      start = !start ? currentTime : start
      if (currentPos < pos) {
        const progress = currentTime - start
        window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
        if (progress < time) {
          window.requestAnimationFrame(step)
        } else {
          window.scrollTo(0, pos)
        }
      } else {
        const progress = currentTime - start
        window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
        if (progress < time) {
          window.requestAnimationFrame(step)
        } else {
          window.scrollTo(0, pos)
        }
      }
    })
  }
}
var heo = {

  // 下载图片
  downloadImage: function (imgsrc, name) { //下载图片地址和图片名
    rm.hideRightMenu();
    if (rm.downloadimging == false) {
      rm.downloadimging = true;
      M.toast({
        html: '<span>正在下载中，请稍后</span>'
      }, 10000);
      setTimeout(function () {
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
          let a = document.createElement("a"); // 生成一个a元素
          let event = new MouseEvent("click"); // 创建一个单击事件
          a.download = name || "photo"; // 设置图片名称
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
        M.toast({
          html: '<span>图片已添加盲水印，请遵守版权协议</span>'
        }, 5000);
        rm.downloadimging = false;
      }, "10000");
    } else {
      M.toast({
        html: '<span>有正在进行中的下载，请稍后再试</span>'
      }, 5000);
    }
  },

  //切换音乐播放状态
  musicToggle: function () {
    console.log("等待开发...");
    // let msgPlay = '<i class="fa-solid fa-play"></i><span>播放音乐</span>' // 此處可以更改為你想要顯示的文字
    // let msgPause = '<i class="fa-solid fa-pause"></i><span>暂停音乐</span>' // 同上，但兩處均不建議更改
    // if (heo_musicPlaying) {
    //   document.querySelector("#nav-music").classList.remove("playing");
    //   document.getElementById("menu-music-toggle").innerHTML = msgPlay;
    //   document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停";
    //   document.querySelector("#consoleMusic").classList.remove("on");
    //   heo_musicPlaying = false;
    // } else {
    //   document.querySelector("#nav-music").classList.add("playing");
    //   document.getElementById("menu-music-toggle").innerHTML = msgPause;
    //   document.querySelector("#consoleMusic").classList.add("on");
    //   heo_musicPlaying = true;
    // }
    // document.querySelector('meting-js').aplayer.toggle();
    // rm.hideRightMenu();
  },

  //音乐上一曲
  musicSkipBack: function () {
    console.log("等待开发...");
    // document.querySelector('meting-js').aplayer.skipBack();
    // rm.hideRightMenu();
  },

  //音乐下一曲
  musicSkipForward: function () {
    console.log("等待开发...");
    // document.querySelector('meting-js').aplayer.skipForward();
    // rm.hideRightMenu();
  },

  //获取音乐中的名称
  musicGetName: function () {
    console.log("等待开发...");
    // var x = $('.aplayer-title')
    // // var x = document.getElementsByClassName('txt');
    // // for (var i = x.length - 1; i >= 0; i--) {
    // // console.log(x[i].innerText)
    // // }
    // var arr = []
    // for (var i = x.length - 1; i >= 0; i--) {
    //   arr[i] = x[i].innerText
    //   // console.log(x[i].innerText)
    // }
    // return arr[0]
  }
}

//禁止图片拖拽
rm.stopdragimg = $("img");
rm.stopdragimg.on("dragstart", function () {
  return false;
});

// 显示菜单
rm.showRightMenu = function (isTrue, x = 0, y = 0) {
  let $rightMenu = $('#rightMenu');
  $rightMenu.css('top', x + 'px').css('left', y + 'px');
  if (isTrue) {
    $rightMenu.show();
    stopMaskScroll()
  } else {
    $rightMenu.hide();
  }
}

// 隐藏菜单
rm.hideRightMenu = function () {
  rm.showRightMenu(false);
  $('#rightmenu-mask').attr('style', 'display: none');
}

// 尺寸
let rmWidth = $('#rightMenu').width();
let rmHeight = $('#rightMenu').height();

// 重新定义尺寸
rm.reloadrmSize = function () {
  rmWidth = $('#rightMenu').width();
  rmHeight = $('#rightMenu').height();
}

// 获取点击的href
let domhref = '';
let domImgSrc = '';
let globalEvent = null;

// 监听右键初始化
window.oncontextmenu = function (event) {
  if (document.body.clientWidth > 768) {
    let pageX = event.clientX + 10; //加10是为了防止显示时鼠标遮在菜单上
    let pageY = event.clientY;
    // console.log(event);

    //其他额外菜单
    let $rightMenuOther = $('.rightMenuOther');
    let $rightMenuPlugin = $('.rightMenuPlugin');
    let $rightMenuCopyText = $('#menu-copytext');
    let $rightMenuPasteText = $('#menu-pastetext');
    let $rightMenuCommentText = $('#menu-commenttext');
    let $rightMenuNewWindow = $('#menu-newwindow');
    let $rightMenuCopyLink = $('#menu-copylink');
    let $rightMenuCopyImg = $('#menu-copyimg');
    let $rightMenuDownloadImg = $('#menu-downloadimg');
    let $rightMenuSearch = $('#menu-search');
    let $rightMenuSearchBing = $('#menu-searchBing');
    let $rightMenuMusicToggle = $('#menu-music-toggle');
    let $rightMenuMusicBack = $('#menu-music-back');
    let $rightMenuMusicForward = $('#menu-music-forward');
    let $rightMenuMusicPlaylist = $('#menu-music-playlist');
    let $rightMenuMusicCopyMusicName = $('#menu-music-copyMusicName');
    let href = event.target.href;
    let imgsrc = event.target.currentSrc;

    // 判断模式 扩展模式为有事件
    let pluginMode = false;
    $rightMenuOther.show();
    globalEvent = event;

    // 检查是否需要复制 是否有选中文本
    if (selectTextNow && window.getSelection()) {
      pluginMode = true;
      $rightMenuCopyText.show();
      $rightMenuCommentText.show();
      $rightMenuSearch.show();
      $rightMenuSearchBing.show();
    } else {
      $rightMenuCopyText.hide();
      $rightMenuCommentText.hide();
      $rightMenuSearchBing.hide();
      $rightMenuSearch.hide();
    }

    //检查是否右键点击了链接a标签
    if (href) {
      pluginMode = true;
      $rightMenuNewWindow.show();
      $rightMenuCopyLink.show();
      domhref = href;
    } else {
      $rightMenuNewWindow.hide();
      $rightMenuCopyLink.hide();
    }

    //检查是否需要复制图片
    if (imgsrc) {
      pluginMode = true;
      $rightMenuCopyImg.show();
      $rightMenuDownloadImg.show();
      domImgSrc = imgsrc;
    } else {
      $rightMenuCopyImg.hide();
      $rightMenuDownloadImg.hide();
    }

    // 判断是否为输入框
    if (event.target.tagName.toLowerCase() === 'input' || event.target.tagName.toLowerCase() === 'textarea') {
      console.log('这是一个输入框')
      pluginMode = true;
      $rightMenuPasteText.show();
    } else {
      $rightMenuPasteText.hide();
    }

    //判断是否是音乐
    if (event.target.nodeName == "METING-JS") {
      console.log('这是一个音乐');
      pluginMode = true;
      $rightMenuMusicToggle.show();
      $rightMenuMusicBack.show();
      $rightMenuMusicForward.show();
      $rightMenuMusicPlaylist.show();
      $rightMenuMusicCopyMusicName.show();
    } else {
      $rightMenuMusicToggle.hide();
      $rightMenuMusicBack.hide();
      $rightMenuMusicForward.hide();
      $rightMenuMusicPlaylist.hide();
      $rightMenuMusicCopyMusicName.hide()
    }

    // 如果不是扩展模式则隐藏扩展模块
    if (pluginMode) {
      $rightMenuOther.hide();
      $rightMenuPlugin.show();
    } else {
      $rightMenuPlugin.hide()
    }

    rm.reloadrmSize()

    // 鼠标默认显示在鼠标右下方，当鼠标靠右或考下时，将菜单显示在鼠标左方\上方
    if (pageX + rmWidth > window.innerWidth) {
      pageX -= rmWidth + 10;
    }
    if (pageY + rmHeight > window.innerHeight) {
      pageY -= pageY + rmHeight - window.innerHeight;
    }

    rm.showRightMenu(true, pageY, pageX);
    $('#rightmenu-mask').attr('style', 'display: flex');
    return false;
  }
};

// 下载图片状态
rm.downloadimging = false;

// 复制图片到剪贴板
rm.writeClipImg = function (imgsrc) {
  // console.log('按下复制');
  rm.hideRightMenu();
  M.toast({
    html: '<span>正在下载中，请稍后</span>'
  }, 10000);
  if (rm.downloadimging == false) {
    rm.downloadimging = true;
    setTimeout(function () {
      copyImage(imgsrc);
      M.toast({
        html: '<span>复制成功！图片已添加盲水印，请遵守版权协议</span>'
      }, 5000);
      rm.downloadimging = false;
    }, "10000")
  }
}

function imageToBlob(imageURL) {
  const img = new Image;
  const c = document.createElement("canvas");
  const ctx = c.getContext("2d");
  img.crossOrigin = "";
  img.src = imageURL;
  return new Promise(resolve => {
    img.onload = function () {
      c.width = this.naturalWidth;
      c.height = this.naturalHeight;
      ctx.drawImage(this, 0, 0);
      c.toBlob((blob) => {
        // here the image is a blob
        resolve(blob)
      }, "image/png", 0.75);
    };
  })
}

async function copyImage(imageURL) {
  const blob = await imageToBlob(imageURL)
  const item = new ClipboardItem({
    "image/png": blob
  });
  navigator.clipboard.write([item]);
}

rm.switchDarkMode = function () {
  switchNightMode();
  rm.hideRightMenu();
}

rm.copyUrl = function (id) {
  $("body").after("<input id='copyVal'></input>");
  var text = id;
  var input = document.getElementById("copyVal");
  input.value = text;
  input.select();
  input.setSelectionRange(0, input.value.length);
  document.execCommand("copy");
  $("#copyVal").remove();
}

function stopMaskScroll() {
  if (document.getElementById("rightmenu-mask")) {
    let xscroll = document.getElementById("rightmenu-mask");
    xscroll.addEventListener("mousewheel", function (e) {
      //阻止浏览器默认方法
      rm.hideRightMenu();
      // e.preventDefault();
    }, false);
  }
  if (document.getElementById("rightMenu")) {
    let xscroll = document.getElementById("rightMenu");
    xscroll.addEventListener("mousewheel", function (e) {
      //阻止浏览器默认方法
      rm.hideRightMenu();
      // e.preventDefault();
    }, false);
  }
}

rm.rightmenuCopyText = function (txt) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(txt);
  }
  rm.hideRightMenu();
}

rm.copyPageUrl = function () {
  var selURL = window.location.href;
  rm.copyUrl(selURL);
  M.toast({
    html: '<span>复制本页链接地址成功</span>'
  }, 2000);
  rm.hideRightMenu();
}

rm.sharePage = function () {
  var content = window.location.href;
  rm.copyUrl(selURL);
  M.toast({
    html: '<span>复制本页链接地址成功</span>'
  }, 2000);
  rm.hideRightMenu();
}

// 复制当前选中文本
var selectTextNow = '';
document.onmouseup = document.ondbclick = selceText;

function selceText() {
  var txt;
  if (document.selection) {
    txt = document.selection.createRange().text;
  } else {
    txt = window.getSelection() + '';
  }
  if (txt) {
    selectTextNow = txt;
    // console.log(selectTextNow);
  } else {
    selectTextNow = '';
  }
}

// 读取剪切板
rm.readClipboard = function () {
  if (navigator.clipboard) {
    navigator.clipboard.readText().then(clipText => rm.insertAtCaret(globalEvent.target, clipText));
  }
}

// 粘贴文本到焦点
rm.insertAtCaret = function (elemt, value) {
  const startPos = elemt.selectionStart,
    endPos = elemt.selectionEnd;
  if (document.selection) {
    elemt.focus();
    var sel = document.selection.createRange();
    sel.text = value;
    elemt.focus();
  } else {
    if (startPos || startPos == '0') {
      var scrollTop = elemt.scrollTop;
      elemt.value = elemt.value.substring(0, startPos) + value + elemt.value.substring(endPos, elemt.value.length);
      elemt.focus();
      elemt.selectionStart = startPos + value.length;
      elemt.selectionEnd = startPos + value.length;
      elemt.scrollTop = scrollTop;
    } else {
      elemt.value += value;
      elemt.focus();
    }
  }
}

//粘贴文本
rm.pasteText = function () {
  const result = rm.readClipboard() || '';
  rm.hideRightMenu();
}

//引用到评论
rm.rightMenuCommentText = function (txt) {
  rm.hideRightMenu();
  var input = document.getElementById('veditor');
  let evt = document.createEvent('HTMLEvents');
  evt.initEvent('input', true, true);
  let inputValue = replaceAll(txt, '\n', '\n> ')
  input.value = '> ' + inputValue + '\n\n';
  input.dispatchEvent(evt);
  var domTop = document.querySelector("#vcomments").offsetTop;
  window.scrollTo(0, domTop - 80);
  input.focus();
  input.setSelectionRange(-1, -1);
}

//替换所有内容
function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}

// Bing搜索
rm.searchBing = function () {
  M.toast({
    html: '<span>即将跳转到必应搜索</span>'
  }, 2000);
  setTimeout(function () {
    window.open('https://cn.bing.com/search?q=' + selectTextNow);
  }, "1000");
  rm.hideRightMenu();
}

//分享链接
rm.copyLink = function () {
  rm.rightmenuCopyText(domhref);
  M.toast({
    html: '<span>已复制链接地址</span>'
  }, 5000);
}

function addRightMenuClickEvent() {
  // 添加点击事件
  $('#menu-backward').on('click', function () {
    window.history.back();
    rm.hideRightMenu();
  });
  $('#menu-forward').on('click', function () {
    window.history.forward();
    rm.hideRightMenu();
  });
  $('#menu-refresh').on('click', function () {
    window.location.reload();
  });
  $('#menu-top').on('click', function () {
    btf.scrollToDest(0, 500);
    rm.hideRightMenu();
  });
  $('.menu-link').on('click', rm.hideRightMenu);
  $('#menu-darkmode').on('click', rm.switchDarkMode);
  $('#menu-home').on('click', function () {
    window.location.href = window.location.origin;
  });
  $('#menu-randomPost').on('click', function () {
    toRandomPost()
  });
  $('#rightmenu-mask').on('click', rm.hideRightMenu);
  $('#rightmenu-mask').contextmenu(function () {
    rm.hideRightMenu();
    return false;
  });
  $('#menu-copy').on('click', rm.copyPageUrl);
  $('#menu-pastetext').on('click', rm.pasteText);
  $('#menu-copytext').on('click', function () {
    rm.rightmenuCopyText(selectTextNow);
    M.toast({
      html: '<span>复制成功，复制或转载请标注文本位置</span>'
    }, 5000);
  });
  $('#menu-commenttext').on('click', function () {
    rm.rightMenuCommentText(selectTextNow);
  });
  $('#menu-newwindow').on('click', function () {
    window.open(domhref);
    rm.hideRightMenu();
  });
  $('#menu-copylink').on('click', rm.copyLink);
  $('#menu-downloadimg').on('click', function () {
    heo.downloadImage(domImgSrc, 'SeaYJImageDownload');
  });
  $('#menu-copyimg').on('click', function () {
    rm.writeClipImg(domImgSrc);
  });
  $('#menu-search').on('click', function () {
    rm.hideRightMenu();
    $('#searchIcon').click();
    let t = document.getElementById('searchInput');
    let evt = document.createEvent('HTMLEvents');
    evt.initEvent('input', true, true);
    t.value = selectTextNow;
    t.dispatchEvent(evt);
  });
  $('#menu-searchBing').on('click', rm.searchBing);
  //音乐
  $('#menu-music-toggle').on('click', heo.musicToggle);
  $('#menu-music-back').on('click', heo.musicSkipBack);
  $('#menu-music-forward').on('click', heo.musicSkipForward);
  $('#menu-music-copyMusicName').on('click', function () {
    rm.rightmenuCopyText(heo.musicGetName());
    M.toast({
      html: '<span>复制歌曲名称成功</span>'
    }, 3000);
  });
}

  • lantern.js

    class Lantern {
    #startDate = '1-1';
    #endDate = '1-31';
    #dateCheck(date) {
        let $m = date.split('-')[0];
        let $d = date.split('-')[1];
        if ($m < 1 || $m > 12) {
            console.error(
                'ERROR: %s is a problem!The month can only be selected from 1~12!',
                $m
            );
            return false;
        }
        if ($d < 1 || $d > 31) {
            console.error(
                "ERROR: %s is a problem!Dates can only be selected from 1~31!You don't need to think about leap years, you just need to treat it as if every month is 31 days, and we'll do the rest!",
                $d
            );
            return false;
        }
        return true;
    }
    #dateCorrect(obj) {
        if (!('date' in obj)) {
            obj.date = {
                from: this.#startDate,
                to: this.#endDate,
            };
        } else {
            if (!('from' in obj.date) || !this.#dateCheck(obj.date.from)) {
                obj.date.from = this.#startDate;
            }
            if (!('to' in obj.date) || !this.#dateCheck(obj.date.to)) {
                obj.date.to = this.#endDate;
            }
        }
    }

    #CompareTime(sDate, eDate) {
        let $sM = sDate.split('-')[0];
        let $sD = sDate.split('-')[1];
        let $eM = eDate.split('-')[0];
        let $eD = eDate.split('-')[1];
        let $t = new Date();
        let $tM = $t.getMonth() + 1;
        let $tD = $t.getDate();
        if ($sM > $eM) {
            if ($tM > $sM || $tM < $eM) {
                return true;
            } else if ($tM == $sM) {
                return $tD >= $sD ? true : false;
            } else if ($tM == $eM) {
                return $tD <= $eD ? true : false;
            } else {
                return false;
            }
        } else {
            if ($tM > $sM && $tM < $eM) {
                return true;
            } else if ($tM == $sM && $tM != $eM) {
                return $tD >= $sD ? true : false;
            } else if ($tM == $eM && $tM != $sM) {
                return $tD <= $eM ? true : false;
            } else if ($tM == $sM && $tM == $eM) {
                return $tD >= $sD && $tD <= $eD ? true : false;
            } else {
                return false;
            }
        }
    }

    #HTMLContent = {
        HTML() {
            return (
                '<div class="lantern-container"><div class="lantern-box0"><div class="lantern"><div class="lantern-handle"></div><div class="lantern-a"><div class="lantern-b"><div class="lantern-t">' +
                this.Text[0] +
                '</div></div></div><div class="lantern-spike lantern-spike-a"><div class="lantern-spike-c"></div><div class="lantern-spike-b"></div></div></div></div><div class="lantern-box1"><div class="lantern"><div class="lantern-handle"></div><div class="lantern-a"><div class="lantern-b"><div class="lantern-t">' +
                this.Text[1] +
                '</div></div></div><div class="lantern-spike lantern-spike-a"><div class="lantern-spike-c"></div><div class="lantern-spike-b"></div></div></div></div><div class="lantern-box2"><div class="lantern"><div class="lantern-handle"></div><div class="lantern-a"><div class="lantern-b"><div class="lantern-t">' +
                this.Text[2] +
                '</div></div></div><div class="lantern-spike lantern-spike-a"><div class="lantern-spike-c"></div><div class="lantern-spike-b"></div></div></div></div><div class="lantern-box3"><div class="lantern"><div class="lantern-handle"></div><div class="lantern-a"><div class="lantern-b"><div class="lantern-t">' +
                this.Text[3] +
                '</div></div></div><div class="lantern-spike lantern-spike-a"><div class="lantern-spike-c"></div><div class="lantern-spike-b"></div></div></div></div></div><style type="text/css">@media only screen and (max-width:768px){.lantern-container{display:none}}.lantern-box2{position:fixed;top:' +
                this.lanternTop[2] +
                'px;right:' +
                this.lanternRL[2] +
                'px;z-index:' +
                this.zIndex +
                ';pointer-events:none}.lantern-box3{position:fixed;top:' +
                this.lanternTop[3] +
                'px;right:' +
                this.lanternRL[3] +
                'px;z-index:' +
                this.zIndex +
                ';pointer-events:none}.lantern-box1{position:fixed;top:' +
                this.lanternTop[1] +
                'px;left:' +
                this.lanternRL[1] +
                'px;z-index:' +
                this.zIndex +
                ';pointer-events:none}.lantern-box0{position:fixed;top:' +
                this.lanternTop[0] +
                'px;left:' +
                this.lanternRL[0] +
                'px;z-index:' +
                this.zIndex +
                ';pointer-events:none}.lantern-box3 .lantern,.lantern-box0 .lantern{-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px#fc903d}.lantern{position:relative;width:120px;height:90px;margin:20px 50px 60px 50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50%50%;-webkit-transform-origin:50%-100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px#fa6c00}.lantern-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,0.1);margin:12px 8px 8px 8px;border-radius:50%50%;border:2px solid#dc8f03}.lantern-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,0.1);margin:-4px 8px 8px 26px;border-radius:50%50%;border:2px solid#dc8f03}.lantern-handle{position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03}.lantern-spike-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50%-45px;background:orange;border-radius:0 0 5px 5px}.lantern-spike-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%}.lantern-spike-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:orange;border-radius:0 0 0 5px}.lantern:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px#dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.lantern:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px#dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.lantern-t{font-family:黑体,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}}*[no-select]{-webkit-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;}</style>'
            );
        },
        Text: ['新', '年', '快', '乐'],
        zIndex: 9999,
        lanternRL: [10, 150, 150, 10],
        lanternTop: [0, 0, 0, 0],
    };

    #postionCorrect(obj) {
        if ('postion' in obj) {
            let { postion } = obj;
            this.#HTMLContent.zIndex = postion.zIndex || this.#HTMLContent.zIndex;
            this.#HTMLContent.lanternRL = postion.lanternRL || this.#HTMLContent.lanternRL;
            this.#HTMLContent.lanternTop = postion.lanternTop || this.#HTMLContent.lanternTop;
        }
    }
    #contentCorrect(obj) {
        if ('content' in obj) {
            this.#HTMLContent.Text = obj.content.slice(0, 4).split('');
        }
    }
    constructor(wrapperID, initPara) {
        // 显示日期处理
        this.#dateCorrect(initPara);
        // 显示位置处理
        this.#postionCorrect(initPara);
        // 显示内容处理
        this.#contentCorrect(initPara);

        let $wrapper = document.getElementById(wrapperID);

        if (this.#CompareTime(initPara.date.from, initPara.date.to)) {
            $wrapper.innerHTML = this.#HTMLContent.HTML();
        } else {
            $wrapper.innerHTML = '';
        }
    }
}

  • 3Dcard.js

    var cards = document.querySelector("[Card3D]");
// var images = document.querySelectorAll("[Card3DContent]");
// var backgrounds = document.querySelectorAll("[Card3DConBG]");
var range = 40;

// const calcValue = (a, b) => (((a * 100) / b) * (range / 100) -(range / 2)).toFixed(1);
var calcValue = function calcValue(a, b) {return (a / b * range - range / 2).toFixed(1);}; // thanks @alice-mx

var timeout = void 0;
document.addEventListener('mousemove', function (_ref) {var x = _ref.x,y = _ref.y;
  if (timeout) {
    window.cancelAnimationFrame(timeout);
  }

  timeout = window.requestAnimationFrame(function () {
    var yValue = calcValue(y, window.innerHeight);
    var xValue = calcValue(x, window.innerWidth);
    // console.log(xValue, yValue);
    if (cards != null) {
      cards.style.transform = "rotateX(" + yValue + "deg) rotateY(" + xValue + "deg)";
    }
    // [].forEach.call(images, function (image) {
    //   image.style.transform = "translateX(" + -xValue + "px) translateY(" + yValue + "px)";
    // });

    // [].forEach.call(backgrounds, function (background) {
    //   background.style.backgroundPosition = xValue * .45 + "px " + -yValue * .45 + "px";
    // });
  });
}, false);

  • butterfly的布局

文章作者: loyeh
文章链接: http://Lo-Y-eH.github.io/posts/15bb.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 loyeh !
hexo
赏
评论
  目录