博客園鼠標點擊特效代碼

 統一回復一下，有些網友直接複製粘貼後沒有實現鼠標點擊的效果，多是沒有向博客園申請js的權限，申請下來後就能夠自定義本身的博客了。

 

<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>
 

 

看到有園友在下面留言，詢問我當前的鼠標特效是如何實現的，這裏統一回復一下。

更換鼠標標誌

在css樣式body里加 cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;裏面圖片改爲本身的就好了

body{

 background-image: url("https://img2018.cnblogs.com/blog/1358881/201909/1358881-20190910100015098-837598352.jpg"); background-repeat: repeat; background-attachment: fixed; background-size:cover; cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto; }

鼠標煙花效果：

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