jQuery实现炫酷的鼠标轨迹特效
更新时间：2015年02月01日 10:39:57 投稿：hebedich
本文给大家分享的是一段jQuery实现炫酷的鼠标轨迹的特效代码，希望小伙伴们能够喜欢。
代码：
复制代码 代码如下:
<!DOCTYPE html>
<html xmlns="http://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}div{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>
<div id="text"></div>
<canvas id="keleyi_com"></canvas>
</body>
</html>
以上就是本文的内容了，希望小伙伴们喜欢此特效，快过年了，给自己的个人主页增添些色彩吧。
相关文章
本文给大家分享的是使用jquery实现表单验证并阻止非法提交的代码，思路非常不错，这里推荐给小伙伴们参考下。2015-07-07
本文主要介绍了JQuery实现两个下拉框数据移动，追加,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了绑定回车enter事件代码,需要的朋友可以参考下2014-05-05
jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！2009-12-12
jQuery是一个非常好用的javascript框架，我尤其喜欢它强大的选择器和链式表达式，使得我们能通过简单的语句实现复杂的功能。它还有一个重要的特点就是它的可扩展性，使得很多人都可以开发他们的插件并且分享出来2011-12-12
本节主要介绍了jquery如何批量修改标签css样式以input标签为例,需要的朋友可以参考下2014-07-07
这篇文章主要为大家介绍了jQuery实现点击按钮滚动元素功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
在上两篇文章中，我们看到每次要通过 jQuery 的原型增加共享方法的时候，都需要通过 jQuery.fn 一个个进行扩展，非常麻烦.2010-08-08
弹窗效果想必大家都有见到过吧，在本文将为大家介绍下使用juery框架来写个适合新手学习的弹窗效果2013-11-11
js制作的鼠标悬浮时产生的下拉框效果，需要的朋友可以参考下2012-10-10
最新评论