HTML

<canvas id=canvas></canvas>

CSS

* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
canvas {
cursor: none;
}

JS

window.onload = function() {

    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); var pi = Math.PI; var centerX, centerY;
var part_num = 2000; var mousedown = false;
var X, Y;
/*===========================================================================*/ /*===========================================================================*/
var P = [];
var part = function(x, y, vx, vy, r, red, green, blue, alpha, col) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.r = r;
this.red = red;
this.green = green;
this.blue = blue;
this.alpha = alpha;
this.col = col;
}; function rand(min, max) {
return Math.random() * (max - min) + min;
} function dist(dx, dy) {
return Math.sqrt(dx * dx + dy * dy);
} function size() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight; centerX = canvas.width / 2;
centerY = canvas.height / 2;
}
size();
X = centerX;
Y = centerY; function init() {
var x, y, vx, vy, r, red, green, blue, alpha, col;
for (var i = 0; i < part_num; i++) {
x = rand(0, canvas.width);
y = rand(0, canvas.height);
vx = rand(-1, 1);
vy = rand(-1, 1);
r = rand(1, 3);
red = Math.round(rand(150, 200));
green = Math.round(rand(100, 255));
blue = Math.round(rand(180, 255));
alpha = 1;
col = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")"; P.push(new part(x, y, vx, vy, r, red, green, blue, alpha, col));
}
} function bg() {
ctx.fillStyle = "rgba(25,25,30,1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//ctx.clearRect(0, 0, canvas.width, canvas.height);
} function bounce(b) { if (b.x < b.r) {
b.x = b.r;
b.vx *= -1;
}
if (b.x > canvas.width - b.r) {
b.x = canvas.width - b.r;
b.vx *= -1;
} if (b.y - b.r < 0) {
b.y = b.r;
b.vy *= -1;
}
if (b.y > canvas.height - b.r) {
b.y = canvas.height - b.r;
b.vy *= -1;
}
} function attract(p) { var dx = (p.x - X),
dy = (p.y - Y),
dist = Math.sqrt(dx * dx + dy * dy),
angle = Math.atan2(dy, dx); if (dist > 10 && dist < 300) {
if (!mousedown) {
p.vx -= (20 / (p.r * dist)) * Math.cos(angle);
p.vy -= (20 / (p.r * dist)) * Math.sin(angle);
} else if (mousedown) {
p.vx += (250 / (p.r * dist)) * Math.cos(angle);
p.vy += (250 / (p.r * dist)) * Math.sin(angle);
}
} } function draw() {
var p;
for (var i = 0; i < P.length; i++) {
p = P[i]; if (mouseover) attract(p);
bounce(p); p.x += p.vx;
p.y += p.vy; p.vx *= .975;
p.vy *= .975; ctx.fillStyle = p.col;
ctx.fillRect(p.x, p.y, p.r, p.r);
//ctx.beginPath();
//ctx.fillStyle = p.col;
//ctx.arc(p.x, p.y, p.r, 0, 2 * pi);
//ctx.fill(); }
ctx.strokeStyle = (!mousedown) ? "rgba(255,255,255,1)" : "rgba(255,0,0,1)"; ctx.beginPath();
ctx.moveTo(X, Y - 10);
ctx.lineTo(X, Y + 10);
ctx.moveTo(X - 10, Y);
ctx.lineTo(X + 10, Y);
ctx.stroke(); } function loop() {
bg();
draw(); window.requestAnimationFrame(loop);
} window.onresize = size; window.onmousemove = function(e) {
X = e.clientX;
Y = e.clientY;
} window.onmousedown = function() {
mousedown = true;
} window.onmouseup = function() {
mousedown = false;
} var mouseover = false; window.onmouseover = function() {
mouseover = true;
} window.onmouseout = function() {
mouseover = false;
} init();
loop();
}

JS鼠标吸粉特效的更多相关文章

  1. js鼠标点击特效,有关参数设置

    效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击 ...

  2. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  3. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  4. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  5. cnblogs鼠标点击特效

    喜大普奔! 伸手党福利 ! 创建mouse.js文件, 上传到博客, 直接引用即可, 内容如下: (function(window, document, undefined) { var hearts ...

  6. JS网站图集相册特效

    JS网站图集相册特效是一款可以直接使用鼠标进行前后导航,也可以通过缩略图来切换图片. 在线演示本地下载

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

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

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

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

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

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

随机推荐

  1. Java底层技术系列文章-线程池框架

    一.线程池结构图    二.示例 定义线程接口 public class MyThread extends Thread { @Override publicvoid run() { System.o ...

  2. 从后端到前端之Vue(一)写个表格试试水

    目录: 1.脚本式开发. 2.工程化开发 3.工程化和脚本的区别 4.来个table试试水 4,1.目标 4.2.思路 4.3.设计与编码 4.4.效果 5.业务分离 6.功能拓展——个性化设置    ...

  3. 如何使用百度EasyDL进行情感分析

    使用百度EasyDL定制化训练和服务平台有一段时间了,越来越能体会到EasyDL的易用性.在此之前我也接触过不少的深度学习平台,如类脑平台.Google的GCP深度学习平台.AWS深度学习平台,但我觉 ...

  4. python函数知识四 迭代器、生成器

    15.迭代器:工具 1.可迭代对象: ​ 官方声明,只要具有__iter__方法的就是可迭代对象 list,dict,str,set,tuple -- 可迭代对象,使用灵活 #方法一: list.__ ...

  5. Ansible配置文件ansible.cfg详解

    Ansible是一个系列文章,我会尽量以通俗易懂.诙谐幽默的总结方式给大家呈现这些枯燥的知识点,让学习变的有趣一些. Ansible系列博文直达链接:Ansible入门系列 前言 此时外面小雨淅淅沥沥 ...

  6. c++小游戏——扫雷

    #include<cstdio> #include<cstring> #include<algorithm> #include<conio.h> #in ...

  7. 7月新的开始 - LayUI的基本使用 - 分页

    LayUI 分页处理 数据展示是以表格的形式展示的.使用模块如下: 首先使用内置模块-数据表格 然后使用内置模块-分页 官方文档地址:https://www.layui.com/doc/ 官方示例地址 ...

  8. AQS初体验

    AQS初体验 AQS是AbstractQueuedSynchronizer的简称.AQS提供了一种实现阻塞锁和一系列依赖FIFO等待队列的同步器的框架.所谓框架,AQS使用了模板方法的设计模式,为我们 ...

  9. ArcGIS API For JavaScript 开发(一)环境搭建

    标签:B/S结构开发,Asp.Net开发,WebGIS开发 前言:为什么写这个,一是学习:二是分享,共同进步,毕竟也是在这个园子里学到了很多: (一)环境搭建 集成开发环境:VS2013 Ultima ...

  10. Spring + RocketMQ使用

    本文所介绍环境为win7环境下运行, 从官方github中(https://github.com/alibaba/RocketMQ)下载RocketMQ-master.zip,版本为v3.5.8,解压 ...