拿去白嫖吧：

<!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>
 

js磁力线代码（非压缩，自己在压缩的版本上优化了代码，易于阅读）的更多相关文章

  1. "如何用70行Java代码实现深度神经网络算法" 的delphi版本

     http://blog.csdn.net/hustjoyboy/article/details/50721535 "如何用70行Java代码实现深度神经网络算法" 的delphi ...

  2. js分析 快速定位 js 代码， 还原被混淆压缩的 js 代码

    -1.目录 0.参考 1.页面表现 2. 慢镜头观察:低速网络请求 3. 从头到尾调试:Fiddler 拦截 index.html 并添加 debugger; 4. 快速定位 js 代码 5. 还原被 ...

  3. Grunt： 拼接代码，js丑化（压缩），css压缩，html压缩，观察文件，拷贝文件，删除文件，压缩文件

    准备工作 grunt 基于nodeJs所以 nodeJs需要的基础配置都需要安装 1.Grunt 安装 npm install -g grunt-cli 这是全局安装 2.在当前文件下npm init ...

  4. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  5. 使用gulp对js、css、img进行合并压缩

    1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...

  6. require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式

    require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式 时间:2017-07-03 17:18:11      阅读:210      评论:0      收藏:0 ...

  7. node.js中使用imagemagick进行图片裁剪压缩

    node.js中使用imagemagick进行图片裁剪压缩 安装imagemagick sudo apt-get install imagemagick or wget http://www.imag ...

  8. Joomla - 优化（时区、google字体、压缩图片、压缩自定义代码）

    Joomla - 优化(时区.google字体.压缩图片.压缩自定义代码) 一.时区 发布文章是往往会发现发布时间和当前时间对不上,原因是 Joomla 用的是国际标准时间,和中国时区大约相差8小时, ...

  9. 两行代码搞定网站gzip压缩

    网站使用gzip压缩的好处就不用多说了吧,自行脑补,来说一下如何使用nodejs实现gzip压缩,只需要两行代码,so ease. 通过nodejs实现gzip 需要用到的模块 compression ...

随机推荐

  1. spring mvc框架入门

    目录 1.web框架分层 2.什么是springmvc 3.springmvc的优势 4.springmvc和struct的区别 (spring mvc框架入门 1.web框架分层 一般web框架可以 ...

  2. Codeforces 1197E Count The Rectangles(树状数组+扫描线)

    题意: 给你n条平行于坐标轴的线,问你能组成多少个矩形,坐标绝对值均小于5000 保证线之间不会重合或者退化 思路: 从下到上扫描每一条纵坐标为y的水平的线,然后扫描所有竖直的线并标记与它相交的线,保 ...

  3. 上周 GitHub 热点速览 vol.07：GitHub 官方 CLI beta 版已发布

    摘要:GitHub Trending 上周看点,GitHub 官宣 CLI 已发布 beta 版,前端新晋高性能打包神器 esbuild 宣战 Webpack&Parcel,微软.Facebo ...

  4. Update、Insert注入技巧

    title: Update.Insert注入技巧 date: 2017-10-23 18:07:57 tags: ["注入"] 审计了不少代码,再看代码的时候最多出现的就是注入,很 ...

  5. Keras学习系列——神经网络层组件

    对Keras提供的对各种层的抽象进行相对全面的概括 1 基础常用层 名称 作用 原型参数 Dense 实现全连接层 Dense(units,activation,use_bias=True, kern ...

  6. qt creator源码全方面分析(2-8)

    目录 Editing MIME Types Editing MIME Types Qt Creator使用文件的MIME类型,来确定用于打开文件的模式和编辑器. 例如,Qt Creator在C++编辑 ...

  7. Vue路由（vue-router）

    一.介绍 1.vue-router安装 官方文档:https://router.vuejs.org/zh/installation.html下载地址:https://unpkg.com/vue-rou ...

  8. Android-ServiceManager

    ServiceManager在init进程启动之后启动,用来管理系统中的service,那么首先理解一下在init进程启动之后启动这句话类: 一般开机过程分为三个阶段: OS级别,由bootloade ...

  9. Linux kernel简介

    内核体系设计分:单内核,微内核 windows是微内核设计. Linux是单内核设计,但充分借鉴了为微内核体系的优点,为内核引入了模块化机制. 内核的组成部分 kernel:内核核心,一般为bz压缩的 ...

  10. PS切图工具

    缓存设置: 编辑-首选项-暂存盘 改完除了C盘之外的其他盘 单位设置: 编辑-首选项-单位与标尺 将单位修改成像素  PS预设: 工具   (窗口-工具) 标尺  (视图-标尺) 图层  (窗口-图层 ...