ホームページ > 記事 > ウェブフロントエンド > 簡単なアニメーション効果を実装するための js タイマー
簡単なアニメーション効果を実装するための js タイマー
- 小云云オリジナル
- 2017-12-22 13:07:361833ブラウズ
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でのタイマーの原理分析について
高度なタイマーのサンプルコードの作成方法と使用方法の詳細な説明JavaScript で以上が簡単なアニメーション効果を実装するための js タイマーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。