快捷導(dǎo)航

js定時器+簡單的動畫效果實例

更新時間：2017年11月10日 08:31:40 作者：亨者，嘉之會也

下面小編就為大家?guī)硪黄猨s定時器+簡單的動畫效果實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.向下滑動

<!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;
   /* 設(shè)置為隱藏 */
   /*display: none;*/
  }

 </style>
</head>
<body>
<div id="show"></div>
<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);
  // 判斷當(dāng)前的高度是否為 400
  if (height >= 400){
   clearInterval(t);
  } else {
   height++;
   show.style.height = height + 'px';
  }
 },50);*/

 slideDown(show,400);

 /*
  將上述實現(xiàn)的向下滑動效果，封裝在一個固定的函數(shù)中
  * 設(shè)計當(dāng)前實現(xiàn)向下滑動效果函數(shù)的形參
   * elem - 表示實現(xiàn)向下滑動效果的元素
   * maxHeight - 表示元素向下滑動的最大高度值
  * 函數(shù)的邏輯與默認(rèn)設(shè)置CSS樣式屬性的值無關(guān)
  */
 function slideDown(elem, maxHeight){
  // 操作的元素默認(rèn)的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);
   // 判斷當(dāng)前的高度是否為 400
   if (height >= maxHeight){
    clearInterval(t);
   } else {
    height++;
    elem.style.height = height + 'px';
   }
  },50);
 }


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

2.移動效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>移動效果</title>
  <style>
    body {
      margin: 0px;
    }
    #box {
      width: 100px;
      height: 100px;
      background-color: lightcoral;

      position: absolute;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
<div id="box"></div>
<script>
  var box = document.getElementById('box');
  box.onclick = function(){
    clearInterval(t);
  }
  /*
    * 向右移動
     * 當(dāng)前元素移動到頁面的最右邊時 -> 向左移動
    * 向左移動
     * 當(dāng)前元素移動到頁面的最左邊時 -> 向右移動
   */
  var flag = false;// 默認(rèn)表示向右
  var speed = 1;// 表示每次變化的值
  t = setInterval(function(){
    //speed += 0.01;
    // 獲取當(dāng)前頁面的寬度
    var WIDTH = window.innerWidth;
    var style = window.getComputedStyle(box,null);
    var left = parseInt(style.left);
    var width = parseInt(style.width);
    // 判斷當(dāng)前元素移動的方向
    if (flag){// 向左移動
      left -= speed;
    } else {// 向右移動
      left += speed;
    }
    // 判斷什么情況下，向左移動；判斷什么情況下，向右移動
    if ((left + width) >= WIDTH){// 向左移動
      flag = true;
    } else if (left <= 0){// 向右移動
      flag = false;
    }
    box.style.left = left + 'px';
  },10);

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

3.事件與動畫結(jié)合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件與動畫結(jié)合</title>
  <style>
    body {
      margin: 0px;
    }
  </style>
</head>
<body>
<script>
  // 獲取<body>元素
  var body = document.body;
  // 當(dāng)頁面加載完畢后，設(shè)置當(dāng)前<body>元素的高度為當(dāng)前瀏覽器窗口的高度
  window.onload = function(){
    setHeight(body);
  };
  // 當(dāng)用戶改變?yōu)g覽器窗口的大小時，重新設(shè)置<body>元素的高度(等于當(dāng)前窗口的高度)
  window.onresize = function(){
    setHeight(body);
  };
  // 定義函數(shù) - 設(shè)置<body>元素的高度等于當(dāng)前窗口的高度
  function setHeight(elem){
    elem.style.height = window.innerHeight + 'px';
  }

  var width = 100,height = 100;
  // 為<body>元素綁定click事件
  body.onclick = function(event){
    var x = event.clientX;
    var y = event.clientY;
    // 創(chuàng)建<div>元素，顯示的位置在鼠標(biāo)當(dāng)前的坐標(biāo)值
    var div = document.createElement('div');
    div.setAttribute('class','circle');
    body.appendChild(div);
    // rgb(0,0,0)格式 -> 顏色隨機
    var r = parseInt(Math.random()*255);
    var g = parseInt(Math.random()*255);
    var b = parseInt(Math.random()*255);

    div.style.width = width + 'px';
    div.style.height = height + 'px';
    div.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
    div.style.borderRadius = '50%';
    div.style.opacity = 1;
    div.style.position = 'absolute';
    div.style.left = x - width/2 + 'px';
    div.style.top = y - height/2 + 'px';

    animate(div);
  }
  // 定義函數(shù) -> 實現(xiàn)動畫效果
  function animate(elem){
    var style = window.getComputedStyle(elem,null);
    /*var width = parseInt(style.width);
    var height = parseInt(style.height);
    var left = parseInt(style.left);
    var top = parseInt(style.top);
    width++;
    height++;
    elem.style.width = width + 'px';
    elem.style.height = height + 'px';
    elem.style.left = (left - 0.5) + 'px';
    elem.style.top = (top - 0.5) +'px';*/

    var opacity = style.opacity;

    if (opacity <= 0){
      clearTimeout(t);
      // 刪除當(dāng)前元素
    }

    opacity -= 0.01;
    elem.style.opacity = opacity;

    // 設(shè)定定時器
    var t = setTimeout(function(){
      animate(elem);
    },50);
  }

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

以上這篇js定時器+簡單的動畫效果實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: