（漂浮？气泡？）js生成位置颜色透明度随机的字块

Posted 2020-09-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（漂浮？气泡？）js生成位置颜色透明度随机的字块相关的知识，希望对你有一定的参考价值。

效果图如下：

技术分享

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <title>Document</title>
  <style>
    body {
      background-color: #ededed;
    }

    #container {
      width: 650px;
      height: 500px;
      border: 1px solid #0ff;
    }

    .newItem {
      /*width: 50px;
      height: 30px;*/
      display: block;
      cursor: pointer;
      max-width: 115px;
      font-size: 16px;
      font-weight: 600;
      background-color: white;
      border-radius: 10px;
      padding: 15px 30px;
    }

    .newItem:hover {
      -webkit-transform: scale(1.3);
      -moz-transform: scale(1.3);
      -ms-transform: scale(1.3);
      -o-transform: scale(1.3);
      transform: scale(1.3);
      z-index: 999;
      /*opacity: 1*/
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>
<script>
  $(document).ready(function () {
    //定义容器
    var container = $(‘#container‘);
    //定义初识坐标
    var x = 0,
      y = 0,
      itemPos = [],
      div_html = ‘‘,
      opacity = ‘‘,
      color = ‘‘;
    //获取图片随机浮动的可见范围
    var w = container.width(),
      h = container.height();
    //定义数组
    var dataArray = ["TCP/IP协议分析与应用", "网络管理与维护", "高级路由技术", "高级交换技术", "网络应用开发与系统集成", "网络安全技术", "移动通讯与无线网络",
      "C++", "JAVA", "android", "CCNA", "CCNP", "CCIE", "HTML/HTEML5", "CSS2.0/CSS3.0", "javascript", "ORACLE数据库"
    ]
    //生成随机不透明度
    function getOpacityRandom() {
      var o = ‘‘;
      var oArray = ["0.6", "0.7"];
      var oIndex = Math.round(Math.random() * oArray.length)
      o = oArray[oIndex];
      return o;
    }
    //生成随机颜色  
    function getColorRandom() {
      var c = "#";
      var cArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
      for (var i = 0; i < 6; i++) {
        var cIndex = Math.round(Math.random() * 15);
        c += cArray[cIndex];
      }
      return c;
    }

    $.each(dataArray, function (index, el) {
      x = Math.round(Math.random() * w);
      y = Math.round(Math.random() * h);
      // itemPos.push({
      //   _x: x,
      //   _y: y
      // })
      opacity = getOpacityRandom();
      color = getColorRandom();
      div_html = ‘<a class="newItem" style="opacity:‘ + opacity + ‘;position:absolute;left:‘ + x + ‘px;top:‘ +
        y +
        ‘px;color:‘ + color + ‘;">‘ + el + ‘</a>‘
      container.append(div_html);
    });

  });
</script>

</html>

以上是关于（漂浮？气泡？）js生成位置颜色透明度随机的字块的主要内容，如果未能解决你的问题，请参考以下文章

生成随机颜色

如何获取 Plotly.js 默认颜色列表？