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 ui resizable bug解决方法
Oct 26 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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的开合式多级菜单程序
2006/10/09 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python实现数独算法实例
2015/06/09 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Pytorch之parameters的使用
2019/12/31 Python
使用python实现飞机大战游戏
2020/03/23 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
公司领导班子四风对照检查材料
2014/09/27 职场文书
员工升职自我评价
2019/03/26 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS