<!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
2016-05-07 22:04:49