一些好看的网站鼠标JS特效

弹出爱心

$(function(){"use strict";!function(e,t,a){function n(){for(var e=0;e

弹出文字

(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;_.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

弹出彩色粒子

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