js实现文字墙效果

最新推荐文章于 2023-08-03 17:58:05 发布

原创最新推荐文章于 2023-08-03 17:58:05 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

33 篇文章

订阅专栏

文字墙的原理就是对js随机函数的操作 Math.random().

先看效果图：

代码：引用了模板渲染插件artTemplate,想看效果的可以下载到本地替换我的路径或者引用cdn,artTemplate文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        #container{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            border: 3px solid #0097ef;
            border-radius: 3px;
            position: relative;
        }
        #container .text{
            display: inline-block;
            position: absolute;
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="container">
    <script type="text/html" id="template-container">
    {{each list item}}
     <div class="text">{{item}}</div>
    {{/each}}
    </script>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="template-web.js"></script>
<script>
    
  getData();

  //模拟假数据
  function getData() {
      var data = {
          code:1,
          msg:'success',
          list:["摩拜","审美","测试","老地方","地方的","丰富的","冠福股份","擐甲挥戈","框架","看见好看好看"]
      };
      var html = template("template-container",data);
      $("#container").html(html);
      handleRandom();
  }

  //处理随机函数
  function handleRandom() {
      var text = translateClassArrToArr($("#container .text"));
      var color = ["blue","yellow","red","#f5a623","green","#0097ef","#00a854","#2FD000","rebeccapurple","#violet"];
      var fontSzie = [14,16,18,20,24,26,28,30,32,36];
      var fontWeight = [400,500,600,700,800,400,500,600,700,800];
      text.forEach((item)=>{
          var random = randomNum(1,10)-1;
          console.log('random',random);
          $(item).css({
              "color":color[random],
              "font-size":fontSzie[random]+'px',
              "font-weight":fontWeight[random],
              "left":Math.random()*400+'px',
              "top":Math.random()*400+'px',
              "transform":"rotate("+Math.random()*100+"deg)",
          })
      })
  }

   //类数组转换函数
    function translateClassArrToArr(arr) {
        return Array.prototype.slice.call(arr);
    }

    //获取两个值之间的随机
    function randomNum(minNum,maxNum){
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }
</script>
</html>