分享一些网站常用的鼠标JS特效，也算记录一下鼠标好看的JS特效

使用教程

新建xxx.js，然后把下方js代码复制粘贴进去，然后上传到服务器或者云存储然后把引用到网站适当位置也可以在代码前后加上标签，然后引入到页面，如果是子比主题的话，直接放到自定义javascript代码

弹出爱心

$(function(){"use strict";!function(e,t,a){function n(){for(var e=0;e<i.length;e++)i[e].alpha<=0?(t.body.removeChild(i[e].el),i.splice(e,1)):(i[e].y--,i[e].scale+=.004,i[e].alpha-=.013,i[e].el.style.cssText="left:"+i[e].x+"px;top:"+i[e].y+"px;opacity:"+i[e].alpha+";transform:scale("+i[e].scale+","+i[e].scale+") rotate(45deg);background:"+i[e].color+";z-index:5201314");requestAnimationFrame(n)}function r(e){var a=t.createElement("div");a.className="heart",i.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:o()}),t.body.appendChild(a)}function o(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var i=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),function(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),r(e)}}(),n()}(window,document)});

弹出文字

(function () {
    var a_idx = 0;
    window.onclick = function (event) {
        var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
            "❤敬业❤", "❤诚信❤", "❤友善❤");
        var heart = document.createElement("b"); //创建b元素
        heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
        document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
        a_idx = (a_idx + 1) % a.length;
        heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
        var f = 16, // 字体大小
            x = event.clientX - f / 2, // 横坐标
            y = event.clientY - f, // 纵坐标
            c = randomColor(), // 随机颜色
            a = 1, // 透明度
            s = 1.2; // 放大缩小
        var timer = setInterval(function () { //添加定时器
            if (a <= 0) {
                document.body.removeChild(heart);
                clearInterval(timer);
            } else {
                heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                    c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                    s + ");";
                y--;
                a -= 0.016;
                s += 0.002;
            }
        }, 15)
    }
    // 随机颜色
    function randomColor() {
        return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
            .random() * 255)) + ")";
    }
}());

弹出彩球爆炸效果

