素材来源:https://www.lanrenzhijia.com/others/5024.html

简单说下我自己的步骤:

把<script type="text/javascript" src="js/jquery.js"></script>

替换成<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
页首还是<style>.stage {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;pointer-events: none}</style>
 
把<script type="text/javascript" src="js/canvas.js"></script>
替换成
<script>
var Stage = function() {
    function t(t, n, i) {
        var e = this;
        this.canvas = document.getElementById(t), this.ctx = this.canvas.getContext("2d"), this.renderList = [], this.needClear = !0, this.canvas.width = n || $(window).width(), this.canvas.height = i || $(window).height(), $(window).on("resize", function() {
            e.canvas.width = n || $(window).width(), e.canvas.height = i || $(window).height()
        })
    }
    return window.requestAnimationFrame = function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(t) {
            window.setTimeout(t, 1e3 / 60)
        }
    }(), t.prototype.update = function() {
        var t = this;
        t.needClear && t.ctx.clearRect(0, 0, t.canvas.width, t.canvas.height), t.renderList.forEach(function(n) {
            n(t.ctx, t.canvas)
        }), requestAnimationFrame(function() {
            t.update()
        })
    }, t.prototype.onUpdate = function(t) {
        this.renderList.push(t)
    }, t
}();;
var Twinkle = function() {
    function t(t, e, a) {
        this.initSymbols(t, e, a), this.particles = [], this._pool = [], this.mouse = new s
    }
    function s(t, s) {
        this.x = t || 0, this.y = s || 0
    }
    function e(t, s, e) {
        this.color = n(t), this.size = 2 * (s + e);
        for(var a = 0, i = o.length; i > a; a++) this.push(this._createSymbol(o[a], s, e))
    }
    function a(t, s, e, a, i, o) {
        this.init(t, s, e, a, i, o)
    }
    function i(t, s, e, a, i) {
        return "rgba" === t ? "rgba(" + s + "," + e + "," + a + "," + i + ")" : "hsla" === t ? "hsla(" + s + "," + e + "%," + a + "%," + i + ")" : ""
    }
    if(!document.createElement("canvas").getContext) return $.noop;
    var o = [4, 6, 8, 10, 12],
        h = 2500;
    t.prototype = {
        mouse: null,
        gravity: .035,
        initSymbols: function(t, s, a) {
            this._symbols = new e(t, s, a)
        },
        render: function(t) {
            var s, e, a, i, o, n, r, l, p, c, d, m, u, y, g, f = this.particles,
                v = this.mouse,
                b = this.gravity,
                M = this._symbols,
                x = this._symbols.length,
                _ = this._symbols.size,
                w = .5 * this._symbols.size,
                I = t.canvas.width,
                $ = t.canvas.height;
            if(s = Math.min(.005 * (v.speedX * v.speedX + v.speedY * v.speedY), 1), f.length < h)
                for(e = .5 + 4.5 * s, a = .1 + .5 * s, i = .5 + .5 * s, y = (3 * Math.random() | 0) + (20 * s | 0), u = 0; y > u; u++) this._createParticle(a, e, i);
            for(p = .5 * -I, c = 1.5 * I, d = .5 * -$, m = 1.5 * $, u = 0, y = f.length; y > u; u++) g = f[u], g.vx += .03 * v.speedX * s, g.vy += .03 * v.speedY * s + b, g.x += g.vx + v.speedX, g.y += g.vy + v.speedY, g.scale -= .005, g.angle += Math.random(), g.x + w < p || g.x - w > c || g.y + w < d || g.y - w > m || g.scale <= 0 ? (this._pool.push(g), f.splice(u, 1), y--, u--) : (l = g.scale, o = M[x * Math.random() | 0], Math.random() < .7 && (l *= .2), n = _ * l, r = .5 * n, t.save(), t.globalCompositeOperation = "lighter", t.translate(g.x, g.y), t.rotate(g.angle), t.drawImage(o, 0, 0, _, _, -r, -r, n, n), t.restore());
            t.fill(), v.speedX = v.speedY = 0
        },
        _createParticle: function(t, s, e) {
            var i = t + (s - t) * Math.random(),
                o = 2 * Math.PI * Math.random(),
                h = this._pool.length ? this._pool.shift() : new a;
            h.init(this.mouse.x, this.mouse.y, i * Math.cos(o), i * Math.sin(o), e * Math.random(), 2 * Math.PI * Math.random()), this.particles.push(h)
        }
    }, s.prototype = {
        x: 0,
        y: 0,
        speedX: 0,
        speedY: 0,
        update: function(t, s) {
            this.speedX = .7 * (this.x - t), this.speedY = .7 * (this.y - s), this.x = t, this.y = s
        }
    }, e.prototype = [], e.prototype._createSymbol = function(t, s, e) {
        var a, o, h = this.size,
            n = this.size / 2,
            r = this.color;
        a = document.createElement("canvas"), a.width = a.height = h, o = a.getContext("2d"), o.fillStyle = i(r[0], r[1], r[2], r[3], r[4]), o.shadowBlur = e, o.shadowColor = i(r[0], r[1], r[2], r[3], .75 * r[4]);
        var l, p, c, d;
        for(o.beginPath(), l = 1, p = 2 * t; p >= l; l++) c = l % 2 ? .1 * s : s, d = 2 * Math.PI * l / p, o[1 === l ? "moveTo" : "lineTo"](n + c * Math.cos(d), n + c * Math.sin(d));
        return o.fill(), a
    }, a.prototype.init = function(t, s, e, a, i, o) {
        this.x = t || 0, this.y = s || 0, this.vx = e || 0, this.vy = a || 0, this.scale = i || 0, this.angle = o || 0
    };
    var n = function() {
        var t = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/,
            s = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d\.]+)\s*\)$/,
            e = /^hsl\(\s*([\d\.]+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*\)$/,
            a = /^hsla\(\s*([\d\.]+)\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)%\s*,\s*([\d\.]+)\s*\)$/,
            i = /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/;
        return function(o) {
            o = o.replace(/^\s*#|\s*$/g, ""), o = o.toLowerCase();
            var h;
            return(h = o.match(t) || o.match(s)) ? ["rgba", parseInt(h[1], 10), parseInt(h[2], 10), parseInt(h[3], 10), parseFloat(4 === h.length ? 1 : h[4])] : (h = o.match(e) || o.match(a)) ? ["hsla", parseFloat(h[1]), parseFloat(h[2]), parseFloat(h[3]), parseFloat(4 === h.length ? 1 : h[4])] : (3 === o.length && (o = o.replace(/(.)/g, "$1$1")), (h = o.match(i)) ? ["rgba", parseInt(h[1], 16), parseInt(h[2], 16), parseInt(h[3], 16), 1] : null)
        }
    }();
    return t
}();;
var Index = function() {
    var h = function() {
        return /(msie|trident)/.test(navigator.userAgent.toLowerCase())
    };
    if(!document.createElement("canvas").getContext || h()) return void $("canvas").remove();
    var v = new Stage("stage1"),
        m = new Twinkle("#fff", 14, 1);
    m.mouse.update(0, 0), $(window).on("mousemove", function(e) {
        m.mouse.update(e.clientX, e.clientY)
    }), v.onUpdate(function(e) {
        m.render(e)
    }), v.update(); 
}();
</script>
 
