音乐柱状频谱实现，置底

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阻尼形变</title>
<style>
*{margin:0; padding:0}
div{height:200px; width:10%; background:orange; float:left; border-radius:10px;}
</style>
<script>
window.onload=function(){
    var aDiv=document.getElementsByTagName('div');
    var clientHeight=window.innerHeight;
    //阻尼形变函数封装
    function dampTransH(obj,dampCoefficient,target){
        var efficient=dampCoefficient>1? 1.0-1/dampCoefficient : 1.0-dampCoefficient;
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var speed=(target-obj.offsetHeight)*efficient;
            speed=speed>0? Math.ceil(speed) : Math.floor(speed);
            var curH=obj.offsetHeight+speed;
            if((speed<0 && curH<target) || (speed>0 && curH>target)){
                curH=target;
                clearInterval(obj.timer);
            }
            obj.style.height=curH+'px';
        },30);
    }
    
    //为10个柱子设置相应的事件响应
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].onmouseover=function(){
            dampTransH(this,0.6,clientHeight);
        }
        aDiv[i].onmouseout=function(){
            dampTransH(this,0.6,200);
        }
    }
}
</script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

请问如何将上述效果做到屏幕底部实现？

实现细节要求：

无论浏览器窗口大小如何变化，所有柱子必须始终位于屏幕底部，而不是出现滚动条
当柱子位于屏幕底部时，柱子向上形变而非向下形变
在屏幕宽度发生变化的情况下，10个柱形必须能自适应宽度，
即无论屏幕宽度怎么变化，屏幕上总能显示出一排的10个柱子
在柱子高度发生变化的情况下，柱子最高高度总是浏览器窗口可用部分的高度
全程（无论是否触发动画）不能出现任意方向的滚动条

慕尼黑4423355

浏览 1552回答 1

1回答

随时随地看视频慕课网APP