$(function(){let t=function(){"use strict";function t(t){return"[object Array]"==Object.prototype.toString.call(t)}function e(t){return"function"==typeof t}function n(t){return"number"==typeof t}function i(t){return"string"==typeof t}function o(t){return b[t]||String.fromCharCode(t)}function r(t,e,n){for(var i in e)(n||!t.hasOwnProperty(i))&&(t[i]=e[i]);return t}function a(t,e){return function(){t.apply(e,arguments)}}function c(t){var n={};for(var i in t)n[i]=e(t[i])?a(t[i],t):t[i];return n}function s(t){function n(n){e(n)&&n.apply(t,[].splice.call(arguments,1))}function a(t){for(_=0;_<$.length;_++)D=$[_],i(D)?O[(t?"add":"remove")+"EventListener"].call(O,D,A,!1):e(D)?A=D:O=D}function s(){S(N),N=k(s),U||(n(t.setup),U=e(t.setup),n(t.resize)),t.running&&!M&&(t.dt=(B=+new Date)-t.now,t.millis+=t.dt,t.now=B,n(t.update),t.autoclear&&K&&t.clear(),n(t.draw)),M=++M%t.interval}function u(){O=j?t.style:t.canvas,W=j?"px":"",t.fullscreen&&(t.height=w.innerHeight,t.width=w.innerWidth),O.height=t.height+W,O.width=t.width+W,t.retina&&K&&Y&&(O.height=t.height*Y,O.width=t.width*Y,O.style.height=t.height+"px",O.style.width=t.width+"px",t.scale(Y,Y)),U&&n(t.resize)}function l(t,e){return R=e.getBoundingClientRect(),t.x=t.pageX-R.left-w.scrollX,t.y=t.pageY-R.top-w.scrollY,t}function h(e,n){return l(e,t.element),n=n||{},n.ox=n.x||e.x,n.oy=n.y||e.y,n.x=e.x,n.y=e.y,n.dx=n.x-n.ox,n.dy=n.y-n.oy,n}function d(t){if(t.preventDefault(),F=c(t),F.originalEvent=t,F.touches)for(Q.length=F.touches.length,_=0;_<F.touches.length;_++)Q[_]=h(F.touches[_],Q[_]);else Q.length=0,Q[0]=h(F,V);return r(V,Q[0],!0),F}function f(e){for(e=d(e),X=(q=$.indexOf(G=e.type))-1,t.dragging=!!/down|start/.test(G)||!/up|end/.test(G)&&t.dragging;X;)i($[X])?n(t[$[X--]],e):i($[q])?n(t[$[q++]],e):X=0}function p(e){z=e.keyCode,H="keyup"==e.type,J[z]=J[o(z)]=!H,n(t[e.type],e)}function m(e){t.autopause&&("blur"==e.type?C:E)(),n(t[e.type],e)}function E(){t.now=+new Date,t.running=!0}function C(){t.running=!1}function P(){(t.running?C:E)()}function T(){K&&t.clearRect(0,0,t.width,t.height)}function I(){L=t.element.parentNode,_=x.indexOf(t),L&&L.removeChild(t.element),~_&&x.splice(_,1),a(!1),C()}var N,A,O,L,R,_,W,B,D,F,G,z,H,X,q,M=0,Q=[],U=!1,Y=w.devicePixelRatio,j=t.type==y,K=t.type==g,V={x:0,y:0,ox:0,oy:0,dx:0,dy:0},$=[t.element,f,"mousedown","touchstart",f,"mousemove","touchmove",f,"mouseup","touchend",f,"click",v,p,"keydown","keyup",w,m,"focus","blur",u,"resize"],J={};for(z in b)J[b[z]]=!1;return r(t,{touches:Q,mouse:V,keys:J,dragging:!1,running:!1,millis:0,now:NaN,dt:NaN,destroy:I,toggle:P,clear:T,start:E,stop:C}),x.push(t),t.autostart&&E(),a(!0),u(),s(),t}let u=document.createElement("div");u.setAttribute("id","clickCanvas"),u.style.cssText="position:fixed;left:0;top:0;z-index:5201314;pointer-events:none;",document.body.appendChild(u);for(var l,h,d="E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min".split(" "),f="__hasSketch",p=Math,g="canvas",m="webgl",y="dom",v=document,w=window,x=[],E={fullscreen:!0,autostart:!0,autoclear:!0,autopause:!0,container:v.body,interval:1,globals:!0,retina:!1,type:g},b={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"},C={CANVAS:g,WEB_GL:m,WEBGL:m,DOM:y,instances:x,install:function(e){if(!e[f]){for(var i=0;i<d.length;i++)e[d[i]]=p[d[i]];r(e,{TWO_PI:2*p.PI,HALF_PI:p.PI/2,QUATER_PI:p.PI/4,random:function(e,i){return t(e)?e[~~(p.random()*e.length)]:(n(i)||(i=e||1,e=0),e+p.random()*(i-e))},lerp:function(t,e,n){return t+n*(e-t)},map:function(t,e,n,i,o){return(t-e)/(n-e)*(o-i)+i}}),e[f]=!0}},create:function(t){return t=r(t||{},E),t.globals&&C.install(self),l=t.element=t.element||v.createElement(t.type===y?"div":"canvas"),h=t.context=t.context||function(){switch(t.type){case g:return l.getContext("2d",t);case m:return l.getContext("webgl",t)||l.getContext("experimental-webgl",t);case y:return l.canvas=l}}(),t.container.appendChild(l),C.augment(h,t)},augment:function(t,e){return e=r(e||{},E),e.element=t.canvas||t,e.element.className+=" sketch",r(t,e,!0),s(t)}},P=["ms","moz","webkit","o"],T=self,I=0,N="AnimationFrame",A="request"+N,O="cancel"+N,k=T[A],S=T[O],L=0;L<P.length&&!k;L++)k=T[P[L]+"Request"+N],S=T[P[L]+"Cancel"+A];return T[A]=k=k||function(t){var e=+new Date,n=p.max(0,16-(e-I)),i=setTimeout(function(){t(e+n)},n);return I=e+n,i},T[O]=S=S||function(t){clearTimeout(t)},C}();if(document.getElementById("clickCanvas")){function e(t,e,n){this.init(t,e,n)}e.prototype={init:function(t,e,n){this.alive=!0,this.radius=n||10,this.wander=.15,this.theta=random(TWO_PI),this.drag=.92,this.color="#ffeb3b",this.x=t||0,this.y=e||0,this.vx=0,this.vy=0},move:function(){this.x+=this.vx,this.y+=this.vy,this.vx*=this.drag,this.vy*=this.drag,this.theta+=random(-.5,.5)*this.wander,this.vx+=.1*sin(this.theta),this.vy+=.1*cos(this.theta),this.radius*=.96,this.alive=this.radius>.5},draw:function(t){t.beginPath(),t.arc(this.x,this.y,this.radius,0,TWO_PI),t.fillStyle=this.color,t.fill()}};var n=50,i=["#5ee4ff","#f44033","#ffeb3b","#F38630","#FA6900","#f403e8","#F9D423"],o=[],r=[],a=t.create({container:document.getElementById("clickCanvas")});a.spawn=function(t,a){o.length>=n&&r.push(o.shift()),particle=r.length?r.pop():new e,particle.init(t,a,random(5,20)),particle.wander=random(.5,2),particle.color=random(i),particle.drag=random(.9,.99),theta=random(TWO_PI),force=random(1,5),particle.vx=sin(theta)*force,particle.vy=cos(theta)*force,o.push(particle)},a.update=function(){var t,e;for(t=o.length-1;t>=0;t--)e=o[t],e.alive?e.move():r.push(o.splice(t,1)[0])},a.draw=function(){a.globalCompositeOperation="lighter";for(var t=o.length-1;t>=0;t--)o[t].draw(a)},document.addEventListener("mousedown",function(t){var e,n;"TEXTAREA"!==t.target.nodeName&&"INPUT"!==t.target.nodeName&&"A"!==t.target.nodeName&&"I"!==t.target.nodeName&&"IMG"!==t.target.nodeName&&function(){for(e=random(15,20),n=0;n<e;n++)a.spawn(t.clientX,t.clientY)}()})}});

弹出彩色粒子

"use strict"; $(function () { function t(t, i) { if (!(t instanceof i)) { throw new TypeError("Cannot call a class as a function") } } var i = Object.assign || function (t) { for (var i = 1; i < arguments.length; i++) { var n = arguments[i]; for (var e in n) { Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]) } } return t }, n = (function () { function t(t, i) { for (var n = 0; n < i.length; n++) { var e = i[n]; (e.enumerable = e.enumerable || !1), (e.configurable = !0), "value" in e && (e.writable = !0), Object.defineProperty(t, e.key, e) } } return function (i, n, e) { return n && t(i.prototype, n), e && t(i, e), i } })(), e = (function () { function e(n) { var o = n.origin, r = n.speed, s = n.color, a = n.angle, h = n.context; t(this, e), (this.origin = o), (this.position = i({}, this.origin)), (this.color = s), (this.speed = r), (this.angle = a), (this.context = h), (this.renderCount = 0) } return (n(e, [{ key: "draw", value: function () { (this.context.fillStyle = this.color), this.context.beginPath(), this.context.arc(this.position.x, this.position.y, 2, 0, 2 * Math.PI), this.context.fill() } }, { key: "move", value: function () { (this.position.x = Math.sin(this.angle) * this.speed + this.position.x), (this.position.y = Math.cos(this.angle) * this.speed + this.position.y + 0.3 * this.renderCount), this.renderCount++ } }]), e) })(), o = (function () { function i(n) { var e = n.origin, o = n.context, r = n.circleCount, s = void 0 === r ? 10 : r, a = n.area; t(this, i), (this.origin = e), (this.context = o), (this.circleCount = s), (this.area = a), (this.stop = !1), (this.circles = []) } return (n(i, [{ key: "randomArray", value: function (t) { var i = t.length; return t[Math.floor(i * Math.random())] } }, { key: "randomColor", value: function () { var t = ["8", "9", "A", "B", "C", "D", "E", "F"]; return "#" + this.randomArray(t) + this.randomArray(t) + this.randomArray(t) + this.randomArray(t) + this.randomArray(t) + this.randomArray(t) } }, { key: "randomRange", value: function (t, i) { return (i - t) * Math.random() + t } }, { key: "init", value: function () { for (var t = 0; t < this.circleCount; t++) { var i = new e({ context: this.context, origin: this.origin, color: this.randomColor(), angle: this.randomRange(Math.PI - 1, Math.PI + 1), speed: this.randomRange(1, 6) }); this.circles.push(i) } } }, { key: "move", value: function () { var t = this; this.circles.forEach(function (i, n) { if (i.position.x > t.area.width || i.position.y > t.area.height) { return t.circles.splice(n, 1) } i.move() }), 0 == this.circles.length && (this.stop = !0) } }, { key: "draw", value: function () { this.circles.forEach(function (t) { return t.draw() }) } }]), i) })(); new ((function () { function i() { t(this, i), (this.computerCanvas = document.createElement("canvas")), (this.renderCanvas = document.createElement("canvas")), (this.computerContext = this.computerCanvas.getContext("2d")), (this.renderContext = this.renderCanvas.getContext("2d")), (this.globalWidth = window.innerWidth), (this.globalHeight = window.innerHeight), (this.booms = []), (this.running = !1) } return (n(i, [{ key: "handleMouseDown", value: function (t) { var i = new o({ origin: { x: t.clientX, y: t.clientY }, context: this.computerContext, area: { width: this.globalWidth, height: this.globalHeight } }); i.init(), this.booms.push(i), this.running || this.run() } }, { key: "handlePageHide", value: function () { (this.booms = []), (this.running = !1) } }, { key: "init", value: function () { var t = this.renderCanvas.style; (t.position = "fixed"), (t.top = t.left = 0), (t.zIndex = "5201314"), (t.pointerEvents = "none"), (t.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth), (t.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight), document.body.append(this.renderCanvas), window.addEventListener("mousedown", this.handleMouseDown.bind(this)), window.addEventListener("pagehide", this.handlePageHide.bind(this)) } }, { key: "run", value: function () { var t = this; if (((this.running = !0), 0 == this.booms.length)) { return (this.running = !1) } requestAnimationFrame(this.run.bind(this)), this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight), this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight), this.booms.forEach(function (i, n) { if (i.stop) { return t.booms.splice(n, 1) } i.move(), i.draw() }), this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight) } }]), i) })())().init() });

