头图：W pid:81072171 p0

为自己的网页添加鼠标点击文字特效

前言：之前博客站启用的美化插件有个是鼠标点击自动出现粒子效果，后来觉得过于花里胡哨，而且在移动端使用观感很差，影响阅读，遂去之，通过网上教程了解到JS为页面添加鼠标点击效果的方法，于是有了本站这样的点击特效：点击自动出现彩虹色颜色之一的社会主义和性价值观12词中的一个。

本站使用的鼠标点击特效

JS代码

//鼠标点击出现社会主义核心价值观文字特效
/*使用了jQuery语法，若页面未引入JQ应引入JQ或者
将本代码中JQ选择器替换为JS原生选择器*/
var a_idx = 0;
    $("body").click(function(e) {
        var a = new Array(
            "富强", "民主", "文明", "和谐",
            "自由", "平等", "公正", "法治",
            "爱国", "敬业", "诚信", "友善"
            );
        const col = [
        "#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF"
        ];
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 144469,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": col[Math.floor((Math.random()*col.length))]
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove()
        })
    });

如要直接更改文字内容，直接将开始时字符串数组a中内容进行替换，更改颜色则是将字符串数组col中的hex颜色值进行更改。

伸手党可以到此为止了，下面是原理分析

JS代码分析

定义全局变量

a_idx=0，作为点击次数的累加值，实现点击鼠标按顺序轮换出现的关键词。如果要实现随机出现关键词可将此处a_idx赋值Math.floor(Math.random()*a.length)并将后文a_idx = (a_idx + 1) % a.length;更改为a_idx = Math.floor(Math.random()*a.length);

添加鼠标左键点击事件

定义好要出现的文字内容和文字颜色hex值作为局部变量储存，每次调用时根据文字内容的字符串数组索引值取值展现本次显示的词语。
根据鼠标点击事件的pageX,pageY得到鼠标点击时指针位置，添加进文字特效<span>标签的css内，实现点击时文字出现位置在鼠标下方20px处。
将这个文字特效标签插入至<body>标签底部。
最后，为该标签添加动画，在鼠标点击事件后1.5s内向上漂浮180px并销毁该标签。