【JavaScript】鼠标单击核心价值观和线条变换实现

前言

鼠标单击显示核心价值观、鼠标落点处线条变换聚集是两个常见的个人主页js效果，这里分享一下如何使用js实现。

核心价值观

core-values.js

let index = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        let string_list = ["¤富强¤", "¤民主¤","¤文明¤", "¤和谐¤", "¤自由¤", "¤平等¤", "¤公正¤" ,"¤法治¤", "¤爱国¤", "¤敬业¤", "¤诚信¤", "¤友善¤"];
        let color_list = ["#ff3333", "#ff8000", "#f9f906", "#b9f20d", "#00ff00", "#00ff80", "#00ffff", "#007fff", "#0000ff", "#7f00ff", "#ff00ff", "#ff0080"];
        let string = $("").text(string_list[index]);
        let color = color_list[index];
        index= (index + 1) % string_list.length;
        let x = e.pageX, y = e.pageY;
        string.css({ "z-index": 99, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": color });
        $("body").append(string);
        string.animate({ "top": y - 180, "opacity": 0 }, 1500, function(){ string.remove(); });
    });
});

效果：

线条几何变换

line.js

!function(){
    function n(n,e,t){
        return n.getAttribute(e)||t
    }
    function e(n){
        return document.getElementsByTagName(n)
    }
    function t(){
        let 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);
        let 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.xc||i.y