就搞定啦!!

给页面添加Canvas鼠标光标星星跟随动画特效的更多相关文章

  1. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  2. Canvas 3D球形文字云动画特效

    Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器 ...

  3. 10种canvas鼠标光标动画特效

    来源:http://www.sucaihuo.com/js/1780.html demo:http://www.sucaihuo.com/jquery/17/1780/demo/

  4. CSS3鼠标悬停8种动画特效

    在线演示 本地下载

  5. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  6. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  7. javascript实现页面右侧在线客服始终跟随鼠标滚动而上下滚动且始终位于屏幕中间

    效果如图,右侧的联系一栏始终位于页面的中间位置,且随着页面的上下滚动而滚动跟随 css的话没什么好说的,看图 代码 window.onload=window.onresize=window.onscr ...

  8. 设置鼠标光标与页面favicon

    鼠标光标 body{cursor: url('http://image.XXXX.com/ii.png'),default;} 2. favicon <link rel="shortc ...

  9. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

随机推荐

  1. For Update 加锁分析

    MySQL InnoDB 锁 - For Update 加锁分析: 1. InnoDB锁 简单介绍 2. 当前读加锁分析:REPEATABLE-READ 可重复读.READ-COMMITTED 读已提 ...

  2. dubbo框架的使用方法。。。

    图解. 一.dubbo使用须知. 1.所有的service层必须要使用service注解(之前用的spring框架的,现在用dubbo框架所提供的@Service注解) // @Service(tim ...

  3. TensorFlow 入门 | iBooker·ApacheCN

    原文:Getting Started with TensorFlow 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 不要担心自己的形象,只关心如何实现目标.--<原则>,生活原 ...

  4. oeasy教您玩转python - 006 - # hello world

    ​ Hello World! 回忆上次内容 python3 的程序是一个 5.3M 的可执行文件 python3 里面全都是 cpu 指令 可以执行的那种指令 我们可以把指令对应的汇编找到 objdu ...

  5. 【XR-2】伤痕

    不难发现,直接漫无目的地构造不是一个好的选择,因为我们并不知道选择四座城市方案的上界是什么,因此下面可以来先分析一下这个方案的上界. 首先可以考虑这使得这四个点的导出子图是强连通的方案数,但是经过尝试 ...

  6. STL priority_queue 优先队列 小记

    今天做题发现一个很有趣的地方,竟然还是头一次发现,唉,还是太菜了. 做图论用STL里的priority_queue去优化prim,由于特殊需求,我需要记录生成树中是用的哪些边. 于是,我定义的优先队列 ...

  7. AndroidStudio项目提交到github最详细步骤【转】

    感谢大佬:https://www.cnblogs.com/imqsl/p/6763133.html 在使用studio开发的项目过程中有时候我们想将项目发布到github上,以前都是用一种比较麻烦的方 ...

  8. IOS开发之----常用函数和常数--秀清

    介绍一下Objective-c常用的函数,常数变量 算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = ...

  9. Socket和数据库的一些使用---郭雪彬

    最近偶尔有时间,研究了下Socket的使用,虽然不简单,不过还是挺有意思,刚好咱们带头大哥需要我们发檄文,也罢,那就来一篇,废话不多说,直接入正题 struct sockaddr_in server_ ...

  10. c++ 堆栈和内存管理

    stack(栈),heap(堆) Stack:是存在于某作用域(scope)的一个内存空间(memory space).例如当你调用函数,函数本身即会形成一个stack用来放置它所接收的参数,返回地址 ...