jQuery实现炫酷的鼠标轨迹特效

代码：

代码如下:

<!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>

以上就是本文的内容了，希望小伙伴们喜欢此特效，快过年了，给自己的个人主页增添些色彩吧。

赞 (0)

相关推荐

  • jQuery实现table隔行换色和鼠标经过变色的两种方法

    一.隔行换色 复制代码 代码如下: $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: 复制代码 代码如下: $("table tr:nth-child(odd)").css("background-col

  • jquery实现鼠标滑过显示提示框的方法

    jquery实现鼠标滑过显示提示框的方法

    本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

  • Jquery的hover方法让鼠标经过li时背景变色

    Jquery的hover方法让鼠标经过li时背景变色

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery+ajax实现鼠标单击修改内容的方法

    现有表格中的一行的代码如下所示: <tr> <td><span class="catid">2</span></td> <td>公司介绍</td> <td>内部栏目</td> <td><span class="listorder" title="点击修改">2</span></td> <

  • jQuery实现单击和鼠标感应事件

    1.实现单击事件动态交替 之前我们讲到了toggleClass(),对于单击事件而言,jQuery同样提供了动态交替的toggle()方法,这个方法接受两个参数,两个参数均为监听函数,在click事件中交替使用. 例子:点击事件的动态交互. 复制代码 代码如下: <script type="text/javascript">             $(function() {                 $("#ddd").toggle(     

  • jquery实现鼠标滑过小图时显示大图的方法

    本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> </head> <style type="text/css&

  • jQuery实现跟随鼠标运动图层效果的方法

    jQuery实现跟随鼠标运动图层效果的方法

    本文实例讲述了jQuery实现跟随鼠标运动图层效果的方法.分享给大家供大家参考.具体分析如下: 一.基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图所示: 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascript大段大段的代码都用到兼容性上面了. 二.制作过程 本次实验的核心是jquery里面的mousemove事件, 鼠标移动则触发. 代码如下: 复制代

  • jQuery实现炫酷的鼠标轨迹特效

    代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现炫酷的鼠标轨迹特效</title><base target="_blank" /> <script type="text/javascript"> window.onloa

  • jquery实现炫酷的叠加层自动切换特效

    下面是HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jquery叠加页片自动切换特效 - 柯乐义</title><base target="_blank" /> <lin

  • 新年快乐! javascript实现超级炫酷的3D烟花特效

    本文实例为大家分享了javascript实现3D烟花特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta charset="utf-8"> <title>3D烟花</title> <style> html,b

  • jQuery实现鼠标点击处心形漂浮的炫酷效果示例

    jQuery实现鼠标点击处心形漂浮的炫酷效果示例

    本文实例讲述了jQuery实现鼠标点击处心形漂浮的炫酷效果.分享给大家供大家参考,具体如下: 鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图: 是不是很炫酷,直接贴代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="http://libs.baidu.c

  • 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示    源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box<

  • JS实现页面炫酷的时钟特效示例

    JS实现页面炫酷的时钟特效示例

    目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面. 特点就是炫酷,特效好,个人以心情愉快的感觉. 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉. 而且要获取到本地的时间的数据来实时更新它的变化. 二.想法设计/实现过程 秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,

  • jquery实现美观的导航菜单鼠标提示特效代码

    jquery实现美观的导航菜单鼠标提示特效代码

    本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码.分享给大家供大家参考.具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称"链接提示",鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容,提示用户到达需要的页面. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 炫酷的js手风琴效果

    炫酷的js手风琴效果

    你一定用过书签,也一定给你的书本加过书签,那么你见过书签式的导航吗? 你一定见过手风琴,也一定知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的导航吗? 如果没有,请往下看: 前面的话: 这篇博文先通过Javascript做一个简单的手风琴效果,让大家对手风琴效果有一定的了解:紧接着,我们换jquery做类似的手风琴效果.前面的两个例子都很简单,接下来要放大招了,我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果.继续回到书签问题,既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不

  • JS+canvas画布实现炫酷的旋转星空效果示例

    JS+canvas画布实现炫酷的旋转星空效果示例

    本文实例讲述了JS+canvas画布实现炫酷的旋转星空效果.分享给大家供大家参考,具体如下: canvas是html5的新标签,其画布功能尤为强大.当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性.这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项. 首先引入两个javascript脚本,一个是jquery插件,另一个是封装好的cosmos_canvas.js <script s

  • JS实现炫酷轮播图

    本文实例为大家分享了JS实现炫酷轮播图的具体代码,供大家参考,具体内容如下 效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

随机推荐