1. 程式人生 > >實現展開與收起效果

實現展開與收起效果

<script> /*獲得btn*/ var btn = document.getElementById('btn') var spread = document.getElementById('spread') var iSpread = false /*高度*/ var height = spread.scrollHeight /*總時間*/ var time = 420; /*間隔*/ var interval = 8.4 /*速度*/ var speed = height/(time/interval) /*點選事件*/ btn.onclick = function
(e) { btn.disabled = 'disabled' if(!iSpread){ var speeds = 0 var timer = setInterval(function () { speeds += speed spread.style.height = speeds + 'px' if(parseInt(spread.style.height) >=height){ clearTimeout(timer) btn
.disabled = '' } },interval) this.innerHTML = '收起' }else { var speeds = height this.innerHTML = '展開' var timer = setInterval(function () { speeds -= speed spread.style.height = speeds + 'px' if(speeds <= 0){ clearTimeout
(timer) btn.disabled = '' } },interval) } iSpread = !iSpread } </script>