jquery实现三十种鼠标悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:jquery实现三十种鼠标悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } a { color: #999; text-decoration: none; } li { list-style: none; } body { background-color: #222222; } .xs_ul { width: 1072px; margin: 100px auto 0; font-size: 0; line-height: 0; } .xs_ul li { display: inline-block; font-size: 20px; line-height: 20px; background: #fff; margin: 20px; } .xs_ul li a { display: block; width: 76px; text-align: center; padding: 15px 30px; border: 1px solid #000; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> (function() { function b(t, u, s) { this.t = t; this.u = u; this.c = s.color; this.m1(); }; b.prototype = { m1: function() { var t = this; t.d = false; if (t.t.css('position') != 'fixed' && t.t.css('position') != 'absolute') { t.t.css('position', 'relative'); } t.w = t.t.width(); t.h = t.t.height(); t.t.children().each(function() { if ($(this).css('position') != 'fixed' && $(this).css('position') != 'absolute') { $(this).css({ 'position': 'relative', 'z-index': '2' }); } else if (parseInt($(this).css('z-index')) < 2) { $(this).css({ 'z-index': '2' }); } }); if (t.t.css('background-color') != "rgba(0, 0, 0, 0)") { t.bc = t.t.css('background-color'); } else { t.bc = '#ffffff'; } t.t.append('<canvas width="'+t.w+'" height="'+t.h+'" style="position:absolute; top:0; left:0; z-index:1;"></canvas>'); t.ctx = t.t.children('canvas')[0].getContext('2d'); if (t.c === false) { t.t.mouseenter(function() { t.c = 'hsl('+(Math.random()*360)+',60%,80%)'; t.ctx.fillStyle = t.c; }); } else { t.ctx.fillStyle = t.c; }; t.t.mousemove(function(e) { t.x = e.pageX - t.t.offset().left-parseInt(t.t.css('border-left-width')); t.y = e.pageY - t.t.offset().top-parseInt(t.t.css('border-top-width')); }); t.a = []; t.t.mouseenter(function(e) { t.f = true; t.x = e.pageX - t.t.offset().left-parseInt(t.t.css('border-left-width')); t.y = e.pageY - t.t.offset().top-parseInt(t.t.css('border-top-width')); t.n1(); }); t.t.mouseleave(function() { t.f = false; }); t.ctx.clearRect(0, 0, t.w, t.h); }, n1: function() { var t = this; if (t.u <= 0) { console.warn('请注意,没有第'+t.u+'个效果!!'); return false; } if (t.u <= 10) { if (t.u == 1) { if (t.a.length == 0) { t.x1(t); } } else if (t.u == 2) { if (t.a.length == 0) { for (var i = 0; i < t.w/2; i++) { t.a[i] = { y: t.h }; } } if (!t.d) { t.d = true; t.x2(t); } } else if (t.u == 3) { if (t.a.length == 0) { t.x3(t); } } else if (t.u == 4) { if (t.a.length == 0) { for (var i = 0; i < t.h/5; i++) { if (i%2) { t.a[i] = { x: t.w, y: 5*i, w: t.w, h: 5 }; } else { t.a[i] = { x: -t.w, y: 5*i, w: t.w, h: 5 }; } } } if (!t.d) { t.d = true; t.x4(t); } } else if (t.u == 5) { if (t.a.length == 0) { t.x5(t); } } else if (t.u == 6) { if (t.a.length == 0) { t.x6(t); } } else if (t.u == 7) { if (t.a.length == 0) { t.x7(t); } } else if (t.u == 8) { if (t.a.length == 0) { t.x8(t); } } else if (t.u == 9) { if (t.a.length == 0) { t.x9(t); } } else if (t.u == 10) { if (t.a.length == 0) { t.x10(t); } } } else if (t.u <= 20) { if (t.u == 11) { if (t.a.length == 0) { t.x11(t); } } else if (t.u == 12) { if (t.a.length == 0) { t.x12(t); } } else if (t.u == 13) { t.o = 1; if (t.a.length == 0) { for (var i = 0; i < 4; i++) { t.a[i] = { x: t.w/2, y: t.h/2, c: t.c }; } t.m = 0; t.z = Math.sqrt(Math.pow(t.w/2, 2)+Math.pow(t.h/2, 2)); t.a[0].x1 = t.w/2 - t.z; t.a[0].y1 = t.h/2; t.a[1].x1 = t.w/2 + t.z; t.a[1].y1 = t.h/2; t.a[2].x1 = t.w/2; t.a[2].y1 = t.h/2 + t.z; t.a[3].x1 = t.w/2; t.a[3].y1 = t.h/2 - t.z; } if (!t.d) { t.d = true; t.x13(t); } } else if (t.u == 14) { if (t.a.length == 0) { t.z = Math.ceil(t.h/3); t.zx = t.w/20; t.zy = t.z/10; t.a[0] = { x: 0, y: -t.z, w: t.w, h: t.z }; t.a[1] = { x: 0, y: t.h, w: t.w, h: t.z }; t.a[2] = { x: -t.w, y: t.z, w: t.w, h: t.z }; t.a[3] = { x: t.w, y: t.z, w: t.w, h: t.z }; } if (!t.d) { t.d = true; t.x14(t); } } else if (t.u == 15) { if (t.a.length == 0) { for (var i = 0; i < t.w/2; i++) { t.a[i] = { x: i*2, y: t.h, w: 2, h: t.h }; } } if (!t.d) { t.z = 0; t.d = true; t.x15(t); } } else if (t.u == 16) { if (t.a.length == 0) { t.zx = t.w/20; t.zy = t.h/20; if (Math.random() < .5) { if (Math.random() < .5) { t.a[0] = { x: 0, y: 0, w: 0, h: 0 }; } else { t.a[0] = { x: t.w, y: 0, w: 0, h: 0 }; } } else { if (Math.random() < .5) { t.a[0] = { x: 0, y: t.h, w: 0, h: 0 }; } else { t.a[0] = { x: t.w, y: t.h, w: 0, h: 0 }; } } } if (!t.d) { t.d = true; t.x16(t); } } else if (t.u == 17) { if (t.a.length == 0) { for (var i = 0; i < 11; i++) { t.a[i] = {}; t.a[i].x = i/10*t.w; if (i%2) { t.a[i].y = 5; } else { t.a[i].y = t.h-5; } } t.a1 = -t.h; t.a2 = t.h; } if (!t.d) { t.d = true; t.x17(t); } } else if (t.u == 18) { if (t.a.length == 0) { t.ar = t.w < t.h?t.w/4: t.h/4; t.z = Math.random()*Math.PI*2; t.ax = Math.cos(t.z)*t.ar/2; t.ay = Math.sin(t.z)*t.ar/2; t.a = [Math.random()*(t.w-t.ar*2)+t.ar, Math.random()*(t.h-t.ar*2)+t.ar, t.ax, t.ay, t.ar]; } if (!t.d) { t.d = true; t.x18(t); } } else if (t.u == 19) { if (t.a.length == 0) { t.zx = t.w/20; t.zy = t.h/40; t.a = [-t.w, (t.h/2)-1, t.w, 2]; } if (!t.d) { t.d = true; t.x19(t); } } else if (t.u == 20) { if (t.a.length == 0) { t.z = Math.sqrt(Math.pow(t.w/2, 2)+Math.pow(t.h/2, 2)); t.a = [t.w/2, t.h/2, 1]; } if (!t.d) { t.d = true; t.x20(t); } } } else if (t.u <= 30) { if (t.u == 21) { t.o = 1; if (t.a.length == 0) { t.x21(t); } } else if (t.u == 22) { if (t.a.length == 0) { t.zx = t.w/40; t.zy = t.h/40; t.z = 18*Math.PI/180; t.a = [t.w/2, t.h/2, 0, 0, 0]; } if (!t.d) { t.d = true; t.x22(t); } } else if (t.u == 23) { if (t.a.length == 0) { for (var i = 0; i < 10; i++) { t.a[i] = { x: Math.floor(i*t.w/10), y: -t.h, w: Math.ceil(t.w/10), h: t.h }; } } if (!t.d) { t.d = true; t.x23(t); } } else if (t.u == 24) { t.z = 0; if (t.a.length == 0) { for (var i = 1; i < t.w; i += 4) { for (var j = 1; j < t.h; j += 4) { t.a.push({ x: i, y: j, w: 3, h: 3 }); } } } if (!t.d) { t.d = true; t.x24(t); } } else if (t.u == 25) { if (t.a.length == 0) { t.z0 = -90; t.z1 = 90; t.a[0] = { x: 0, y: 0, w: t.w, h: Math.ceil(t.h/2)}; t.a[1] = { x: 0, y: Math.ceil(t.h/2), w: t.w, h: Math.ceil(t.h/2)}; } if (!t.d) { t.d = true; t.x25(t); } } else if (t.u == 26) { if (t.a.length == 0) { t.z = t.h/40; for (var i = 0; i < 20; i++) { t.a[i] = { x: i*t.w/20, y: t.h/2, w: Math.ceil(t.w/20)+1, h: 0 }; } } if (!t.d) { t.d = true; t.x26(t); } } else if (t.u == 27) { if (t.a.length == 0) { t.zx = t.w/40; t.zy = t.h/40; t.o = 1; t.z = 1; t.a = [t.w/2, t.h/2, 0, 0]; } if (!t.d) { t.d = true; t.x27(t); } } else if (t.u == 28) { if (t.a.length == 0) { t.o = 1; t.a1 = []; for (var i = 0; i < t.w/2; i++) { t.a[i] = { x: i*2, y: -t.h, w: 2, h: t.h, t: false }; t.a1.push(i); } } if (!t.d) { t.d = true; t.x28(t); } } else if (t.u == 29) { if (t.a.length == 0) { t.a1 = []; for (var i = 0; i < t.w/10; i++) { t.a[i] = { x: i*10, y: -t.h, w: 5, h: t.h }; } for (var j = 0; j < t.h/10; j++) { t.a1[j] = { x: -t.w, y: j*10, w: t.w, h: 5 }; } } if (!t.d) { t.d = true; t.x29(t); } } else if (t.u == 30) { if (t.a.length == 0) { t.z = Math.sqrt(Math.pow(t.w/2, 2)+Math.pow(t.h/2, 2)); t.a = [t.w/2, t.h/2, t.z, -90]; } if (!t.d) { t.d = true; t.x30(t); } } } else { console.warn('请注意,没有第'+t.u+'个效果!!'); } }, x1: function(t) { if (t.f) { t.a.push({ x: t.x, y: t.y, r: 2, o: 1, c: t.c }); } t.ctx.clearRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.beginPath(); t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2); t.ctx.closePath(); t.ctx.globalAlpha = t.a[i].o; t.ctx.fillStyle = t.a[i].c; t.ctx.fill(); t.a[i].o -= .02; t.a[i].r += 1; if (t.a[i].o <= 0) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x1(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x2: function(t) { t.ctx.clearRect(0, 0, t.w, t.h); t.q = false; t.ctx.fillStyle = t.c; for (var i = 0; i < t.a.length; i++) { if (t.h != t.y) { t.a[i].h = t.h-t.y; for (var j = 0; j < Math.ceil(Math.abs(t.x-(i*2+1))/2)-1; j++) { t.a[i].h *= 5/6; } t.a[i].h = t.h - t.a[i].h; } else { t.a[i].h = t.h; } if (t.f) { if (t.a[i].h - t.a[i].y < 0) { t.a[i].y += Math.floor((t.a[i].h-t.a[i].y)/14); } else { t.a[i].y += Math.ceil((t.a[i].h-t.a[i].y)/14); }; } else { t.a[i].y += Math.ceil((t.h-t.a[i].y)/14); }; t.ctx.fillRect(i*2, t.a[i].y, 2, t.h*2); if (t.a[i].y < t.h) { t.q = true; } } t.ctx.globalAlpha = 1; if (t.f || t.q) { requestAnimationFrame(function() { t.x2(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); t.d = false; } }, x3: function(t) { if (t.f) { if (Math.random() <= 0.5) { if (Math.random() <= 0.5) { t.ran = parseInt(Math.random()*t.w); if (Math.random() <= 0.5) { t.a.push({ x1: t.ran, y1: -2, x2: t.x-((t.ran-t.x)*(t.h-t.y))/t.y, y2: t.h+2, o: 1, c: t.c }); } else { t.a.push({ x1: t.ran, y1: t.h+2, x2: t.x-((t.ran-t.x)*t.y)/(t.h-t.y), y2: -2, o: 1, c: t.c }); } } else { t.ran = parseInt(Math.random()*t.h); if (Math.random() <= 0.5) { t.a.push({ y1: t.ran, x1: -2, y2: t.y-((t.ran-t.y)*(t.w-t.x))/t.x, x2: t.w+2, o: 1, c: t.c }); } else { t.a.push({ y1: t.ran, x1: t.w+2, y2: t.y-((t.ran-t.y)*t.x)/(t.w-t.x), x2: -2, o: 1, c: t.c }); } } } } t.ctx.clearRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.beginPath(); t.ctx.moveTo(t.a[i].x1, t.a[i].y1); t.ctx.lineTo(t.a[i].x2, t.a[i].y2); t.ctx.closePath(); t.ctx.globalAlpha = t.a[i].o; t.ctx.strokeStyle = t.a[i].c; t.ctx.lineWidth = 2; t.ctx.stroke(); t.a[i].o -= .01; if (t.a[i].o <= 0) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x3(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x4: function(t) { t.ctx.clearRect(0, 0, t.w, t.h); t.ctx.fillStyle = t.c; for (var i = 0; i < t.a.length; i++) { if (t.f) { if (t.a[i].x > 0) { t.a[i].x -= Math.ceil(t.a[i].x/14); } else if (t.a[i].x < 0) { t.a[i].x -= Math.floor(t.a[i].x/14); } } else { if (i%2) { t.a[i].x -= Math.floor((t.a[i].x-t.w)/14); } else { t.a[i].x -= Math.ceil((t.a[i].x+t.w)/14); } }; t.ctx.fillRect(t.a[i].x, t.a[i].y, t.a[i].w, t.a[i].h); } t.ctx.globalAlpha = 1; if (t.f || t.a[0].x>-t.w) { requestAnimationFrame(function() { t.x4(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); t.d = false; } }, x5: function(t) { if (t.f) { t.a.push({ x: t.x, y: t.y, r: 10, o: 1, c: t.c, xv: (Math.random()-0.5)*5, yv: Math.random()*3+3 }); } t.ctx.clearRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.globalAlpha = t.a[i].o; t.ctx.fillStyle = t.a[i].c; t.ctx.fillRect(t.a[i].x, t.a[i].y, t.a[i].r, t.a[i].r); t.a[i].o -= .03; t.a[i].yv -= .5; t.a[i].xv -= t.a[i].xv/20; t.a[i].x -= t.a[i].xv; t.a[i].y -= t.a[i].yv; if (t.a[i].o <= 0 || t.a[i].y >= t.h) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x5(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x6: function(t) { if (t.f && Math.random() < .5) { t.a.push({ x: t.w*Math.random(), y: t.h*Math.random(), r: 1, o: 1, c: t.c }); } t.ctx.clearRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.beginPath(); t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2); t.ctx.closePath(); t.ctx.globalAlpha = t.a[i].o; t.ctx.fillStyle = t.a[i].c; t.ctx.fill(); t.a[i].o -= .025; t.a[i].r += .4; if (t.a[i].o <= 0) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x6(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x7: function(t) { if (t.f) { t.tan = Math.random()*2+1; t.a.push({ x: t.w*Math.random(), y: -t.tan, r: t.tan, c: t.c }); } t.ctx.globalAlpha = 0.3; t.ctx.fillStyle = t.bc; t.ctx.fillRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.beginPath(); t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2); t.ctx.closePath(); t.ctx.fillStyle = t.a[i].c; t.ctx.fill(); t.a[i].x += (t.x-t.w/2)/(t.w/2)*(t.a[i].r-0.7); if (t.a[i].x<-t.a[i].r) { t.a[i].x = t.w+t.a[i].r; } else if (t.a[i].x > t.w+t.a[i].r) { t.a[i].x=-t.a[i].r; } t.a[i].y += t.a[i].r-0.7; if (t.a[i].y >= t.h+t.a[i].r) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x7(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x8: function(t) { if (t.f) { t.tan = Math.random()*2+1; t.a.push({ x: t.w*Math.random(), y: t.tan+t.h, r: t.tan, c: t.c }); } t.ctx.globalAlpha = 0.3; t.ctx.fillStyle = t.bc; t.ctx.fillRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.beginPath(); t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2); t.ctx.closePath(); t.ctx.fillStyle = t.a[i].c; t.ctx.fill(); t.a[i].x += (Math.random()-0.5)*2; t.a[i].y -= 1; if (t.a[i].y<=-t.a[i].r) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x8(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x9: function(t) { if (t.f) { t.tan = Math.random()*3+1; t.a.push({ x: Math.random()*t.w, y: Math.random()*t.h, r: t.tan, c: t.c, o: 1 }); } t.ctx.globalAlpha = 0.3; t.ctx.fillStyle = t.bc; t.ctx.fillRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.beginPath(); t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2); t.ctx.closePath(); t.ctx.fillStyle = t.a[i].c; t.ctx.globalAlpha = t.a[i].o; t.ctx.fill(); t.a[i].x += Math.cos(Math.random()*Math.PI*2); t.a[i].y += Math.sin(Math.random()*Math.PI*2); t.a[i].o -= 0.01; /*if(t.a[i].y>t.a[i].r+t.h || t.a[i].y<-t.a[i].r || t.a[i].x<-t.a[i].r || t.a[i].x > t.a[i].r+t.w){ t.a.splice(i,1); i--; }*/ if (t.a[i].o <= 0) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x9(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x10: function(t) { if (t.f) { t.tan = Math.random()*3+1; t.tan2 = Math.random()*Math.PI*2; t.a.push({ x: Math.random()*t.w, y: Math.random()*t.h, r: t.tan, c: t.c, t: t.tan2 }); } t.ctx.globalAlpha = 0.3; t.ctx.fillStyle = t.bc; t.ctx.fillRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.beginPath(); t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2); t.ctx.closePath(); t.ctx.fillStyle = t.a[i].c; t.ctx.fill(); t.a[i].x += Math.cos(t.a[i].t); t.a[i].y += Math.sin(t.a[i].t); if (t.a[i].y > t.a[i].r+t.h || t.a[i].y<-t.a[i].r || t.a[i].x<-t.a[i].r || t.a[i].x > t.a[i].r+t.w) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x10(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x11: function(t) { if (t.f) { t.tan = Math.random()*3+1; t.tan2 = Math.random()*Math.PI*2; t.a.push({ x: t.x, y: t.y, r: t.tan, c: t.c, t: t.tan2 }); } t.ctx.globalAlpha = 0.3; t.ctx.fillStyle = t.bc; t.ctx.fillRect(0, 0, t.w, t.h); for (var i = 0; i < t.a.length; i++) { t.ctx.beginPath(); t.ctx.arc(t.a[i].x, t.a[i].y, t.a[i].r, 0, Math.PI*2); t.ctx.closePath(); t.ctx.fillStyle = t.a[i].c; t.ctx.fill(); t.a[i].x += Math.cos(t.a[i].t); t.a[i].y += Math.sin(t.a[i].t); if (t.a[i].y > t.a[i].r+t.h || t.a[i].y<-t.a[i].r || t.a[i].x<-t.a[i].r || t.a[i].x > t.a[i].r+t.w) { t.a.splice(i, 1); i--; } } t.ctx.globalAlpha = 1; if (t.f || t.a.length > 0) { requestAnimationFrame(function() { t.x11(t); }); } else { t.ctx.clearRect(0, 0, t.w, t.h); } }, x12: function(t) { if (t.f) { t.tan = Math.random()*3+4; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0