溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么使用js實現動畫效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么使用js實現動畫效果”文章能幫助大家解決問題。
1.獲得盒子當前位置
2.讓盒子在當前位置加上1個移動距離
3.利用定時器不斷重復這個操作
4.加一個結束定時器的條件
5.注意該元素需要添加定位，才能使用element.style.left
<body>
<div>
</div>
<script>
var div = document.querySelector('div');
var timer = setInterval(function () {
if (div.offsetLeft >= 500) {
clearInterval(timer);
}
div.style.left = div.offsetLeft + 2 + 'px';
}, 30)
</script>
</body>主要核心就是利用定時器進行動畫的實現
<script>
// 簡單動畫函數封裝
function animate(obj, rug) {
var timer = setInterval(function () {
if (obj.offsetLeft >= rug) {
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 2 + 'px';
}, 30)
}
var div = document.querySelector('div');
animate(div,300);
</script>把這個動畫封裝成一個函數，方便以后的使用，該封裝函數里的obj是哪個元素要進行動畫的實現rug是該元素要移動多少距離
<body>
<div>
</div>
<button>點擊走</button>
<script>
// 簡單動畫函數封裝
// 給不同元素添加定時器
function animate(obj, rug) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= rug) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + 2 + 'px';
}
}, 30)
}
var div = document.querySelector('div');
var but = document.querySelector('button');
but.addEventListener('click', function () {
animate(div, 200);
})
</script>這樣就能實現多個元素進行動畫的使用了，并且每個元素都有屬于自己的定時器
公式：目標值-現在的位置/10 ，作為每次的移動距離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>點擊</button>
<div></div>
<script>
function animate(obj, rug) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步長值
var step = (rug - obj.offsetLeft) / 10;
if (obj.offsetLeft == rug) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15)
}
var div = document.querySelector('div');
var but = document.querySelector('button');
but.addEventListener('click', function () {
animate(div, 500);
})
</script>
</body>
</html>
回調函數原理:函數可以作為一個參數。將這個函數作為參數傳到另一個函數里面 ,當那個函數執行完之后,再執行傳進去的這個函數,這個過程就叫做回調。
當跑完800米后，會彈出一個框“hello”，這個就是在執行完800米這個動畫后再次進行的函數，這就是回調函數
實現側邊欄滑動效果
當鼠標經過slider就會讓con這 個盒子滑動到左側
當鼠標離開slider就會讓con這 個盒子滑動到右側
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/animate.js"></script>
<style>
.silder {
margin-left: 1600px;
text-align: center;
position: relative;
line-height: 100px;
width: 100px;
height: 100px;
background-color: aqua;
}
span {}
.con {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 200px;
height: 100px;
background-color: rgb(132, 0, 255);
}
</style>
</head>
<body>
<div class="silder">
<span>←</span>
<div class="con">問題反饋</div>
</div>
<script>
var silder = document.querySelector('.silder');
var con = document.querySelector('.con');
var span = document.querySelector('span');
silder.addEventListener('mouseenter', function () {
animate(con, -200, function () {
span.innerHTML = '→';
});
})
silder.addEventListener('mouseleave', function () {
animate(con, 0, function () {
span.innerHTML = '←';
});
})
</script>
</body>
</html>
關于“怎么使用js實現動畫效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
