ホームページ > 記事 > ウェブフロントエンド > JSでのオフセットと等速運動の例の分析

JSでのオフセットと等速運動の例の分析

小云云オリジナル: 2018-02-06 14:17:321481ブラウズ

この記事では、主に JavaScript アニメーションを紹介します。オフセットおよび均一アニメーション (カルーセル画像の実装を含む) について詳しく説明し、興味のある友人が参考になれば幸いです。

オフセットの概要

3 つの主要なファミリーには、オフセット/スクロール/クライアントが含まれることがわかっています。今日は、オフセットとそれに関連する均一アニメーションについて話しましょう。

オフセットは中国語で: オフセット、補償、変位。

js の要素のサイズを取得する便利な方法があります。それは、オフセットファミリーです。オフセットファミリーには以下が含まれます:

offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent

は以下で個別に紹介します。

1、offsetWidth と offsetHight

は、マージンを除いたボックス自体の幅と高さ + パディング + 境界線を検出するために使用されます。以下のように:

offsetWidth = width + padding + border;

offsetHeight = Height + padding + border;

これら 2 つのプロパティはすべてのノード要素にバインドされます。取得後、これら 2 つのプロパティを呼び出すことで要素ノードの幅と高さを取得できます。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  p {
   width: 100px;
   height: 100px;
   padding: 10px;
   border: 10px solid #000;
   margin: 100px;
   background-color: pink;
  }
 </style>
</head>
<body>
<p class="box"></p>
<script>
 var p1 = document.getElementsByTagName("p")[0];
 console.log(p1.offsetHeight);   //打印结果：140（100+20+20）
 console.log(typeof p1.offsetHeight); //打印结果：number

</script>
</body>
</html>

2、offsetLeft および offsetTop

は、親ボックスの左側の位置を返します (位置決めあり)。親が配置されていない場合は、本体が優先されます。

offsetLeft: 父親のパディングから開始し、父親のボーダーはカウントされません。

例:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  .box1 {
   width: 300px;
   height: 300px;
   padding: 100px;
   margin: 100px;
   position: relative;
   border: 100px solid #000;
   background-color: pink;
  }

  .box2 {
   width: 100px;
   height: 100px;
   background-color: red;
   /*position: absolute;*/
   /*left: 10px;*/
   /*top: 10px;*/
  }
 </style>
</head>
<body>
<p class="box1">
 <p class="box2"></p>
</p>
<script>
 var box2 = document.getElementsByClassName("box2")[0];
 //offsetTop和offsetLeft
 console.log(box2.offsetLeft); //100
 console.log(box2.style.left); //10px
</script>
</body>
</html>

親ボックスの配置時、offsetLeft == style.left (px削除後)。後者はインラインスタイルのみを認識することに注意してください。しかし、後で説明するように、違いはそれだけではありません。

3. offsetParent

は、親ボックス内の位置を指定して親ボックスノードを検出します。返される結果は、オブジェクトの親 (位置決め付き) です。

現在の要素の親要素に CSS 配置がない場合 (位置が絶対、相対、固定)、offsetParent の戻り結果は body です。

現在の要素の親要素に CSS 位置指定がある場合 (位置が絶対、相対、固定)、offsetParent の戻り値は最も近い親要素になります。

例:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<p class="box1">
 <p class="box2">
  <p class="box3"></p>
 </p>
</p>
<script>
 //offsetParent：复习盒子中带有定位的盒子
 //复习盒子中都没有定位，返回body
 //如果有，谁有返回最近哪个
 var box3 = document.getElementsByClassName("box3")[0];
 console.log(box3.offsetParent);
</script>
</body>
</html>

印刷結果:

offsetLeft と style.left の違い

(1) 最大の違いは:

offsetLeft は、スタイルの左側から位置を返すことができます。配置されていないボックス。親ボックスに配置がない場合は本体が優先されます。

style.left はインラインスタイルのみを取得できます。そうでない場合は、「」を返します（つまり、空を返します）。

