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


Posted in Javascript onFebruary 01, 2015

代码:

<!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>

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

Javascript 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 #Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 #Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 #Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 #Javascript
JavaScript插件化开发教程(六)
Feb 01 #Javascript
JavaScript插件化开发教程(五)
Feb 01 #Javascript
对JavaScript中this指针的新理解分享
Jan 31 #Javascript
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP+DBM的同学录程序(1)
2006/10/09 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
使用javascript为网页增加夜间模式
2014/01/26 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python 判断网络连通的实现方法
2018/04/22 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Jupyter加载文件的实现方法
2020/04/14 Python
python获取整个网页源码的方法
2020/08/03 Python
浅析Python 责任链设计模式
2020/09/11 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
自我鉴定 电子商务专业
2014/01/30 职场文书
超市理货员岗位职责
2014/07/04 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
2014年纠风工作总结
2014/12/08 职场文书
环境卫生整治简报
2015/07/20 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang