博客园美化之鼠标点击效果

更改字体的大小

var size =  Math.random() * 10 + 8 + "px";
现在是字体大小随机,想要固定大小自己修改为固定px即可

更改字体颜色

let r = Math.random()*255;
let g = Math.random()*255;
let b = Math.random()*255;
var color = "rgb("+r+","+g+","+b+")";
1>>直接改为固定的颜色

更改点击内容

  var a = new Array("global", "yield", "python", "HTML", "css", "javascript", "lambda" ,"import", "print", "class", "def", "except","assert", "exec", "pass", "False", "True", "socket", "struct" ,"random", "PEP8", "threading", "multiprocessing");

将代码粘贴到侧边栏或者页首或者页尾处

<script type="text/javascript">
$(document).ready(function(){
    var a_index = 0;
    $("body").click(function(e){
        let r = Math.random()*255;
        let g = Math.random()*255;
        let b = Math.random()*255;
        var color = "rgb("+r+","+g+","+b+")";
        var a = new Array("global", "yield", "python", "HTML", "css", "javascript", "lambda" ,"import", "print", "class", "def", "except","assert", "exec", "pass", "False", "True", "socket", "struct" ,"random", "PEP8", "threading", "multiprocessing");
        var $i = $("<span/>").text(a[a_index]);
        a_index = (a_index + 1) % a.length;
        var x = e.pageX,y = e.pageY;
        var size =  Math.random() * 10 + 8 + "px";
        $i.css({
            "z-index": 99999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "400",
             "font-size": size,
            "color": color
        });
        $("body").append($i);
        $i.animate({"top": y-200,"opacity": 0},1500,function() {
            $i.remove();
        });
    });
});
</script>

 

posted @ 2018-10-17 16:38  YaoSir66  阅读(351)  评论(0编辑  收藏  举报