今天无意中访问到了开源社区 (apiopen.top)的主界面，发现鼠标跟随的特效不错（残留轨迹），弄下来玩玩

上代码

整合后只需要两部分，导入JS依赖后，在html 添加 id 为 mouseCanvas 的 Canvas标签就行

1、HTML

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8">

        <title>测试</title>

        <!-- 引入依赖js -->

        <script src="./mouseCanvas.js"></script>

    </head>

    <body>

        <!-- 只需要一个Id为 mouseCanvas 的canvas标签 -->

        <canvas id="mouseCanvas"></canvas>

    </body>

</html>

2、js

var SCREEN_WIDTH=window.innerWidth;var SCREEN_HEIGHT=window.innerHeight;var RADIUS=70;var QUANTITY=25;var RADIUS_SCALE=1;var RADIUS_SCALE_MIN=1;var RADIUS_SCALE_MAX=1.5;var canvas;var context;var particles;var mouseX=SCREEN_WIDTH*0.5;var mouseY=SCREEN_HEIGHT*0.5;var mouseIsDown=false;function init(){canvas=document.getElementById('mouseCanvas');if(canvas&&canvas.getContext){context=canvas.getContext('2d');window.addEventListener('mousemove',documentMouseMoveHandler,false);window.addEventListener('mousedown',documentMouseDownHandler,false);window.addEventListener('mouseup',documentMouseUpHandler,false);document.addEventListener('touchstart',documentTouchStartHandler,false);document.addEventListener('touchmove',documentTouchMoveHandler,false);window.addEventListener('resize',windowResizeHandler,false);createParticles();windowResizeHandler();setInterval(loop,1000/60)}}function createParticles(){particles=[];for(var i=0;i<QUANTITY;i++){var particle={size:1,position:{x:mouseX,y:mouseY},offset:{x:0,y:0},shift:{x:mouseX,y:mouseY},speed:0.01+Math.random()*0.04,targetSize:1,fillColor:'#'+(Math.random()*0x904040+0xaaaaaa|0).toString(16),orbit:RADIUS*.5+(RADIUS*.5*Math.random())};particles.push(particle)}}function documentMouseMoveHandler(event){mouseX=event.clientX-(window.innerWidth-SCREEN_WIDTH)*.5;mouseY=event.clientY-(window.innerHeight-SCREEN_HEIGHT)*.5}function documentMouseDownHandler(event){mouseIsDown=true}function documentMouseUpHandler(event){mouseIsDown=false}function documentTouchStartHandler(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-(window.innerWidth-SCREEN_WIDTH)*.5;mouseY=event.touches[0].pageY-(window.innerHeight-SCREEN_HEIGHT)*.5}}function documentTouchMoveHandler(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-(window.innerWidth-SCREEN_WIDTH)*.5;mouseY=event.touches[0].pageY-(window.innerHeight-SCREEN_HEIGHT)*.5}}function windowResizeHandler(){SCREEN_WIDTH=window.innerWidth;SCREEN_HEIGHT=window.innerHeight;canvas.width=SCREEN_WIDTH;canvas.height=SCREEN_HEIGHT}function loop(){if(mouseIsDown){RADIUS_SCALE+=(RADIUS_SCALE_MAX-RADIUS_SCALE)*(0.02)}else{RADIUS_SCALE-=(RADIUS_SCALE-RADIUS_SCALE_MIN)*(0.02)}RADIUS_SCALE=Math.min(RADIUS_SCALE,RADIUS_SCALE_MAX);context.fillStyle='rgba(0,0,0,0.05)';context.fillRect(0,0,context.canvas.width,context.canvas.height);for(i=0,len=particles.length;i<len;i++){var particle=particles[i];var lp={x:particle.position.x,y:particle.position.y};particle.offset.x+=particle.speed;particle.offset.y+=particle.speed;particle.shift.x+=(mouseX-particle.shift.x)*(particle.speed);particle.shift.y+=(mouseY-particle.shift.y)*(particle.speed);particle.position.x=particle.shift.x+Math.cos(i+particle.offset.x)*(particle.orbit*RADIUS_SCALE);particle.position.y=particle.shift.y+Math.sin(i+particle.offset.y)*(particle.orbit*RADIUS_SCALE);particle.position.x=Math.max(Math.min(particle.position.x,SCREEN_WIDTH),0);particle.position.y=Math.max(Math.min(particle.position.y,SCREEN_HEIGHT),0);particle.size+=(particle.targetSize-particle.size)*0.01;if(Math.round(particle.size)==Math.round(particle.targetSize)){particle.targetSize=1+Math.random()*2}context.beginPath();context.fillStyle=particle.fillColor;context.strokeStyle=particle.fillColor;context.lineWidth=particle.size;context.moveTo(lp.x,lp.y);context.lineTo(particle.position.x,particle.position.y);context.stroke();context.arc(particle.position.x,particle.position.y,particle.size/2,0,Math.PI*2,true);context.fill()}}window.onload=function(){document.getElementById('mouseCanvas').style="width:100%;height:100%;position: fixed;top: 0;left: 0;z-index: -999;";document.getElementsByTagName('html')[0].style='margin:0;width:100%;height:100%;';document.getElementsByTagName('body')[0].style='margin:0;width:100%;height:100%;';init()};

