时间戳

首页 > 技术文章 > 博客园美化记（二）

博客园美化记（二）

wonux 2021-12-11 22:11 原文

设置头像

侧边栏公告代码

<!--设置头像-->
<img src="https://images.cnblogs.com/cnblogs_com/wonux/787021/o_p2324377635.jpg">

头像旋转

页面定制css代码

/*头像旋转*/
.div a img{
width: 88px;
height: 88px;
border-radius: 88px;
transition: all 1.2s ease-out 0s;
}
.div a img:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

侧边栏公告代码

<!--设置头像-->
<div class="div">
<a href="#"><img src="https://images.cnblogs.com/cnblogs_com/wonux/787021/o_p2324377635.jpg"></a>
</div>

设置背景

背景图片

页面定制css代码

/*设置背景*/
body {
	background-image: url(https://images.cnblogs.com/cnblogs_com/wonux/799478/o_slackwre_bg.jpg) !important;
	padding-bottom: 25px;
}

底部鱼池

页首/页脚HTML代码

<!-- 小鱼 start -->
<div id="jsi-flying-fish-container" class="container"></div>
<script src='https://blog-static.cnblogs.com/files/wonux/myfish.js'></script>
<style>
  @media only screen and (max-width: 767px){
  #sidebar_search_box input[type=text]{width:calc(100% - 24px)}
  }
  #jsi-flying-fish-container{
    opacity: 0.4;
    position:fixed;
    width: 100%;
    height: 20%;
    bottom: 0;
    pointer-events: none;
  }
</style>
<!-- 小鱼 end -->

雪花特效

侧边栏公告代码

<!--雪花-->
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/wonux/snow.js"></script>

页面定制css代码

#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255,255,240,0.1);
    pointer-events: none;
}

鼠标特效

鼠标烟花

页首/页脚HTML代码

<!--鼠标烟花-->
<script src="https://blog-static.cnblogs.com/files/wonux/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

鼠标爱心

页首/页脚HTML代码

<!--鼠标爱心-->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤","❤","❤","❤","❤","❤","❤","❤","❤","❤","❤","❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

鼠标粒子特效

页首/页脚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)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)  
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>

目录

侧边栏目录

侧边栏公告代码

<!--侧边栏目录-->
<!--   目录开始-->
<link href="https://files.cnblogs.com/files/wonux/cnblog-scroller.css" type="text/css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/wonux/scrollspy.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/wonux/stickUp.min.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/wonux/cnblog-scroller.js" type="text/javascript"></script>
<!--   目录结束-->

显示评论头像

样式一：静态头像

页脚HTML代码

<!--评论头像-->
<script type="text/javascript">
var test = setInterval(function () {
$('.feedbackItem').each(function () {
var t = $(this);
if(t.find('img').length != 0) {
clearInterval(test);
return;
}
t.find('.layer').prepend($('<img src="' + t.find('.feedbackCon').find('span').text() + '" style="margin:1px">'));
});
},1000)
</script>

样式二：支持旋转

  1. 页面定制CSS代码
/*评论头像旋转*/
.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
 
.feedbackCon img {
border-radius: 40px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
  1. 上传JavaScript文件Comments.js
function customTimer(inpId, fn) {
    if ($(inpId).length) {
        fn();
    }
    else {
        var intervalId = setInterval(function () {
            if ($(inpId).length) {  //如果存在了
                clearInterval(intervalId);  // 则关闭定时器
                customTimer(inpId, fn);              //执行自身
            }
        }, 100);
    }
}
//添加 评论区的 形象照
function addImage() {
    var spen_html = "<span class='bot' ></span>\
                         <span class='top'></span>";
    $(".blog_comment_body").append(spen_html);
    $(".blog_comment_body").before("<div class='body_right' style='float: left;'><a target='_blank'><img  /></a></div>");
    var feedbackCon = $(".feedbackCon").addClass("clearfix");
    for (var i = 0; i < feedbackCon.length; i++) {
        var span = $(feedbackCon[i]).find("span:last")[0].innerHTML || "http://pic.cnitblog.com/face/sample_face.gif";
        $(feedbackCon[i]).find(".body_right img").attr("src", span);
        var href = $(feedbackCon[i]).parent().find(".comment_date").next().attr("href");
        $(feedbackCon[i]).find(".body_right a").attr("href", href);
    }
}
//页面加载完成是执行
$(function () {
//添加 评论区的 形象照
    customTimer(".blog_comment_body", addImage);
    });
  1. 页脚引入上传的JavaScript文件
    页脚Html代码
<!--评论头像旋转-->
<script type="text/javascript" src="https://files.cnblogs.com/files/wonux/Comments.js"></script>

推荐、反对、加关注、返回顶部、快速评论

页面定制CSS代码

/*推荐反对*/
#div_digg {
    position: fixed;
    bottom: 0px;
    right: 15px;
    padding: 8px 8px 8px 10px;
    background-color: #fff;
    border: 1px solid #D9DBE1;
}

页首HTML代码

<!--推荐反对-->
<head>
    <script type="text/javascript">
        function focusFunction(){
            var tbEl = document.getElementById("tbCommentBody");
            if(tbEl)  
                tbEl.focus();
            else   
                window.location.href = "http://passport.cnblogs.com/login.aspx?";
        }

        /*在div_digg中添加关注链接*/
        var div_digg = document.getElementById("div_digg");

        var my_div = document.createElement("div");
        my_div.style.padding="0 0 5px 0";
        my_div.innerHTML = "<a onclick=\"javascript:c_follow"+"();\" href=\"javascript:void(0);\" style=\"font-weight: bold; padding-left: 5px;\">关注 博主</a>"

        div_digg.insertBefore(my_div,div_digg.firstChild);
        /*添加关注链接结束*/
         /*添加评论快速入口*/
        document.getElementById("digg_tips").innerHTML = "<a onclick=\"javascript:focusFunction();\" href=\"javascript:void(0);\" style=\"font-weight: bold; padding-left: 5px;\">快速评论</a>  <a href=\"#top\" style=\"font-weight: bold; padding-left: 5px;\">返回顶部</a>";

    </script>
</head>

音乐播放器

页脚Html代码

<!--音乐播放器-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/wonux/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"  data-id="7119859169" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

参考：
https://www.cnblogs.com/bigorangecc/p/12933932.html
https://www.cnblogs.com/jyroy/p/10374442.html

【参考阅读】：
https://www.cnblogs.com/yiyuzi/p/14465484.html
https://www.cnblogs.com/googny/p/3712651.html

推荐阅读