一些好看的网站鼠标JS特效-彩豆博客

使用方法：

新建xxx.js，然后把下方js代码复制粘贴进去，然后上传到服务器或者云存储
然后把<script src="js文件绝对位置"></script>引用到网站适当位置即可
也可以在代码前后加上<script></script>标签，然后引入到页面
子比主题按照步骤二放在 自定义底部HTML代码 内测试全部可行，其余主题自测

下方特效留空部分都是提供点击体验测试的

弹出爱心

在下方空白区域点击体验

JS代码

$(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)});

弹出文字

在下方空白区域点击体验

JS代码

(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)) + ")";

    }
}());

弹出彩球

在下方空白区域点击体验

JS代码

$(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)}()})}});

弹出彩色粒子

在下方空白区域点击体验

JS代码

"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() });

鼠标重影跟随

JS代码

$(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代码

$(function(){function t(t){function i(t){d=document.createElement("canvas"),f=d.getContext("2d"),d.style.top="0px",d.style.left="0px",d.style.pointerEvents="none",r?(d.style.position="absolute",u.appendChild(d),d.width=u.clientWidth,d.height=u.clientHeight):(d.style.position="fixed",document.body.appendChild(d),d.width=p,d.height=y),e(),a()}function e(){u.addEventListener("mousemove",h),u.addEventListener("touchmove",o),u.addEventListener("touchstart",o),window.addEventListener("resize",n)}function n(t){p=window.innerWidth,y=window.innerHeight,r?(d.width=u.clientWidth,d.height=u.clientHeight):(d.width=p,d.height=y)}function o(t){if(t.touches.length>0)for(let i=0;i<t.touches.length;i++)s(t.touches[i].clientX,t.touches[i].clientY,w[Math.floor(Math.random()*w.length)])}function h(t){if(r){const i=u.getBoundingClientRect();m.x=t.clientX-i.left,m.y=t.clientY-i.top}else m.x=t.clientX,m.y=t.clientY;s(m.x,m.y)}function s(t,i,e){g.push(new c(t,i,e))}function l(){f.clearRect(0,0,p,y);for(let t=0;t<g.length;t++)g[t].update(f);for(let t=g.length-1;t>=0;t--)g[t].lifeSpan<0&&g.splice(t,1)}function a(){l(),requestAnimationFrame(a)}function c(t,i,e){const n=Math.floor(60*Math.random()+60);this.initialLifeSpan=n,this.lifeSpan=n,this.velocity={x:(Math.random()<.5?-1:1)*(Math.random()/10),y:-1*Math.random()-.4},this.position={x:t,y:i},this.canv=e,this.baseDimension=4,this.update=function(t){this.position.x+=this.velocity.x,this.position.y+=this.velocity.y,this.velocity.x+=2*(Math.random()<.5?-1:1)/75,this.velocity.y-=Math.random()/600,this.lifeSpan--;const i=.2+(this.initialLifeSpan-this.lifeSpan)/this.initialLifeSpan;t.fillStyle="#e6f1f7",t.strokeStyle="#3a92c5",t.beginPath(),t.arc(this.position.x-this.baseDimension/2*i,this.position.y-this.baseDimension/2,this.baseDimension*i,0,2*Math.PI),t.stroke(),t.fill(),t.closePath()}}let d,f,r=t&&t.element,u=r||document.body,p=window.innerWidth,y=window.innerHeight,m={x:p/2,y:p/2},g=[],w=[];i()}new t});

笑脸挂坠跟随

JS代码

$(function(){function t(t){function e(){a=document.createElement("canvas"),v=a.getContext("2d"),a.style.top="0px",a.style.left="0px",a.style.pointerEvents="none",w?(a.style.position="absolute",f.appendChild(a),a.width=f.clientWidth,a.height=f.clientHeight):(a.style.position="fixed",document.body.appendChild(a),a.width=M,a.height=W),v.font="16px serif",v.textBaseline="middle",v.textAlign="center";let i=v.measureText(p),t=document.createElement("canvas"),e=t.getContext("2d");t.width=i.width,t.height=2*i.actualBoundingBoxAscent,e.textAlign="center",e.font="16px serif",e.textBaseline="middle",e.fillText(p,t.width/2,i.actualBoundingBoxAscent),u=t;let o=0;for(o=0;o<r;o++)q[o]=new x(u);n(),h()}function n(){f.addEventListener("mousemove",l),f.addEventListener("touchmove",c),f.addEventListener("touchstart",c),window.addEventListener("resize",o)}function o(i){M=window.innerWidth,W=window.innerHeight,w?(a.width=f.clientWidth,a.height=f.clientHeight):(a.width=M,a.height=W)}function c(i){if(i.touches.length>0)if(w){const t=f.getBoundingClientRect();L.x=i.touches[0].clientX-t.left,L.y=i.touches[0].clientY-t.top}else L.x=i.touches[0].clientX,L.y=i.touches[0].clientY}function l(i){if(w){const t=f.getBoundingClientRect();L.x=i.clientX-t.left,L.y=i.clientY-t.top}else L.x=i.clientX,L.y=i.clientY}function s(){for(a.width=a.width,q[0].position.x=L.x,q[0].position.y=L.y,i=1;i<r;i++){let t=new d(0,0);i>0&&y(i-1,i,t),i<r-1&&y(i+1,i,t);let e,n,o=new d(-q[i].velocity.x*b,-q[i].velocity.y*b),c=new d((t.X+o.X)/Y,(t.Y+o.Y)/Y+B);q[i].velocity.x+=g*c.X,q[i].velocity.y+=g*c.Y,Math.abs(q[i].velocity.x)<E&&Math.abs(q[i].velocity.y)<E&&Math.abs(c.X)<C&&Math.abs(c.Y)<C&&(q[i].velocity.x=0,q[i].velocity.y=0),q[i].position.x+=q[i].velocity.x,q[i].position.y+=q[i].velocity.y,e=a.clientHeight,n=a.clientWidth,q[i].position.y>=e-A-1&&(q[i].velocity.y>0&&(q[i].velocity.y=H*-q[i].velocity.y),q[i].position.y=e-A-1),q[i].position.x>=n-A&&(q[i].velocity.x>0&&(q[i].velocity.x=H*-q[i].velocity.x),q[i].position.x=n-A-1),q[i].position.x<0&&(q[i].velocity.x<0&&(q[i].velocity.x=H*-q[i].velocity.x),q[i].position.x=0),q[i].draw(v)}}function h(){s(),requestAnimationFrame(h)}function d(i,t){this.X=i,this.Y=t}function y(i,t,e){let n=q[i].position.x-q[t].position.x,o=q[i].position.y-q[t].position.y,c=Math.sqrt(n*n+o*o);if(c>m){let i=X*(c-m);e.X+=n/c*i,e.Y+=o/c*i}}function x(i){this.position={x:L.x,y:L.y},this.velocity={x:0,y:0},this.canv=i,this.draw=function(i){i.drawImage(this.canv,this.position.x-this.canv.width/2,this.position.y-this.canv.height/2,this.canv.width,this.canv.height)}}let a,v,u,p=t&&t.emoji||"🤪",w=t&&t.element,f=w||document.body,r=7,g=.01,m=10,X=10,Y=1,B=50,b=10,E=.1,C=.1,A=11,H=.7,M=window.innerWidth,W=window.innerHeight,L={x:M/2,y:M/2},q=[];e()}new t});

彩色雪花跟随

JS代码

$(function(){function t(t){function e(){w=document.createElement("canvas"),v=w.getContext("2d"),w.style.top="0px",w.style.left="0px",w.style.pointerEvents="none",r?(w.style.position="absolute",u.appendChild(w),w.width=u.clientWidth,w.height=u.clientHeight):(w.style.position="fixed",u.appendChild(w),w.width=f,w.height=x),v.font="21px serif",v.textBaseline="middle",v.textAlign="center",d.forEach(t=>{let e=v.measureText(B),i=document.createElement("canvas"),n=i.getContext("2d");i.width=e.width,i.height=e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,n.fillStyle=t,n.textAlign="center",n.font="21px serif",n.textBaseline="middle",n.fillText(B,i.width/2,e.actualBoundingBoxAscent),m.push(i)}),i(),a()}function i(){u.addEventListener("mousemove",h),u.addEventListener("touchmove",o),u.addEventListener("touchstart",o),window.addEventListener("resize",n)}function n(t){f=window.innerWidth,x=window.innerHeight,r?(w.width=u.clientWidth,w.height=u.clientHeight):(w.width=f,w.height=x)}function o(t){if(t.touches.length>0)for(let e=0;e<t.touches.length;e++)s(t.touches[e].clientX,t.touches[e].clientY,m[Math.floor(Math.random()*m.length)])}function h(t){window.requestAnimationFrame(()=>{if(r){const e=u.getBoundingClientRect();p.x=t.clientX-e.left,p.y=t.clientY-e.top}else p.x=t.clientX,p.y=t.clientY;const e=Math.hypot(p.x-g.x,p.y-g.y);e>1.5&&(s(p.x,p.y,m[Math.floor(Math.random()*d.length)]),g.x=p.x,g.y=p.y)})}function s(t,e,i){y.push(new c(t,e,i))}function l(){v.clearRect(0,0,f,x);for(let t=0;t<y.length;t++)y[t].update(v);for(let t=y.length-1;t>=0;t--)y[t].lifeSpan<0&&y.splice(t,1)}function a(){l(),requestAnimationFrame(a)}function c(t,e,i){const n=Math.floor(30*Math.random()+60);this.initialLifeSpan=n,this.lifeSpan=n,this.velocity={x:(Math.random()<.5?-1:1)*(Math.random()/2),y:.7*Math.random()+.9},this.position={x:t,y:e},this.canv=i,this.update=function(t){this.position.x+=this.velocity.x,this.position.y+=this.velocity.y,this.lifeSpan--,this.velocity.y+=.02;const e=Math.max(this.lifeSpan/this.initialLifeSpan,0);t.drawImage(this.canv,this.position.x-this.canv.width/2*e,this.position.y-this.canv.height/2,this.canv.width*e,this.canv.height*e)}}let d=t&&t.colors||["#D61C59","#E7D84B","#1B8798"],r=t&&t.element,u=r||document.body,f=window.innerWidth,x=window.innerHeight;const p={x:f/2,y:f/2},g={x:f/2,y:f/2},y=[],m=[];let w,v;const B="*";e()}new t});

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明 1 本网站名称：彩豆博客
2 本站永久网址：https://www.521cd.cn
3本站代码模板仅供学习交流使用请勿商业运营,严禁使用彩豆博客上的模板&源码从事违法,侵权等任何非法活动！
4 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ931106824进行删除处理。
5 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
7 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END