js实现动态几何图案背景

avatar 2017年01月28日22:05:58 2 4994 views
博主分享免费Java教学视频,B站账号:Java刘哥 ,长期提供技术问题解决、项目定制:本站商品点此
效果图:

js实现动态几何图案背景




直接贴代码了
  1. <script type="text/javascript">
  2.     ! function () {
  3.         function o(w, v, i) {
  4.             return w.getAttribute(v) || i
  5.         }
  6.         function j(i) {
  7.             return document.getElementsByTagName(i)
  8.         }
  9.         function l() {
  10.             var i = j("script"),
  11.                 w = i.length,
  12.                 v = i[w - 1];
  13.             return {
  14.                 l: w,
  15.                 z: o(v, "zIndex", -1),
  16.                 o: o(v, "opacity", 0.5),
  17.                 c: o(v, "color""0,0,0"),
  18.                 n: o(v, "count", 99)
  19.             }
  20.         }
  21.         function k() {
  22.             r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  23.         }
  24.         function b() {
  25.             e.clearRect(0, 0, r, n);
  26.             var w = [f].concat(t);
  27.             var x, v, A, B, z, y;
  28.             t.forEach(function (i) {
  29.                 i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
  30.                 for (v = 0; v < w.length; v++) {
  31.                     x = w[v];
  32.                     if (i !== x && null !== x.x && null !== x.y) {
  33.                         B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
  34.                         y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
  35.                     }
  36.                 }
  37.                 w.splice(w.indexOf(i), 1)
  38.             }), m(b)
  39.         }
  40.         var u = document.createElement("canvas"),
  41.             s = l(),
  42.             c = "c_n" + s.l,
  43.             e = u.getContext("2d"),
  44.             r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
  45.                 window.setTimeout(i, 1000 / 45)
  46.             },
  47.             a = Math.random,
  48.             f = {
  49.                 x: null,
  50.                 y: null,
  51.                 max: 20000
  52.             };
  53.         u.id = c;
  54.         u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
  55.         j("body")[0].appendChild(u);
  56.         k(), window.onresize = k;
  57.         window.onmousemove = function (i) {
  58.             i = i || window.event, f.x = i.clientX, f.y = i.clientY
  59.         }, window.onmouseout = function () {
  60.             f.x = null, f.y = null
  61.         };
  62.         for (var t = [], p = 0; s.n > p; p++) {
  63.             var h = a() * r,
  64.                 g = a() * n,
  65.                 q = 2 * a() - 1,
  66.                 d = 2 * a() - 1;
  67.             t.push({
  68.                 x: h,
  69.                 y: g,
  70.                 xa: q,
  71.                 ya: d,
  72.                 max: 6000
  73.             })
  74.         }
  75.         setTimeout(function () {
  76.             b()
  77.         }, 100)
  78.     }();
  79. </script>

调用方法,找到footer.php,粘贴到任意位置
  • 微信
  • 交流学习,资料分享
  • weinxin
  • 个人淘宝
  • 店铺名:言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:1   待审核评论数:0
  1. avatar 安三

    博主,如何让线条变成红色~