實現展開與收起效果
阿新 • • 發佈:2019-02-11
<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>