原创力文档- 1、本文档共3页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
html5实现鼠标跟随
Html5 实现鼠标跟随，纯js代码，没有flash或者图片之类的，chrome浏览器，firefix或者ie9以上支持。代码很容易看懂
效果图：
源代码：
html
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8 /
script type=text/javascript
var data = 0;
window.onload = function() {
C = Math.cos;
S = Math.sin;
U = 0;
w = window;
j = document;
d = j.getElementById(c);
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 count = 0;
var bool = 0, t = 0; // theta
var fun = function(e) {
if (window.T) {
clearTimeout(T);
count = 0;
if (D == 9) {
D = Math.random() * 15;
f();
}
}
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;
f = function(e) {
count++;
c.save();
c.globalCompositeOperation = source-over;
if (e != 1) {
c.fillStyle = rgba(0,0,0,0.04);
c.fillRect(0, 0, W, H);
}
c.restore();
i = 25;
if (count = data) {
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%,1);
c.stroke();
a = x;
b = y;
}
}
U -= 0.5;
A = X;
B = Y;
};
T = setInterval(f, 10);
};
d.onmousemove = function(e) {
data = 2;
fun(e);
};
};
/script
/head
body
canvas id=c width=600px heig
文档评论（0）