(2) offsetTop は数値を返しますが、style.top は文字列を返します。単位: ピクセル。

例:

p.offsetLeft = 100;
p.style.left = "100px";

(3) offsetLeft と offsetTop は読み取り専用ですが、style.left と style.top は読み取りと書き込みが可能です (読み取り専用は値の取得、書き込み可能は割り当てです)値)

(4) 指定されていない場合 HTML 要素でトップスタイルが指定されている場合、style.top は空の文字列を返します。

要約: 一般的なアプローチは次のとおりです: offsetLeft と offsetTop を使用して値を取得し、style.left と style.top を使用して値を割り当てます (より便利です)。その理由は次のとおりです。

style.left: インラインスタイルのみを取得でき、取得された値が空になる可能性があり、NaN になりやすいです。

offsetLeft: 値を取得するのに特に便利で、簡単に計算できる既製の数値です。読み取り専用であり、値を割り当てることはできません。

アニメーションの種類

フラッシュ（基本的には使用しません）
一定速度（この記事の焦点）
イージング（フォローアップの焦点）

簡単な例は次のとおりです(500 ミリ秒ごとに、ボックスを右に 100 ピクセル移動します)

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  p {
   width: 100px;
   height: 100px;
   background-color: pink;
   position: absolute;
  }
 </style>
</head>
<body>
<button>动画</button>
<p class="box"></p>

<script>
 var btn = document.getElementsByTagName("button")[0];
 var p = document.getElementsByTagName("p")[0];

 //1、闪动
 // btn.onclick = function () {
 //  p.style.left = "500px";
 // }

 //2、匀速运动
 btn.onclick = function () {
  //定时器，每隔一定的时间向右走一些
  setInterval(function () {
   console.log(parseInt(p.style.left));
   //动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；
   //用style.left赋值，用offsetLeft获取值。
   p.style.left = p.offsetLeft + 100 + "px";
   //p.style.left = parseInt(p.style.left)+10+"px"; //NaN不能用

  }, 500);
 }
</script>
</body>
</html>

効果は次のとおりです:

均一なアニメーションのパッケージ化: 30 ミリ秒間隔ごとに、ボックスを 10 ピクセル移動します [重要]

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  .box1 {
   margin: 0;
   padding: 5px;
   height: 300px;
   background-color: #ddd;
   position: relative;
  }

  button {
   margin: 5px;
  }

  .box2 {
   width: 100px;
   height: 100px;
   background-color: red;
   position: absolute;
   left: 195px;
   top: 40px;
  }

  .box3 {
   width: 100px;
   height: 100px;
   background-color: yellow;
   position: absolute;
   left: 0;
   top: 150px;
  }
 </style>
</head>
<body>
<p class="box1">
 <button>运动到 left = 200px</button>
 <button>运动到 left = 400px</button>
 <p class="box2"></p>
 <p class="box3"></p>
</p>

<script>
 var btnArr = document.getElementsByTagName("button");
 var box2 = document.getElementsByClassName("box2")[0];
 var box3 = document.getElementsByClassName("box3")[0];

 //绑定事件
 btnArr[0].onclick = function () {
  //如果有一天我们要传递另外一个盒子，那么我们的方法就不好用了
  //所以我们要增加第二个参数，被移动的盒子本身。
  animate(box2, 200);
  animate(box3, 200);
 }

 btnArr[1].onclick = function () {
  animate(box2, 400);
  animate(box3, 400);
 }

 //【重要】方法的封装：每间隔30ms，将盒子向右移动10px
 function animate(ele, target) {
  //要用定时器，先清除定时器
  //一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
  //我们可以把定时器本身，当成为盒子的一个属性
  clearInterval(ele.timer);
  //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
  //目标值如果大于当前值取正，目标值如果小于当前值取负
  var speed = target > ele.offsetLeft ? 10 : -10; //speed指的是步长
  ele.timer = setInterval(function () {
   //在执行之前就获取当前值和目标值之差
   var val = target - ele.offsetLeft;
   ele.style.left = ele.offsetLeft + speed + "px";
   //移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了
   //因为步长有正有负，所有转换成绝对值来比较
   if (Math.abs(val) < Math.abs(speed)) {
    ele.style.left = target + "px";
    clearInterval(ele.timer);
   }
  }, 30)
 }
