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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 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
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
初识javascript 文档碎片
2010/07/13 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python实现截屏的函数
2015/07/26 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
"引用"与多态的关系
2013/02/01 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
年会搞笑主持词
2014/03/27 职场文书
保证书格式范文
2014/04/28 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
招标保密承诺书
2015/01/20 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电