<!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;
????//阻尼形變函數(shù)封裝
????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個(gè)柱子設(shè)置相應(yīng)的事件響應(yīng)
????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>請(qǐng)問如何將上述效果做到屏幕底部實(shí)現(xiàn)？實(shí)現(xiàn)細(xì)節(jié)要求：無論瀏覽器窗口大小如何變化，所有柱子必須始終位于屏幕底部，而不是出現(xiàn)滾動(dòng)條當(dāng)柱子位于屏幕底部時(shí)，柱子向上形變而非向下形變?cè)谄聊粚挾劝l(fā)生變化的情況下，10個(gè)柱形必須能自適應(yīng)寬度，即無論屏幕寬度怎么變化，屏幕上總能顯示出一排的10個(gè)柱子在柱子高度發(fā)生變化的情況下，柱子最高高度總是瀏覽器窗口可用部分的高度全程（無論是否觸發(fā)動(dòng)畫）不能出現(xiàn)任意方向的滾動(dòng)條
音樂柱狀頻譜實(shí)現(xiàn)，置底
慕尼黑4423355
2016-05-07 22:04:49