1. <div style="float:right;" id="hub_iframe"></div>
  2.  
  3. <script type="text/javascript">
  4. function async_load() {
  5.  
  6. i.scrolling = "no";
  7. i.frameborder = "";
  8. i.border = "";
  9. i.setAttribute("frameborder", "", 0);
  10. i.width = "100px";
  11. i.height = "20px";
  12. document.getElementById("hub_iframe").appendChild(i);
  13. }
  14.  
  15. if (window.addEventListener) {window.addEventListener("load", async_load, false);}
  16. else if (window.attachEvent) {window.attachEvent("onload", async_load);}
  17. else {window.onload = async_load;}
  18. </script>
  19.  
  20. <script>
  21. ! function() {
  22. //封装方法,压缩之后减少文件大小
  23. function get_attribute(node, attr, default_value) {
  24. return node.getAttribute(attr) || default_value;
  25. }
  26. //封装方法,压缩之后减少文件大小
  27. function get_by_tagname(name) {
  28. return document.getElementsByTagName(name);
  29. }
  30. //获取配置参数
  31. function get_config_option() {
  32. var scripts = get_by_tagname("script"),
  33. script_len = scripts.length,
  34. script = scripts[script_len - 1]; //当前加载的script
  35. return {
  36. l: script_len, //长度,用于生成id用
  37. z: get_attribute(script, "zIndex", -1), //z-index
  38. o: get_attribute(script, "opacity", 0.5), //opacity
  39. c: get_attribute(script, "color", "0,0,0"), //color
  40. n: get_attribute(script, "count", 99) //count
  41. };
  42. }
  43. //设置canvas的高宽
  44. function set_canvas_size() {
  45. canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
  46. canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  47. }
  48.  
  49. //绘制过程
  50. function draw_canvas() {
  51. context.clearRect(0, 0, canvas_width, canvas_height);
  52. //随机的线条和当前位置联合数组
  53. var e, i, d, x_dist, y_dist, dist; //临时节点
  54. //遍历处理每一个点
  55. random_lines.forEach(function(r, idx) {
  56. r.x += r.xa,
  57. r.y += r.ya, //移动
  58. r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
  59. r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界,反向反弹
  60. context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
  61. //从下一个点开始
  62. for (i = idx + 1; i < all_array.length; i++) {
  63. e = all_array[i];
  64. //不是当前点
  65. if (null !== e.x && null !== e.y) {
  66. x_dist = r.x - e.x, //x轴距离 l
  67. y_dist = r.y - e.y, //y轴距离 n
  68. dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
  69. dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
  70. d = (e.max - dist) / e.max,
  71. context.beginPath(),
  72. context.lineWidth = d / 2,
  73. context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
  74. context.moveTo(r.x, r.y),
  75. context.lineTo(e.x, e.y),
  76. context.stroke());
  77. }
  78. }
  79. }), frame_func(draw_canvas);
  80. }
  81. //创建画布,并添加到body中
  82. var the_canvas = document.createElement("canvas"), //画布
  83. config = get_config_option(), //配置
  84. canvas_id = "c_n" + config.l, //canvas id
  85. context = the_canvas.getContext("2d"), canvas_width, canvas_height,
  86. frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
  87. window.setTimeout(func, 1000 / 45);
  88. }, random = Math.random,
  89. current_point = {
  90. x: null, //当前鼠标x
  91. y: null, //当前鼠标y
  92. max: 20000
  93. },
  94. all_array;
  95. the_canvas.id = canvas_id;
  96. the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
  97. get_by_tagname("body")[0].appendChild(the_canvas);
  98. //初始化画布大小
  99.  
  100. set_canvas_size(), window.onresize = set_canvas_size;
  101. //当时鼠标位置存储,离开的时候,释放当前位置信息
  102. window.onmousemove = function(e) {
  103. e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
  104. }, window.onmouseout = function() {
  105. current_point.x = null, current_point.y = null;
  106. };
  107. //随机生成config.n条线位置信息
  108. for (var random_lines = [], i = 0; config.n > i; i++) {
  109. var x = random() * canvas_width, //随机位置
  110. y = random() * canvas_height,
  111. xa = 2 * random() - 1, //随机运动方向
  112. ya = 2 * random() - 1;
  113. random_lines.push({
  114. x: x,
  115. y: y,
  116. xa: xa,
  117. ya: ya,
  118. max: 6000 //沾附距离
  119. });
  120. }
  121. all_array = random_lines.concat([current_point]);
  122. //0.1秒后绘制
  123. setTimeout(function() {
  124. draw_canvas();
  125. }, 100);
  126. }();
  127. </script>

