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>
js磁力线代码（非压缩，自己在压缩的版本上优化了代码，易于阅读）的更多相关文章
- "如何用70行Java代码实现深度神经网络算法" 的delphi版本
http://blog.csdn.net/hustjoyboy/article/details/50721535 "如何用70行Java代码实现深度神经网络算法" 的delphi ...
- js分析 快速定位 js 代码， 还原被混淆压缩的 js 代码
-1.目录 0.参考 1.页面表现 2. 慢镜头观察:低速网络请求 3. 从头到尾调试:Fiddler 拦截 index.html 并添加 debugger; 4. 快速定位 js 代码 5. 还原被 ...
- Grunt： 拼接代码，js丑化（压缩），css压缩，html压缩，观察文件，拷贝文件，删除文件，压缩文件
准备工作 grunt 基于nodeJs所以 nodeJs需要的基础配置都需要安装 1.Grunt 安装 npm install -g grunt-cli 这是全局安装 2.在当前文件下npm init ...
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...
- 使用gulp对js、css、img进行合并压缩
1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...
- require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式
require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式 时间:2017-07-03 17:18:11 阅读:210 评论:0 收藏:0 ...
- node.js中使用imagemagick进行图片裁剪压缩
node.js中使用imagemagick进行图片裁剪压缩 安装imagemagick sudo apt-get install imagemagick or wget http://www.imag ...
- Joomla - 优化（时区、google字体、压缩图片、压缩自定义代码）
Joomla - 优化(时区.google字体.压缩图片.压缩自定义代码) 一.时区 发布文章是往往会发现发布时间和当前时间对不上,原因是 Joomla 用的是国际标准时间,和中国时区大约相差8小时, ...
- 两行代码搞定网站gzip压缩
网站使用gzip压缩的好处就不用多说了吧,自行脑补,来说一下如何使用nodejs实现gzip压缩,只需要两行代码,so ease. 通过nodejs实现gzip 需要用到的模块 compression ...
随机推荐
- OpenCV3入门（四）图像的基础操作
1.访问图像像素 1)灰度图像 2)彩色图像 OpenCV中的颜色顺序是BGR而不是RGB. 访问图像的像素在OpenCV中就是访问Mat矩阵,常用的有三种方法. at定位符访问 Mat数据结构,操作 ...
- qt5连接sqlite数据库实例
建库 在VS下新建qt console appication 代码: #include <iostream> #include <Qtsql/QSqlDatabase> #in ...
- iRedmail的php由5.4升级到5.6
安装ireadmail时,自带的php是5.4,打算升级到5.6. 升级前注意备份原来的/etc/php-fpm.d下的www.conf,文件内容如下: [inet] user = nginx gro ...
- 阿里云服务器ECS Ubuntu18.04 初次使用配置教程(图形界面安装)
最近由于工作需要,要使用服务器测试,就先自已买了个服务器,就在阿里云买了一个,先买了那个叫虚拟主机的,后来发现不是我需要的,所以退了,就先了这个ECS主机.3年.如果购买就上图了.下面直接进入正题. ...
- [Effective Java 读书笔记] 第三章 对所有对象都通用的方法 第十---十一条
第十条 始终覆盖toString() toString的实现可以使类使用起来更加舒适,在执行println等方法时打印出定制信息. 一单实现了自己的toString,指定输出的固定格式,在方法的文档说 ...
- java sql语句 like%?%报错的问题
在数据库中不会报错,但用java调用时确保错. SQL语句: SELECT pageId,`name`,text FROM Page WHERE `name` LIKE CONCAT('%',?,'% ...
- Unity5.5.6 升级到 2018.4.1 打包出现的问题 ： Gradle version 2.10 is required. Current version is 5.1.1
起因:最近要在googleplay上架新游戏,而谷歌要求新上架的应用要支持64位,鉴于老版本的unity不支持打包64位apk,所以决定升级unity版本到2018.4.1, 但打包过程中出现了几个问 ...
- Windows远程连接Ubuntu上的MySQL数据库
原因:mysql安装好后,默认监听3306端口,并且只允许localhost访问,只允许root用户在localhost上登录. 我的环境: Ubuntu16.04 ...
- Lambda如何实现条件去重distinct List,如何实现条件分组groupBy List
条件去重 我们知道, Java8 lambda自带的去重为 distinct 方法, 但是只能过滤整体对象, 不能实现对象里的某个值进行判定去重, 比如: List<Integer> nu ...
- SQL Server 2019 表无法修改问题
SQL Server 2019 表无法修改问题 问题描述: 解决方法: 1.在菜单栏中,点击工具->选项,示例: 2.在选项中单击设计器->表设计器和数据库设计器->取消勾选阻止保存 ...