鼠标重影跟随

$(function(){function A(A){function t(){d=document.createElement("canvas"),a=d.getContext("2d"),d.style.top="0px",d.style.left="0px",d.style.pointerEvents="none",s?(d.style.position="absolute",p.appendChild(d),d.width=p.clientWidth,d.height=p.clientHeight):(d.style.position="fixed",document.body.appendChild(d),d.width=u,d.height=m),e(),c()}function e(){p.addEventListener("mousemove",o),p.addEventListener("touchmove",n),p.addEventListener("touchstart",n),window.addEventListener("resize",i)}function i(A){u=window.innerWidth,m=window.innerHeight,s?(d.width=p.clientWidth,d.height=p.clientHeight):(d.width=u,d.height=m)}function n(A){if(A.touches.length>0)for(let t=0;t<A.touches.length;t++)g(A.touches[t].clientX,A.touches[t].clientY,C)}function o(A){if(s){const t=p.getBoundingClientRect();E.x=A.clientX-t.left,E.y=A.clientY-t.top}else E.x=A.clientX,E.y=A.clientY;g(E.x,E.y,C)}function g(A,t,e){w.push(new l(A,t,e))}function h(){a.clearRect(0,0,u,m);for(let A=0;A<w.length;A++)w[A].update(a);for(let A=w.length-1;A>=0;A--)w[A].lifeSpan<0&&w.splice(A,1)}function c(){h(),requestAnimationFrame(c)}function l(A,t,e){const i=40;this.initialLifeSpan=i,this.lifeSpan=i,this.position={x:A,y:t},this.image=e,this.update=function(A){this.lifeSpan--;const t=Math.max(this.lifeSpan/this.initialLifeSpan,0);A.globalAlpha=t,A.drawImage(this.image,this.position.x,this.position.y)}}let d,a,s=A&&A.element,p=s||document.body,u=window.innerWidth,m=window.innerHeight,E={x:u/2,y:u/2},w=[],C=new Image;C.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAYAAACk9eypAAAAAXNSR0IArs4c6QAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAhGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAEgAAAABAAAASAAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADKADAAQAAAABAAAAEwAAAAAChpcNAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpMwidZAAABqElEQVQoFY3SPUvDQBgH8BREpRHExYiDgmLFl6WC+AYmWeyLg4i7buJX8DMpOujgyxGvUYeCgzhUQUSKKLUS0+ZyptXh8Z5Ti621ekPyJHl+uftfomhaf9Ei5JyxXKfynyEA6EYcLHpwyflT958GAQ7DTABNHd8EbtDbEH2BD5QEQmi2mM8P/Iq+A0SzszEg+3sPjDnDdVEtQKQbMUidHD3xVzf6A9UDEmEm+8h9KTqTVUjT+vB53aHrCbAPiceYq1dQI1Aqv4EhMll0jzv+Y0yiRgCnLRSYyDQHVoqUXe4uKL9l+L7GXC4vkMhE6eW/AOJs9k583ORDUyXMZ8F5SVHVVnllmPNKSFagAJ5DofaqGXw/gHBYg51dIldkmknY3tguv3jOtHR4+MqAzaraJXbEhqHhcQlwGSOi5pytVQHZLN5s0WNe8HPrLYlFsO20RPHkImxsbmHdLJFI76th7Z4SeuF53hTeFLvhRCJRCTKZKxgdnRDbW+iozFJbBMw14/ElwGYc0egMBMFzT21f5Rog33Z7dX02GBm7WV5ZfT5Nn5bE3zuCDe9UxdTpNvK+5AAAAABJRU5ErkJggg==",t()}new A});

以上就是我感觉比较好看的JS鼠标特效了