【前端背景UI】鼠标磁性动态蜘蛛网背景源码的更多相关文章

  1. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  2. Android动态方式破解apk前奏篇(Eclipse动态调试smail源码)

    一.前言 今天我们开始apk破解的另外一种方式:动态代码调试破解,之前其实已经在一篇文章中说到如何破解apk了: Android中使用静态方式破解Apk  主要采用的是静态方式,步骤也很简单,首先使用 ...

  3. android浪漫樱花凋零动态壁纸应用源码

    android浪漫樱花凋零动态壁纸应用源码,是从那个安卓教程网拿过来的,本项目是一套基于安卓的樱花动态壁纸项目源码,安装以后桌面没有图标,但是可以在修改壁纸-动态壁纸中找到.我的分辨率是480×854 ...

  4. JAVA设计模式-动态代理(Proxy)源码分析

    在文章:JAVA设计模式-动态代理(Proxy)示例及说明中,为动态代理设计模式举了一个小小的例子,那么这篇文章就来分析一下源码的实现. 一,Proxy.newProxyInstance方法 @Cal ...

  5. 数据结构与算法系列2 线性表 使用java实现动态数组+ArrayList源码详解

    数据结构与算法系列2 线性表 使用java实现动态数组+ArrayList源码详解 对数组有不了解的可以先看看我的另一篇文章,那篇文章对数组有很多详细的解析,而本篇文章则着重讲动态数组,另一篇文章链接 ...

  6. JDK动态代理实现源码分析

    JDK动态代理实现方式 在Spring框架中经典的AOP就是通过动态代理来实现的,Spring分别采用了JDK的动态代理和Cglib动态代理,本文就来分析一下JDK是如何实现动态代理的. 在分析源码之 ...

  7. Redis 动态字符串 SDS 源码解析

    本文作者: Pushy 本文链接: http://pushy.site/2019/12/21/redis-sds/ 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可 ...

  8. 详解Nacos 配置中心客户端配置缓存动态更新的源码实现

    Nacos 作为配置中心,当应用程序去访问Nacos动态获取配置源之后,会缓存到本地内存以及磁盘中. 由于Nacos作为动态配置中心,意味着后续配置变更之后需要让所有相关的客户端感知,并更新本地内存! ...

  9. 【SpringCloud原理】万字剖析OpenFeign之FeignClient动态代理生成源码

    年前的时候我发布两篇关于nacos源码的文章,一篇是聊一聊nacos是如何进行服务注册的,另一篇是一文带你看懂nacos是如何整合springcloud -- 注册中心篇.今天就继续接着剖析Sprin ...

随机推荐

  1. SpringCloud-Alibaba-Nacos 服务注册中心&配置中心

    Spring Cloud Alibaba 由于 Spring Cloud Netflix 项目进入维护模式(将模块置于维护模式意味着 Spring Cloud 团队将不会再向模块中添加新功能,只会修复 ...

  2. CG-CTF(3)

    CG-CTF https://cgctf.nuptsast.com/challenges#Web 续上~ 第十四题:GBK Injection 是一道注入题: 分析:题目提示了GBK,GBK是一种多字 ...

  3. [Python] bytes 转换成 str

    b = b"example" # bytes object s = "example" # str object sb = bytes(s, encoding ...

  4. Robot Framework -002 在Windows10上的安装

    机器人框架是使用Python实现的,并且还支持Jython(JVM),IronPython(.NET)和PyPy. 在安装框架之前,一个明显的前提条件是至少安装这些解释器之一. 下面列出了安装Robo ...

  5. 【JAVA基础】04 Java语言基础:方法

    1. 方法概述和格式说明 为什么要有方法 提高代码的复用性 什么是方法 完成特定功能的代码块. 方法的格式 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2...) {     方法 ...

  6. ACM--[kuangbin带你飞]--专题1-23

    专题一 简单搜索 POJ 1321 棋盘问题POJ 2251 Dungeon MasterPOJ 3278 Catch That CowPOJ 3279 FliptilePOJ 1426 Find T ...

  7. 无向图双连通分量BCC(全网最好理解)

    不是标题党,之前我也写过一篇比较全的,但是对于初学者不友好.传送门? 双连通分量(Biconnected component):     1.边双联通 E-BCC     2.点双连通 V-BCC 双 ...

  8. 题目分享Q

    题意:给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大 分析:这可以说是换根法的裸题吧 首先考虑对一个给定的根如何计算,这应该是最简单的那种树形dp吧甚至可能都不算dp(好像 ...

  9. 自动化API之一 生成开源ERP Odoo App 的RestFul API

    1.在服务器上安装开源ERP Odoo 安装步骤请自行百度,本文重点不在于指导安装,以下是安装后PC端效果. Odoo: 2.在Uniconnector平台上注册Odoo App 移动端应用 3.配置 ...

  10. Java——理解面向对象

    1.程序设计的三种基本结构 顺序结构 顺序结构表示程序中的各操作是按照它们在源代码中的排列顺序依次执行的 选择结构 选择结构表示程序的处理需要根据某个特定的条件选择其中的一个分支执行.选择结构有单选择 ...