</script>
</body>
</html>

達成される効果:

上記のコードのメソッドのカプセル化は、テンプレートステップとして使用できるので、覚えておいてください。実は、このカプセル化方法は次のように書くとより厳密で理解しやすくなります: (if文を改良)

 //【重要】方法的封装：每间隔30ms，将盒子向右移动10px
 function animate(ele, target) {
  //要用定时器，先清除定时器
  //一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
  //我们可以把定时器本身，当成为盒子的一个属性
  clearInterval(ele.timer);
  //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
  //目标值如果大于当前值取正，目标值如果小于当前值取负
  var speed = target > ele.offsetLeft ? 10 : -10; //speed指的是步长
  ele.timer = setInterval(function () {
   //在执行之前就获取当前值和目标值之差
   var val = target - ele.offsetLeft;

   //移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了
   //因为步长有正有负，所有转换成绝对值来比较
   if (Math.abs(val) < Math.abs(speed)) { //如果val小于步长，则直接到达目的地；否则，每次移动一个步长
    ele.style.left = target + "px";
    clearInterval(ele.timer);
   } else {
    ele.style.left = ele.offsetLeft + speed + "px";
   }
  }, 30)
 }

コード例:カルーセルチャートの実装

コードの完全版は次のとおりです。 (コメントはすでに詳細になっています)