效果：

js鼠标轨迹特效的更多相关文章

  1. Vue使用js鼠标蜘蛛特效

    1. 在src下新建文件夹utils,里面新建文件canvas-nest.js,将代码复制进去.(可以自己定义存放路径) !function() { function n(n, e, t) { ret ...

  2. Qt 鼠标样式特效探索样例（一）——利用时间器调用QWidget.move()函数

    Qt 鼠标样式特效探索样例(一)       心血来潮,突然想在Qt里玩一把鼠标样式,想到在浏览网页时,经常看到漂亮的鼠标动画,于是今天摸索着乱写个粗糙的demo,来满足自己的好奇心. 效果图 方案要 ...

  3. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  4. SQL Server 游标运用：鼠标轨迹字符串分割

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 游标模板(Cursor Template) 鼠标轨迹字符串分割SQL脚本实现(SQL Code ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

  7. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

  8. 案例：用JS实现放大镜特效

    案例:用JS实现放大镜特效 案例:用JS实现放大镜特效

  9. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  10. JS鼠标滚动插件scrollpath使用介绍

    JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...

随机推荐

  1. python2与python区别汇总

    目录 输入与输出 range使用区别 字符编码区别 输入与输出 python2与python3中两个关键字的区别 python2中 input方法需要用户自己提前指定数据类型 写什么类型就是什么类型 ...

  2. WindivertDotnet快速发Ping

    1 前言 WindivertDotnet是面向对象的WinDivert的dotnet异步封装,其提供如下的发送数据方法: ValueTask<int> SendAsync( WinDive ...

  3. 在IDEA中使用Maven将SpringBoot项目打成jar包、同时运行打成的jar包（前后端项目分离）

    1.maven教程官网 https://m.runoob.com/maven/ 2.理解Maven的构建生命周期(clean.Package) 3.在项目中使用maven进行打包 4.运行打包好的ja ...

  4. JWT中token的理解

    今天我们来聊一聊关于JWT授权的事情. JWT:Json Web Token.顾名思义,它是一种在Web中,使用Json来进行Token授权的方案. 既然没有找好密码,token是如何解决信任问题的呢 ...

  5. debian如何删除无效的应用图标

    1.看/usr/share/applications下是否有xxx.desktop 2.可以到-/.local/share/applications下看是否有xxx.desktop 来源:https: ...

  6. maven-入门到入土

    详情见代码重工:连接http://heavy_code_industry.gitee.io/code_heavy_industry/pro002-maven/

  7. 自动化利器 Ansible - 从了解到应用

    本文说明 本系列使用 ansible 2.9.27 版本来说明和汇总相关信息. # cat /etc/system-release Red Hat Enterprise Linux Server re ...

  8. 论文笔记 - Calibrate Before Use: Improving Few-Shot Performance of Language Models

    Motivation 无需参数更新的 In-Context Learning 允许使用者在无参数的更新的情况下完成新的下游任务,交互界面是纯粹的自然语言,无 NLP 技术基础的用户也可以创建 NLP ...

  9. C. 连锁商店（状压dp）

    C. 连锁商店 time limit per test 1 second memory limit per test 512 megabytes input standard input output ...

  10. 【OpenStack云平台】openstack命令行管理之环境变量设置

    上传镜像(glance组件) glance 可以使用以下参数: ps:这些参数不是100%都需要的我们在上传镜像更加我们需求选择相对应的参数就好了 –id <IMAGE_ID> #镜像的I ...