간단한 애니메이션 효과를 구현하는 js 타이머
- 小云云원래의
- 2017-12-22 13:07:361835검색
js는 타이머 기능을 구현할 수 있습니다. 이 기사에서는 주로 js 타이머 + 간단한 애니메이션 효과의 예를 공유합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집기를 따라가며 살펴보겠습니다. 모든 사람이 js를 사용하여 더 나은 타이머를 만드는 데 도움이 되기를 바랍니다. +
<!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>
<p id="show"></p>
<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>관련 추천:
JavaScript에서 타이머 설정 및 삭제에 대한 자세한 설명
JavaScript에서 타이머의 원리 분석에 대해
고급 타이머 예제 코드 생성 및 사용 방법에 대한 자세한 설명 자바스크립트로위 내용은 간단한 애니메이션 효과를 구현하는 js 타이머의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!