JavaScript は単純な移動およびイージング効果を実現します

1.HTMLレイアウト

2 つのボックスを定義するだけで、1 つは移動エフェクト用、もう 1 つはイージングエフェクト用です。

    <div class="box box1"></div>
	<div class="box box2"></div>

2、CSSレイアウト

2 つのボックスの幅、高さ、背景色を定義して、任意の効果を加えます。ただ見てください、

          <style>
		    *{
			 padding:0px;
			 margin:0px;
			}
		 .box{
			 width: 200px;
			 height: 200px;
			 background: blue;
			 position: absolute;
			 left:0px;
		 }
		 .box2{
			 background: red;
			 margin-top: 210px;
		 }
		 </style>

3. JavaScript コード - モバイル

1.要素を取得する

先ほどhtmlで定義した要素を取得してjsで使用します。

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');

2. モバイルを実現するカプセル化機能

num: 毎回 h1 ピクセル移動するボックスを定義します。

ターゲット: 各移動の距離。

if判定：ifで判定し、設定した距離に達するとインターバル機能を解除します。

box.style.left: 距離に到達せず、常に「ボックス」の左マージンに割り当てられます。

myRun: ボックスのクリックイベントを設計します。クリックすると移動が発生します。これは、呼び出された値を含む box1 を指し、その中で直接変更できます。1 回の移動距離が合計移動距離となります。

function myRun(box,h1,h2){ 
var myInter = setInterval(function(){
var offsetLeft = box.offsetLeft;
var num = h1;   
var target = h2;  
if(offsetLeft==target){  
		clearInterval(myInter);
	}else{
		box.style.left = offsetLeft+num+'px';
				}
	},1000)}
    box1.onclick=function(){
    myRun(this,50,200); }

移動効果

4. JavaScript コード - イージング

コードはjsの動作とほぼ同じですが、途中の判定が上記とは少し異なり、最初の動作は移動距離の10分の1、その後の各動作はすべて10分の1かかるという意味です。残り距離を切り上げる理由は、無線が設定距離に近づくと移動できるためです。

 
             function move(obj,sum){
                var liLi = setInterval(function(){
                    var offsetLeft =obj.offsetLeft;
                    var num  = (sum - offsetLeft)/10;
                    num > 0 ?  Math.ceil(num):Math.floor(num);
                    if(offsetLeft==sum){
                        clearInterval(liLi);
                    }else{
                        obj.style.left = offsetLeft+num+'px';
                    }
                },1000)
             }   box2.onclick=function(){
                    move(this,200);
            }

緩和効果

5、完全なコード

1.モバイルコード

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>移动</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .box {
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 0px
        }

        .box2 {
            background: red;
            margin-top: 210px;
        }
    </style>
</head>

<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        function myRun(box, h1, h2) {
            var myInter = setInterval(function () {
                var offsetLeft = box.offsetLeft;
                var num = h1;
                var target = h2;
                if (offsetLeft == target) {
                    clearInterval(myInter);
                } else {
                    box.style.left = offsetLeft + num + 'px';
                }
            }, 1000)
        }
        box1.onclick = function () {
            myRun(this, 50, 200);
        } 
    </script>
</body>

</html>

2. スローモーション効果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>移动</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .box {
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 0px
        }

        .box2 {
            background: red;
            margin-top: 210px;
        }
    </style>
</head>

<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');

        function move(obj, sum) {
            var liLi = setInterval(function () {
                var offsetLeft = obj.offsetLeft;
                var num = (sum - offsetLeft) / 10;
                num > 0 ? Math.ceil(num) : Math.floor(num);
                if (offsetLeft == sum) {
                    clearInterval(liLi);
                } else {
                    obj.style.left = offsetLeft + num + 'px';
                }
            }, 1000)
        } box2.onclick = function () {
            move(this, 200);
        }

    </script>
</body>

</html>