鼠标移动添加七彩泡泡效果
来源:互联网 发布:锋利的jquery源码 编辑:程序博客网 时间:2024/05/01 11:58
查看演示
实现此效果只需要两步
一. 引入js
二 . 给哪个div实现此效果(引入实现效果的js)
1 . 下载插件(下载)
2 . 在工程引入js(路径引入正确就行,不同的框架引入方式不同,我这个是Spring boo框架t的引入方式)
3.在<div id="main"></div>这个div引入泡泡功能,则要引入js , 这个js里面的getElementById("main")要对应才能实现效果
$(document).ready(function(){function Particle(x, y, radius) {this.init(x, y, radius);}Particle.prototype = {init : function(x, y, radius) {this.alive = true;this.radius = radius || 10;this.wander = 0.15;this.theta = random(TWO_PI);this.drag = 0.92;this.color = '#fff';this.x = x || 0.0;this.y = y || 0.0;this.vx = 0.0;this.vy = 0.0;},move : function() {this.x += this.vx;this.y += this.vy;this.vx *= this.drag;this.vy *= this.drag;this.theta += random(-0.5, 0.5) * this.wander;this.vx += sin(this.theta) * 0.1;this.vy += cos(this.theta) * 0.1;this.radius *= 0.96;this.alive = this.radius > 0.5;},draw : function(ctx) {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);ctx.fillStyle = this.color;ctx.fill();}};var MAX_PARTICLES = 280;var COLOURS = [ '#0CF', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900','#FF4E50', '#F9D423' ,'green','red','blue'];var particles = [];var pool = [];var demo = Sketch.create({container : document.getElementById('main')});demo.setup = function() {var i, x, y;x = (demo.width * 0.3) + random(-100, 100);y = (demo.height * 0.3) + random(-100, 100);demo.spawn(0, 999);};demo.spawn = function(x, y) {if (particles.length >= MAX_PARTICLES)pool.push(particles.shift());particle = pool.length ? pool.pop() : new Particle();particle.init(x, y, random(5, 40));particle.wander = random(0.5, 2.0);particle.color = random(COLOURS);particle.drag = random(0.9, 0.99);theta = random(TWO_PI);force = random(2, 8);particle.vx = sin(theta) * force;particle.vy = cos(theta) * force;particles.push(particle);};demo.update = function() {var i, particle;for (i = particles.length - 1; i >= 0; i--) {particle = particles[i];if (particle.alive)particle.move();elsepool.push(particles.splice(i, 1)[0]);}};demo.draw = function() {demo.globalCompositeOperation = 'lighter';for ( var i = particles.length - 1; i >= 0; i--) {particles[i].draw(demo);}};demo.mousemove = function() {var particle, theta, force, touch, max, i, j, n;for (i = 0, n = demo.touches.length; i < n; i++) {touch = demo.touches[i], max = random(1, 4);for (j = 0; j < max; j++) {demo.spawn(touch.x, touch.y);}}};});
阅读全文
0 0
- 鼠标移动添加七彩泡泡效果
- 跟随鼠标一串效果---七彩贪吃蛇
- 鼠标移动放大镜效果
- Div鼠标移动效果
- 鼠标移动div效果:鼠标拖曳效果
- ImageButton添加鼠标效果
- 鼠标移动图片震动效果
- 小球跟随鼠标移动效果
- 小球跟随鼠标移动效果
- android mapview 泡泡效果
- 移动鼠标实现链接文本框提示效果
- 随鼠标移动的图片动态效果
- HTML一种鼠标移动列变色效果
- button控件鼠标移动CSS效果
- C# 文本框鼠标移动滑过效果
- C#文字随鼠标移动效果
- 鼠标移动图片变暗渐隐效果
- 层 ,文字跟随鼠标移动效果
- LeetCode算法题目:Sort Colors
- 虚拟机VMware 中安装CentOS 系统的方法
- 分享 xlsx转换json的强大工具(很实用)
- 动态代理
- Vue项目实战(一)——从0到1的蜕变
- 鼠标移动添加七彩泡泡效果
- LK光流法 运动检测
- Intergraph SmartPlant 3D 2016 v11.00.84.0099 1DVD
- GDB调试
- 处理不平衡数据集的八种策略
- visualVM远程监控tomcat
- hive1.2.1安装
- 运算符涉及到的数据类型转换问题
- 【OpenCV】SURF算法之视频图像实时特征点匹配