ホームページ > 記事 > ウェブフロントエンド > JSで折り畳んだり展開したりするアニメーションを作る（コード付き）
JSで折り畳んだり展開したりするアニメーションを作る（コード付き）
- php中世界最好的语言オリジナル
- 2018-05-14 14:38:142538ブラウズ
今回はJSで折り畳む・展開するアニメーションを作るための注意点をお送りします。実際の事例をいくつか紹介します。
<!DOCTYPE = html>
<html>
<head>
<title> JS折叠展开动画</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.red{
background-color:red;
width:200px;
height:200px;
position:relative;
left:-200px;
top:0px;
}
.blue{
background:blue;
width:20px;
height:50px;
position:absolute;
left:200px;
top:75px;
}
</style>
</head>
<body>
<p class="red" id="cf1"><p class="blue" id="cf">分享</p></p>
<script>
window.onload = function(){
var onp = document.getElementById("cf1");
onp.onmouseover = function(){
startmove(0);
}
onp.onmouseout = function(){
startmove(-200);
}
}
var timer ;
function startmove(target){
clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
var onp1 = document.getElementById("cf1");
timer = setInterval(function(){
var speed = 0;
if(onp1.offsetLeft<target){
speed = 10;
}else{
speed = -10;
}
if(onp1.offsetLeft==target){
clearInterval(timer);
}
else{
onp1.style.left = onp1.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>
概要:
1. CSS 部分:
1. CSS ファイルの参照メソッドを確認します。
絶対位置
と相対位置関係(親関係はrelativeを使用、子関係はabsoluteを使用)を確認します
1,
element.style.left& element.offsetLeft 違い: ① 前者の単位は文字列である px ですが、後者の単位は数値です。
2マウスの移動は抽象化できません - ターゲットの位置が異なるだけです
3.
関数パラメータはできるだけ少なくする必要があります(目的が達成できる場合)4. マウスアクションオブジェクトを親 p、そうでないとちらつきが発生します (
onmouseoverが呼び出されたばかりで、ターゲットが削除され、再度 onmouseout が呼び出されます) 5. タイマーのクリアに注意してください (①、移動時の速度が不安定になるのを防ぐため、②、移動を停止します)ターゲットの場所で)
3. その他:Q: Google Chrome はポップアップ ウィンドウのブロックを解除しますか?
A: 設定 - 詳細設定 - プライバシー設定 - コンテンツ設定 - 関連する設定を行うためのポップアップ ウィンドウ。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
vue+vue-router+vuex 操作権限 v-bind と v-on の使用例の詳細な説明以上がJSで折り畳んだり展開したりするアニメーションを作る（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。