今天无意中访问到了开源社区 (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. GitHub Pages 和 Jekyll 笔记

    GitHub Pages 和 Jekyll 笔记 快速创建(使用默认的Jekyll引擎) 1. 新建仓库 新建一个空仓库, 名称为username.github.io, 其中 username 就是你 ...

  2. 日志处理logging

    前言 什么是日志?有什么作用?日志是跟踪软件运行时所发生的事件的一种方法,简单来说它可以记录某时某刻运行了什么代码,当出现问题时可以方便我们进行定位. 由python内置了一个logging模块,用户 ...

  3. C# 7.0 添加和增强的功能【基础篇】

    C# 7.0 版是与 Visual Studio 2017 一起发布. 虽然该版本继承和发展了C# 6.0,但不包含编译器即服务. 一.out 变量 以前我们使用out变量必须在使用前进行声明,C# ...

  4. SQL--Case When.. Then.. end的使用

    Case  When.. Then.. end的使用场景 当字段有不同的值,根据不同的值表示不同的内容 use [数据库名] go if exists( select * from sys.views ...

  5. jQuery $.fn.extend()方法类插件

    一.为JQuery原型扩展新的属性和方法,然后在JQuery的实例对象上调用 在 jQuery 中,我们可以使用$.fn.extend()方法来定义一个方法类插件.方法类插件就是首先你使用 jQuer ...

  6. JS中数值类型的本质

    一.JS中的数值类型 众所JS爱好友周知,JS中只有一个总的数值类型--number,它包含了整型.浮点型等数值类型.其中,浮点数的实现思想有点复杂,它把一个数拆成两部分来存储.第一部分是有效位数,也 ...

  7. java代码整洁之道

    package Day01;import org.junit.Test;import java.text.NumberFormat;import java.util.Scanner;public cl ...

  8. Optional用法与争议点

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 要说Java中什么异常最容易出现,我想NullPointerException一定当仁不让,为了解决这种null值 ...

  9. python常用库总结

    图片处理相关 # opencvy pip install opencv-python pip install opencv-contrib-python pip install matplotlib ...

  10. 这篇关于Oracle内存管理方式的介绍太棒了！我必须要转发，很全面。哈哈~

    "Oracle内存管理可分为两大类,自动内存管理和手动内存管理.其中手动内存管理又可分为自动共享内存管理,手动共享内存管理,自动PGA内存管理以及手动PGA内存管理.本文会简单的介绍不同的内 ...