当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery实现炫酷的鼠标轨迹特效

jQuery实现炫酷的鼠标轨迹特效

2019年03月31日  | 移动技术网IT编程  | 我要评论

jquery实现炫酷的鼠标轨迹特效，代码：

代码如下:


<!doctype html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>jquery实现炫酷的鼠标轨迹特效</title><base target="_blank" />
<script type="text/javascript"> window.onload = function () {
c = math.cos; s = math.sin; u = 0; w = window; j = document; d = j.getelementbyid("kele"+"yi_com"); c = d.getcontext("2d"); w = d.width = w.innerwidth; h = d.height = w.innerheight; c.fillrect(0, 0, w, h); c.globalcompositeoperation = "lighter"; c.linewidth = 0.2; c.linecap = "round"; var bool = 0, t = 0; d.onmousemove = function (e) {
if (window.t) {
if (d == 9) { d = math.random() * 15; f(1); }
cleartimeout(t);
}
x = e.pagex; y = e.pagey; a = 0; b = 0; a = x, b = y; r = (e.pagex / w * 999 >> 0) / 999; r = (e.pagey / h * 999 >> 0) / 999; u = e.pagex / h * 360 >> 0; d = 9; g = 360 * math.pi / 180; t = setinterval(f = function (e) {
c.save(); c.globalcompositeoperation = "source-over"; if (e != 1) { c.fillstyle = "rgba(0,0,0,0.02)"; c.fillrect(0, 0, w, h); }
c.restore(); i = 25; while (i--) {
c.beginpath(); if (d > 450 || bool) {
if (!bool) { bool = 1; }
if (d < 0.1) { bool = 0; }
t -= g; d -= 0.1;
}
if (!bool) { t += g; d += 0.1; }
q = (r / r - 1) * t; x = (r - r) * c(t) + d * c(q) + (a + (x - a) * (i / 25)) + (r - r); y = (r - r) * s(t) - d * s(q) + (b + (y - b) * (i / 25)); if (a) { c.moveto(a, b); c.lineto(x, y) }
c.strokestyle = "hsla(" + (u % 360) + ",100%,50%,0.75)"; c.stroke(); a = x; b = y;
}
u -= 0.5; a = x; b = y;
}, 16);
}
j.onkeydown = function (e) { a = b = 0; r += 0.05 }
d.onmousemove({ pagex: 300, pagey: 290 })
}</script>
<style>body{margin:0;overflow:hidden}p{padding:1px 5px;background:#333;position:absolute;z-index:2;color:#555;font-family:arial}a{color:#ccf}a:hover{color:red}</style>
</head>
<body>
<p id="text"></p>
<canvas id="keleyi_com"></canvas>
</body>
</html>

以上就是本文的内容了，希望小伙伴们喜欢此特效，快过年了，给自己的个人主页增添些色彩吧。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网