博客园添加鼠标点击效果、拖动线条效果、人体瑜伽时间特效

说明：在查阅文档时总会看到许多博主的博客园炫酷效果吸引，现便开始申请博客园，并查找那些分享他们的制作方法，完成了一个，觉得还行，并且可以直接使用。

　　本人所有制作方法皆来源广大网友博主。

效果展示

首先注册博客后，需要申请开通博客园，申请后一般一个小时就可以接到消息通知，申请成功后，便可以通过登录名密码登陆博客园后台了。

然后我们点击设置，页面样式效果的调整都可以再这里完成了，需要的文件或者图片可以再对应的窗口上传即可，这里需要操作的是设置里“博客侧边栏公告（支持HTML代码）（支持 JS 代码）”这里需要申请支持js代码，这里申请些许严格，分享一篇博主的：

尊敬的博客园管理员：

　　请问是否可以帮我开通js权限，我需要一些简单的js来解决例如代码高亮等外观调整。

　　谢谢您的帮助。

当然我没按照这个，我就写了一次就通过了，没有硬性规定哈，你需要做什么就写什么提交就行了。

开通后具体操作我在下面会详细的说明

具体实现步骤

一、鼠标点击效果

　　我们只需要再（支持html代码）（支持js代码）下添加：

<script type="text/javascript">
    $(document).ready(function(){
        var a_index = 0;
        $("body").click(function(e){
            var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
            var $i = $("<span/>").text(a[a_index]);
            a_index = (a_index + 1) % a.length;
            var x = e.pageX,y = e.pageY;
            $i.css({
                "z-index": 99999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": randomColor()
            });
            $("body").append($i);
            $i.animate({"top": y-180,"opacity": 0},1500,function() {
                $i.remove();
            });

            function randomColor(){
                let r = Math.floor(Math.random()*256)
                let g = Math.floor(Math.random()*256)
                let b = Math.floor(Math.random()*256)
                return "rgb("+r+','+g+','+b+")"
            }
        });
    });
</script>

二、鼠标吸附粒子线条特效

　　需要在脚本html代码下添加：

　　　　</script>

　　　　说明：color:线条颜色，opacty：透明度，count：数量，z-index：堆叠顺序

三、人体瑜伽时间特效

　　这个时间进来刷新后会暂停，点击开始后就可以正常了，需要在（支持HTML代码）（支持 JS 代码）下：

四、对页面字体修改css样式

　　需要在页面定制 CSS 代码下：

　　　　body{
　　　　　　background-size:normal;
　　　　　　font-family: cursive;
　　　　　　font-size: 18px;
　　　　　　font-weight: bold;
　　　　}
　　　　body::-webkit-scrollbar {
　　　　　　display: none;
　　　　}

　　　　#最上方名称字样修改
　　　　#blogTitle h1 {
　　　　　　font-size: 150%;
　　　　　　font-weight: bold;
　　　　　　line-height: 2.5;
　　　　　　padding-top: 25px;
　　　　　　margin-left: 2em;
　　　　　　font-family: serif;
　　　　　　font-size: 54px;
　　　　}
　　　　#footer {
　　　　　　font-size: 12px;
　　　　　　font-weight:normal;
　　　　}

　到此完成了，希望对广大喜好博客的网友有帮助。觉得有帮助就点个赞👍

posted @ 2020-03-25 14:15 萧萧凌云阅读(446) 评论(0) 收藏举报

刷新页面返回顶部