为你的网站增加石蒜模拟器

为你的网站增加石蒜模拟器

梦未
2023-07-01 / 2 评论 / 2 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年07月08日,已超过312天没有更新,若内容或图片失效,请留言反馈。

来自Github上的石蒜模拟器网页小组件 🎉直接引用现成脚本为你的网站或者纯HTML网页添加石蒜模拟器。直接引用现成脚本为你的网站或者纯HTML网页添加石蒜模拟器。

具体效果可以刷新蓝点网看看网页右侧,有前端开发能力的用户建议直接看Github可以根据需要进行自定义。

蓝点网这里引入的是现成模块只需要放到网页中即可,无论是WordPress还是其他博客系统都可以轻松添加。

效果如下:

Screenshot_2023-07-01-13-24-35-018_com.mmbox.xbrowser.pro.png

#复制下面这段代码粘贴到网页中即可
#如果是WordPress等博客系统可以在主题中找到页脚设置等,切换到HTML模式粘贴即可
<div id="right_layer" style="position:fixed; bottom:0; right:0; cursor: move;">
  <div id="sakana-widget"></div>
  <script>
    var rightLayer = document.getElementById("right_layer");
    var isDragging = false;
    var offsetX = 0;
    var offsetY = 0;

    rightLayer.addEventListener("mousedown", function (event) {
      isDragging = true;
      offsetX = event.clientX - rightLayer.offsetLeft;
      offsetY = event.clientY - rightLayer.offsetTop;
    });

    document.addEventListener("mouseup", function () {
      isDragging = false;
    });

    document.addEventListener("mousemove", function (event) {
      if (isDragging) {
        rightLayer.style.left = event.clientX - offsetX + "px";
        rightLayer.style.top = event.clientY - offsetY + "px";
      }
    });

    function initSakanaWidget() {
      new SakanaWidget().mount('#sakana-widget');
    }
  </script>
  <script
    async
    onload="initSakanaWidget()"
    src="https://cdn.jsdelivr.net/npm/sakana-widget@2.2.2/lib/sakana.min.js"
  ></script>
</div>
本文共 198 个字数,平均阅读时长 ≈ 1分钟
0

海报

正在生成.....

评论 (2)

语录
取消
  1. 头像
    梦未 作者
    ·Android · Google Chrome
    沙发

    “阮声清悠南烛尽,林覆霜深秋石平”

    回复 删除 垃圾
    1. 头像
      梦未 作者
      ·Android · Google Chrome
      @ 梦未

      我一个人磕磕绊绊走了好远,未来的路布满荆棘坎
      坷与未知,只希望我能走的再远一点

      回复 删除 垃圾