溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關js定時器怎么實現動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
1.向下滑動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>向下滑動</title>
<style>
body {
margin: 0px;
}
#show {
width: 200px;
/* 高度為 0 */
height: 100px;
background-color: lightcoral;
margin: 0 auto;
/* 設置為隱藏 */
/*display: none;*/
}
</style>
</head>
<body>
<div id="show"></div>
<script>
var show = document.getElementById('show');
/*show.style.display = 'block';
var t = setInterval(function(){
var style = window.getComputedStyle(show,null);
var height = parseInt(style.height);
// 判斷當前的高度是否為 400
if (height >= 400){
clearInterval(t);
} else {
height++;
show.style.height = height + 'px';
}
},50);*/
slideDown(show,400);
/*
將上述實現的向下滑動效果，封裝在一個固定的函數中
* 設計當前實現向下滑動效果函數的形參
* elem - 表示實現向下滑動效果的元素
* maxHeight - 表示元素向下滑動的最大高度值
* 函數的邏輯與默認設置CSS樣式屬性的值無關
*/
function slideDown(elem, maxHeight){
// 操作的元素默認的display值為none
elem.style.display = 'block';
elem.style.height = '0px';
var t = setInterval(function(){
var style = window.getComputedStyle(elem,null);
var height = parseInt(style.height);
// 判斷當前的高度是否為 400
if (height >= maxHeight){
clearInterval(t);
} else {
height++;
elem.style.height = height + 'px';
}
},50);
}
</script>
</body>
</html>2.移動效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移動效果</title>
<style>
body {
margin: 0px;
}
#box {
width: 100px;
height: 100px;
background-color: lightcoral;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.onclick = function(){
clearInterval(t);
}
/*
* 向右移動
* 當前元素移動到頁面的最右邊時 -> 向左移動
* 向左移動
* 當前元素移動到頁面的最左邊時 -> 向右移動
*/
var flag = false;// 默認表示向右
var speed = 1;// 表示每次變化的值
t = setInterval(function(){
//speed += 0.01;
// 獲取當前頁面的寬度
var WIDTH = window.innerWidth;
var style = window.getComputedStyle(box,null);
var left = parseInt(style.left);
var width = parseInt(style.width);
// 判斷當前元素移動的方向
if (flag){// 向左移動
left -= speed;
} else {// 向右移動
left += speed;
}
// 判斷什么情況下，向左移動；判斷什么情況下，向右移動
if ((left + width) >= WIDTH){// 向左移動
flag = true;
} else if (left <= 0){// 向右移動
flag = false;
}
box.style.left = left + 'px';
},10);
</script>
</body>
</html>3.事件與動畫結合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件與動畫結合</title>
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<script>
// 獲取<body>元素
var body = document.body;
// 當頁面加載完畢后，設置當前<body>元素的高度為當前瀏覽器窗口的高度
window.onload = function(){
setHeight(body);
};
// 當用戶改變瀏覽器窗口的大小時，重新設置<body>元素的高度(等于當前窗口的高度)
window.onresize = function(){
setHeight(body);
};
// 定義函數 - 設置<body>元素的高度等于當前窗口的高度
function setHeight(elem){
elem.style.height = window.innerHeight + 'px';
}
var width = 100,height = 100;
// 為<body>元素綁定click事件
body.onclick = function(event){
var x = event.clientX;
var y = event.clientY;
// 創建<div>元素，顯示的位置在鼠標當前的坐標值
var div = document.createElement('div');
div.setAttribute('class','circle');
body.appendChild(div);
// rgb(0,0,0)格式 -> 顏色隨機
var r = parseInt(Math.random()*255);
var g = parseInt(Math.random()*255);
var b = parseInt(Math.random()*255);
div.style.width = width + 'px';
div.style.height = height + 'px';
div.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
div.style.borderRadius = '50%';
div.style.opacity = 1;
div.style.position = 'absolute';
div.style.left = x - width/2 + 'px';
div.style.top = y - height/2 + 'px';
animate(div);
}
// 定義函數 -> 實現動畫效果
function animate(elem){
var style = window.getComputedStyle(elem,null);
/*var width = parseInt(style.width);
var height = parseInt(style.height);
var left = parseInt(style.left);
var top = parseInt(style.top);
width++;
height++;
elem.style.width = width + 'px';
elem.style.height = height + 'px';
elem.style.left = (left - 0.5) + 'px';
elem.style.top = (top - 0.5) +'px';*/
var opacity = style.opacity;
if (opacity <= 0){
clearTimeout(t);
// 刪除當前元素
}
opacity -= 0.01;
elem.style.opacity = opacity;
// 設定定時器
var t = setTimeout(function(){
animate(elem);
},50);
}
</script>
</body>
</html>關于“js定時器怎么實現動畫效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
