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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PHP操作xml代码
2010/06/17 PHP
PHP 代码规范小结
2012/03/08 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
深入浅析python定时杀进程
2016/06/06 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python斐波那契数列的计算方法
2018/09/27 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python chardet库识别编码原理解析
2020/02/18 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
幼儿园国庆节活动方案
2014/02/01 职场文书
自我评价的范文
2014/02/02 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
MySQL创建管理子分区
2022/04/13 MySQL
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技