<!doctype html>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>无标题文档</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
   list-style: none;
   border: 0;
  }

  .all {
   width: 500px;
   height: 200px;
   padding: 7px;
   border: 1px solid #ccc;
   margin: 100px auto;
   position: relative;
  }

  .screen {
   width: 500px;
   height: 200px;
   overflow: hidden;
   position: relative;
  }

  .screen li {
   width: 500px;
   height: 200px;
   overflow: hidden;
   float: left;
  }

  .screen ul {
   position: absolute;
   left: 0;
   top: 0px;
   width: 3000px;
  }

  .all ol {
   position: absolute;
   right: 10px;
   bottom: 10px;
   line-height: 20px;
   text-align: center;
  }

  .all ol li {
   float: left;
   width: 20px;
   height: 20px;
   background: #fff;
   border: 1px solid #ccc;
   margin-left: 10px;
   cursor: pointer;
  }

  .all ol li.current {
   background: yellow;
  }

  #arr {
   display: none;
  }

  #arr span {
   width: 40px;
   height: 40px;
   position: absolute;
   left: 5px;
   top: 50%;
   margin-top: -20px;
   background: #000;
   cursor: pointer;
   line-height: 40px;
   text-align: center;
   font-weight: bold;
   font-family: &#39;黑体&#39;;
   font-size: 30px;
   color: #fff;
   opacity: 0.3;
   border: 1px solid #fff;
  }

  #arr #right {
   right: 5px;
   left: auto;
  }
 </style>

 <script>
  window.onload = function () {

   //需求：无缝滚动。
   //思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候
   //  直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到
   //  第一张图片，然后滑动到第二张
   //步骤：
   //1.获取事件源及相关元素。（老三步）
   //2.复制第一张图片所在的li,添加到ul的最后面。
   //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
   //4.鼠标放到ol的li上切换图片
   //5.添加定时器
   //6.左右切换图片（鼠标放上去隐藏，移开显示）


   //1.获取事件源及相关元素。（老三步）
   var all = document.getElementById("all");
   var screen = all.firstElementChild || all.firstChild;
   var imgWidth = screen.offsetWidth;
   var ul = screen.firstElementChild || screen.firstChild;
   var ol = screen.children[1];
   var p = screen.lastElementChild || screen.lastChild;
   var spanArr = p.children;

   //2.复制第一张图片所在的li,添加到ul的最后面。
   var ulNewLi = ul.children[0].cloneNode(true);
   ul.appendChild(ulNewLi);
   //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
   for (var i = 0; i < ul.children.length - 1; i++) {
    var olNewLi = document.createElement("li");
    olNewLi.innerHTML = i + 1;
    ol.appendChild(olNewLi)
   }
   var olLiArr = ol.children;
   olLiArr[0].className = "current";

   //4.鼠标放到ol的li上切换图片
   for (var i = 0; i < olLiArr.length; i++) {
    //自定义属性，把索引值绑定到元素的index属性上
    olLiArr[i].index = i;
    olLiArr[i].onmouseover = function () {
     //排他思想
     for (var j = 0; j < olLiArr.length; j++) {
      olLiArr[j].className = "";
     }
     this.className = "current";
     //鼠标放到小的方块上的时候索引值和key以及square同步
//     key = this.index;
//     square = this.index;
     key = square = this.index;
     //移动盒子
     animate(ul, -this.index * imgWidth);
    }
   }

   //5.添加定时器
   var timer = setInterval(autoPlay, 1000);

   //固定向右切换图片
   //两个定时器（一个记录图片，一个记录小方块）
   var key = 0;
   var square = 0;

   function autoPlay() {
    //通过控制key的自增来模拟图片的索引值，然后移动ul
    key++;
    if (key > olLiArr.length) {
     //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张
     ul.style.left = 0;
     key = 1;
    }
    animate(ul, -key * imgWidth);
    //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
    //排他思想做小方块
    square++;
    if (square > olLiArr.length - 1) {//索引值不能大于等于5，如果等于5，立刻变为0；
     square = 0;
    }
    for (var i = 0; i < olLiArr.length; i++) {
     olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
   }

   //鼠标放上去清除定时器，移开后在开启定时器
   all.onmouseover = function () {
    p.style.display = "block";
    clearInterval(timer);
   }
   all.onmouseout = function () {
    p.style.display = "none";
    timer = setInterval(autoPlay, 1000);
   }

   //6.左右切换图片（鼠标放上去显示，移开隐藏）
   spanArr[0].onclick = function () {
    //通过控制key的自增来模拟图片的索引值，然后移动ul
    key--;
    if (key < 0) {
     //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动
     ul.style.left = -imgWidth * (olLiArr.length) + "px";
     key = olLiArr.length - 1;
    }
    animate(ul, -key * imgWidth);
    //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
    //排他思想做小方块
    square--;
    if (square < 0) {//索引值不能大于等于5，如果等于5，立刻变为0；
     square = olLiArr.length - 1;
    }
    for (var i = 0; i < olLiArr.length; i++) {
     olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
   }
   spanArr[1].onclick = function () {
    //右侧的和定时器一模一样
    autoPlay();
   }


   function animate(ele, target) {
    clearInterval(ele.timer);
    var speed = target > ele.offsetLeft ? 10 : -10;
    ele.timer = setInterval(function () {
     var val = target - ele.offsetLeft;
     ele.style.left = ele.offsetLeft + speed + "px";

     if (Math.abs(val) < Math.abs(speed)) {
      ele.style.left = target + "px";
      clearInterval(ele.timer);
     }
    }, 10)
   }
  }
 </script>
</head>

<body>
<p class="all" id=&#39;all&#39;>
 <p class="screen">
  <ul>
   <li><img src="images/1.jpg"/></li>
   <li><img src="images/2.jpg"/></li>
   <li><img src="images/3.jpg"/></li>
   <li><img src="images/4.jpg"/></li>
   <li><img src="images/5.jpg"/></li>
  </ul>
  <ol>

  </ol>
  <p>
   <span><</span>
   <span>></span>
  </p>
 </p>
</p>
</body>
</html>

達成効果:

JSでのオフセットと等速運動の例の分析

オフセットの概要

関連記事