JS動畫以及封裝
阿新 • • 發佈：2021-12-14
1、定時器動畫案例
（1）協議按鈕禁止
var btn = document.querySelector("button")var num = 5 btn.disabled = true var Timer = setInterval(function(){ num-- btn.innerHTML = "請仔細閱讀協議("+num+")" if(num ==0){ clearInterval(Timer) btn.innerHTML = "同意" btn.disabled = false } },1000) 案例二 手機簡訊等待 var btn = document.querySelector("button") var Timer
btn.onclick = function(){ var num = 60 btn.disabled = true clearInterval(Timer) Timer = setInterval(function(){ num-- btn.innerHTML = "請"+num+"後重新發送"
if(num ==0){ clearInterval(Timer) btn.innerHTML = "請重新發送" btn.disabled = false } },1000) } JS的動畫案例
js的動畫如何實現
利用js的事件，配合定時器，或者改變它的樣式屬性，比如顏色，位置等來完成
案例1：物體漸變 （透明度改變）利用opacity與定時器，注意小數相減的問題
var num = 1 document.querySelector("div").onclick = function(){ // 保留this指向 var that = this var timer = setInterval(function(){ num -= 0.1 that.style.opacity = num },100) } 案例3：物體移動 利用定位或者 margin var btn1 = document.getElementById("btn1"); var box = document.getElementById("box"); var leftObj = 0; function changePosition(step, maxLength, time) { var timer = setInterval(function () { if (leftObj < maxLength) { leftObj += step; } else { clearInterval(timer); } box.style.left = leftObj + "px"; }, time); } btn1.onclick = function () { changePosition(5, 400, 10); }; offset client scroll 系列 (1)offset 系列 offsetLeft：獲取元素距離最左邊的距離(1)、如果父元素沒有定位，距離瀏覽器最左側的距離
(2)、如果父元素有定位，距離父元素最左側的距離
offsetTop:獲取元素距離最上邊的距離
(1)、如果父元素沒有定位，距離瀏覽器最上側的距離
(2)、如果父元素有定位，距離父元素最上側的距離
（2）scroll系列
scrollTop 和 scrollLeft :獲得內容捲曲出去得高度和寬度
scrollWidth和scrollHeight:獲得元素的實際寬度和高度，在內容沒有超出盒子時，獲得的是盒子的內部高度和寬度。內容超出盒子時獲得的是內容實際應有的高度和寬度。當盒子內部存在滾動條時，獲得的高度和寬度不包括滾動條。
（3）.client系列
clientTop 和 clientLeft 獲得上邊框和左邊框得寬度
clientWidth 和 clientHeight 獲取可視範圍得寬度，高度
輪播圖之自動輪播
<style> *{ margin: 0; padding: 0; list-style: none; } #bigbox{ margin: 100px auto; width: 400px; overflow: hidden; height: 300px; border: 2px solid red; font-size: 0; } img{ width: 400px; height: 300px; } </style> <body> <div id="bigbox"> <div id="box"> <img src="./image/表情包1.gif" alt=""> <img src="./image/表情包2.gif" alt=""> <img src="./image/表情包3.gif" alt=""> <img src="./image/表情包4.gif" alt=""> </div> </div> </body> <script> //設定div寬度 var bigbox = document.getElementById("bigbox") var box = document.getElementById("box") var imgArr = document.getElementsByTagName("img") box.style.width = 400 * imgArr.length + "px"; var num = 0 var timer = setInterval(function(){ bigbox.scrollLeft = num * imgArr[num].clientWidth; ++num if(num>=imgArr.length){ num = 0; } move(bigbox.scrollLeft,num * imgArr[num].clientWidth) // console.log(imgArr[num].offsetWidth) },2000)function move(start,end,time = 10){ var step = 0 var maxstep = 100 var everystep = (end-start)/maxstep // console.log(everystep) var timer2 = setInterval(function(){ if(step>=maxstep){ clearInterval(timer2) }else{ bigbox.scrollLeft = Math.ceil(bigbox.scrollLeft)+everystep } step++ },time) } </script>