js磁力线代码（非压缩，自己在压缩的版本上优化了代码，易于阅读）
拿去白嫖吧：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="referrer" content="origin" /> <meta property="og:description" content="你可能在很多博客中看到类似当鼠标移动上去的时候会出现线条吸附在鼠标周围的特效，鼠标离开的时候线条就自动散开。" /> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>漂浮磁力线/鼠标吸铁石特效</title> <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> </head> <body> <div id="page_end_html"> <!--磁力线放射--> <script> ! function () { function setNodeAttribute(node, attribute, value) { return node.getAttribute(attribute) || value }; function getEleByTagName(name) { return document.getElementsByTagName(name) }; function setDefaultAttribute() { var elements = getEleByTagName("script"), len = elements.length, i = elements[len - 1]; return { len: len, zIndex: setNodeAttribute(i, "zIndex", -1), opacity: setNodeAttribute(i, "opacity", .6), color: setNodeAttribute(i, "color", "32,178,170"), count: setNodeAttribute(i, "count", 150) //<!-- opacity 参数设置的是透明程度，数字越小越透明； color 设置颜色； count 设置磁线的数量 --> } }; function initSize() { canvasWidth = canvasEle.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; canvasHeight = canvasEle.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight }; function start() { ctx.clearRect(0, 0, canvasWidth, canvasHeight); var node, e, curWidth, deltaX, deltaY, distance; nodes.forEach(function (item, index) { item.x += item.xa; item.y += item.ya; item.xa *= item.x > canvasWidth || item.x < 0 ? -1 : 1; item.ya *= item.y > canvasHeight || item.y < 0 ? -1 : 1; ctx.fillRect(item.x - .5, item.y - .5, 1, 1); for (var e = index + 1; e < nodesIncludeMouse.length; e++) { node = nodesIncludeMouse[e]; if (node.x !== null && node.y !== null) { deltaX = item.x - node.x; deltaY = item.y - node.y; distance = deltaX * deltaX + deltaY * deltaY; if (distance < node.max) { if (node === mouse && distance >= node.max / 2) { item.x -= .03 * deltaX; item.y -= .03 * deltaY; } curWidth = (node.max - distance) / node.max; ctx.beginPath(); ctx.lineWidth = curWidth / 2; ctx.strokeStyle = "rgba(" + defaultAttr.color + "," + (curWidth + .2) + ")"; ctx.moveTo(item.x, item.y); ctx.lineTo(node.x, node.y), ctx.stroke(); } } } }); animate(start); }; var canvasWidth, canvasHeight, nodesIncludeMouse, canvasEle = document.createElement("canvas"), defaultAttr = setDefaultAttribute(), ctx = canvasEle.getContext("2d"), animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window .mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n) { window.setTimeout(n, 1e3 / 45) }, mathRandom = Math.random, mouse = { x: null, y: null, max: 2e4 }; canvasEle.id = "c_n" + defaultAttr.len; canvasEle.style.cssText = "position:fixed;top:0;left:0;z-index:" + defaultAttr.zIndex + ";opacity:" + defaultAttr.opacity; getEleByTagName("body")[0].appendChild(canvasEle); initSize(); window.onresize = initSize; window.onmousemove = function (n) { n = n || window.event, mouse.x = n.clientX, mouse.y = n.clientY }; window.onmouseout = function () { mouse.x = null, mouse.y = null }; for (var nodes = [], f = 0; defaultAttr.count > f; f++) { var h = mathRandom() * canvasWidth, g = mathRandom() * canvasHeight, v = 2 * mathRandom() - 1, p = 2 * mathRandom() - 1; nodes.push({ x: h, //x坐标 y: g, //y坐标 xa: v, //x速度 ya: p, //y速度 max: 6e3 //两点可连线的最大距离 }); } nodesIncludeMouse = nodes.concat([mouse]); setTimeout(function () { start(); }, 100) }(); </script> <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function ($) { $("body").click(function (e) { var a = new Array("Laravel", "Wordpress", "公众号", "小程序", "ERP", "CRM", "帝国cms", "Python", "Magento", "Dedecms", "Linux", "CI", "Thinkphp"); /* 可想而知，这里可以修改显示的字 */ var $i = $("<span />").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function () { $i.remove(); }); }); }); </script> </div> </body> </html>
