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 相关文章推荐
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 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加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
js图片处理示例代码
2014/05/12 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
人事档案接收函
2014/01/12 职场文书
面试后的感谢信范文
2014/02/01 职场文书
食品安全承诺书
2014/05/22 职场文书
运动会班级口号
2014/06/09 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android