俺要讲话 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 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么