博客园美化随笔

主题

特别感谢：https://www.cnblogs.com/gshang/category/1924740.html

Blibili 风格

教程地址：https://www.cnblogs.com/gshang/p/11869120.html

 

鼠标点击特效

将下边的代码粘贴到页脚HTML代码中即可，需要修改特效文本可以在代码中修改：

代码块

 <!--鼠标点击特效-->
<script type="text/javascript">
      //定义获取词语下标
      var a_idx = 0;
      jQuery(document).ready(function ($) {
        //点击body时触发事件
        $("body").click(function (e) {
          //需要显示的词语
          var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
          //设置词语给span标签
          var $i = $("<span/>").text(a[a_idx]);
          //下标等于原来下标+1  余 词语总数
          a_idx = (a_idx + 1) % a.length;
          //获取鼠标指针的位置，分别相对于文档的左和右边缘。
          //获取x和y的指针坐标
          var x = e.pageX, y = e.pageY;
          //在鼠标的指针的位置给$i定义的span标签添加css样式
          $i.css({
            "z-index": 999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": rand_color()
          });
          // 随机颜色
          function rand_color() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
          }
          //在body添加这个标签
          $("body").append($i);
          //animate() 方法执行 CSS 属性集的自定义动画。
          //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
          //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
          $i.animate({
            //将原来的位置向上移动180
            "top": y - 180,
            "opacity": 0
            //1500动画的速度
          }, 1500, function () {
            //时间到了自动删除
            $i.remove();
          });
        });
      })
      ;
</script>

音乐播放器

将下面代码粘贴到 页脚HTML代码 ，

<!-- 音乐播放器 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-autoplay="true"  data-id="5239100" data-server="netease" data-type="song" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="https://unpkg.com/meting@1.2.0/dist/Meting.min.js"></script> 

注意参数：

data-id: 歌曲/专辑/歌单ID

data-server: 音乐平台，支持如下参数：
    netease （网易云音乐）
    tencent （qq音乐）
    xiami （虾米音乐）
    kugou （酷狗音乐）
    baidu （百度音乐）

data-type: 请求类型，支持如下参数：
    song （单曲）
    album （专辑）
    playlist （歌单）
    search （搜索）

data-mode: 播放模式，支持如下参数：
    random （随机）
    single （单曲）
    circulation （列表循环）
    order （列表）

data-autoplay: 自动播放 ，支持如下参数：
    true
    false 

推荐使用网易云哈，qq，酷狗我试过了，总会有一些毛病，怎样获取id？如下图，

这是获取单首音乐的id，其实无论是单曲还是专辑还是歌单在分享的时候复制链接，粘贴到剪切板看一下就知道了id为多少

蜘蛛网特效

将下面代码粘贴到 页脚HTML代码 ，

<!-- 蜘蛛网特效 -->
<script>
!function () {
    function n(n, e, t) {
        return n.getAttribute(e) || t
    }
 
    function e(n) {
        return document.getElementsByTagName(n)
    }
 
    function t() {
        var t = e("script"), o = t.length, i = t[o - 1];
        return {l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99)}
    }
 
    function o() {
        a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
 
    function i() {
        r.clearRect(0, 0, a, c);
        var n, e, t, o, m, l;
        s.forEach(function (i, x) {
            for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e], null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
        }), x(i)
    }
 

 

未完待续.......