俺要讲话 2020-09-22 10:35 采纳率: 60%
浏览 116
已采纳

js+css实现后台数据返回页面改变页面图片的高度

实现功能：通过websocket实时数据，改变页面图片的高度，做到一个音频的电平跳动效果
有没有大神有类似的demo或者方法提供参考下，的确是有点懵的。
图片说明

这个就是我页面收到的电平跳动数据，现在想用图片来显示在页面，通过拿到数据调整图片高度来完成电平跳动的效果。有没有大佬有更好的方法。我实在还没弄懂，有没有可以参考的demo，谢谢。

  • 写回答

3条回答 默认 最新

  • bdawn 2020-09-23 13:38
    关注
    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            height: 200px;
        }
        .item{
            background-image: linear-gradient(red,#0000ff70,#00800057);
            display: flex;
            justify-content: space-between;
            height: 200px;
            width: 100px;
            flex-direction: column;
        }
        .item .first{
            transition: all 100ms
            opacity: 0
        }
        .other{
            background-color: #ffffff;
            transition: all 100ms;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="other"></div>
            <div id="div1" class=" first"></div>
        </div>
        <div class="item">
            <div class="other"></div>
            <div id="div2" class=" first"></div>

        </div>
        <div class="item">
            <div class="other"></div>
            <div id="div3" class=" first"></div>
        </div>
        <div class="item">
            <div class="other"></div>
            <div id="div4" class=" first"></div>
        </div>
        <div class="item">
            <div class="other"></div>
            <div id="div5" class=" first"></div>
        </div>
    </div>

<script type="text/javascript">
    setInterval(function () {
        for (var i = 5; i > 0; i--) {
            var hello = document.getElementById('div' + i);
            hello.style.height = parseInt( Math.random() * 200) + 'px'
            parent = hello.parentNode;
            parent.getElementsByClassName('other')[0].style.height = (200 - parseInt( Math.random() * 200)) + 'px'
        }
    }, 100)

    // ws接收并解析数据
    // ws.onmessage = function(msg) {
    //  // 解析msg
    //  // 解析出来的数据按一定比例设置为div高度
    // }

</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