鼠标效果

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引用文件

<script src="jquery.min.js"></script>

在document中背景颜色，鼠标特效颜色各种都可以自己更改，

$(document).ready(function() {
            var canvas = document.getElementById("c");
			var ctx = canvas.getContext("2d");
			var c = $("#c");
			var x,y,w,h,cx,cy,l;
			var y = [];
			var b = {
				n:100,
				c:false,    //  颜色  如果是false 则是随机渐变颜色
				bc:'#000',   //  背景颜色
				r:0.9, 
				o:0.05,
				a:1,
				s:20,
			}
			var bx = 0,by = 0,vx = 0,vy = 0;
			var td = 0;
			var p = 0;
			var hs = 0;
			re();
			var color,color2;
			if(b.c){
				color2 = b.c;
			}else{
				color = Math.random()*360;
			}
			
			$(window).resize(function(){
				re();
			});
			var tp1=true,tp2 = false,tp3 = false,tp4 = false,tp5 = false,tp6 = false,tp7 = false,tp8 = false,tp9 = false,tp0 = false;
			function begin(){
				if(tp1){
					if(!b.c){
						color+=.1;
						color2 = 'hsl('+color+',100%,80%)';
					}
					ctx.globalAlpha = 1;
					ctx.fillStyle = b.bc;
					ctx.fillRect(0,0,w,h);
					for(var i=0;i<y.length;i++){
						ctx.globalAlpha = y[i].o;
						ctx.fillStyle = color2;
						ctx.beginPath();
						ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
						ctx.closePath();
						ctx.fill();
						y[i].r+=b.r;
						y[i].o-=b.o;
						if(y[i].o<=0){
							y.splice(i,1);
							i--;
						};
					}
				}else if(tp2){
					if(!b.c){
						color+=.1;
						color2 = 'hsl('+color+',100%,80%)';
					}
					ctx.globalAlpha = 1;
					ctx.fillStyle = b.bc;
					ctx.fillRect(0,0,w,h);
					for(var i=0;i<y.length;i++){
						ctx.globalAlpha = y[i].o;
						ctx.fillStyle = color2;
						ctx.beginPath();
						y[i].r=10;
						ctx.shadowBlur=20;
						ctx.shadowColor=color2;
						ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
						ctx.closePath();
						ctx.fill();
						ctx.shadowBlur=0;
						y[i].o-=b.o;
						y[i].v+=b.a;
						y[i].y+=y[i].v;
						if(y[i].y>=h+y[i].r || y[i].o<=0){
							y.splice(i,1);
							i--;
						};
					}