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(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
JavaScript async/await原理及实例解析
Dec 02 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中CI操作多个数据库的代码
2012/07/05 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
javascript中的window.location.search方法简介
2013/09/02 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
Jquery Datatables的使用详解
2020/01/30 jQuery
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
Python简单日志处理类分享
2015/02/14 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
django解决跨域请求的问题详解
2019/01/20 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python Tensor和Array对比分析
2020/01/08 Python
Python如何实现的二分查找算法
2020/05/27 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
技术总监的工作职责
2013/11/13 职场文书
社区工作者先进事迹
2014/01/18 职场文书
大一新生学期自我评价
2014/04/09 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
校园环保标语
2014/06/13 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书