<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    body {

      margin: 0;

    }

    #box {

      position: relative;

      width: 100px;

      height: 100px;

      background-color: red;

    }

    #box1 {

      margin-top: 10px;

      position: relative;

      width: 100px;

      height: 100px;

      background-color: blue;

    }

  </style>

</head>

<body>

  <input type="button" id="btn" value="动画 800">

  <input type="button" id="btn1" value="动画 400">

  <div id="box">

  </div>

  <div id="box1">

  </div>

  <script>

    var btn = document.getElementById('btn');

    var btn1 = document.getElementById('btn1');

    var box = document.getElementById('box');

    var box1 = document.getElementById('box1');

    btn.onclick = function () {

      animate(box, 800);

      animate(box1, 800);

      // console.log(box.style.left);

      // console.log(box.offsetLeft);

      // box.style.left = box.offsetLeft + 10 + 'px';

      // console.log(box.style.left);

      // console.log(box.offsetLeft);

    }

    btn1.onclick = function () {

      animate(box, 400);

      animate(box1, 400);

      //  console.log(box.style.left);

      // console.log(box.offsetLeft);

      // box.style.left = box.offsetLeft - 10 + 'px';

      // console.log(box.style.left);

      // console.log(box.offsetLeft);

    }

    // var timerId = null;

    // 封装动画的函数

    function animate(element, target) {

       // 通过判断，保证页面上只有一个定时器在执行动画

      if (element.timerId) {

        clearInterval(element.timerId);

        timerId = null;

      }

      element.timerId = setInterval(function () {

        // 步进  每次移动的距离

        var step = 10;

        // 盒子当前的位置

        var current = element.offsetLeft;

        // 当从400 到 800  执行动画

        // 当从800 到 400  不执行动画

        // 判断如果当前位置 > 目标位置 此时的step  要小于0

        if (current > target) {

          step = - Math.abs(step);

        }

        // Math.abs(current - target)   < Math.abs(step)

        if (Math.abs(current - target)   < Math.abs(step)) {

          // 让定时器停止

          clearInterval(element.timerId);

          // 让盒子到target的位置

          element.style.left = target + 'px';

          return;

        }

        // 移动盒子

        current += step;

        element.style.left = current + 'px';

      }, 30);

    }

  </script>

</body>

</html>

bom案例5-简单动画的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. jquery添加光棒效果的各种方式以及简单动画复杂动画

    过滤器.绑定事件.动画   一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...

  3. UIView简单动画

    UIView动态实现的效果有以下几种: 1.动态改变frame 2.动态改变color 3.动态改变alpha 4.动态改变bounds 首先,我们先看几种BasicView动画 #pragma ma ...

  4. IOS 简单动画 首尾式动画

    首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...

  5. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  7. Cocos2d-x 2.1.5 简单动画

    Cocos2d新版本函数更改了一些. 下面的代码可以产生一个简单动画. //第一步:生成动画需要的数据 CCTexture2D *texture=CCTextureCache::sharedTextu ...

  8. UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  9. python实现简单动画——生命游戏

    生命游戏 生命游戏的宇宙是一个无限的,其中细胞的二维正交网格,每个细胞处于两种可能的状态之一,即*活着*或*死亡*(分别是*人口稠密*和*无人居住*).每个细胞与它的八个邻居相互作用,这八个邻居是水平 ...

随机推荐

  1. [opencv]白平衡算法中的灰度世界法,改善图像发红发蓝发绿的现象

    #include<iostream> #include <opencv2/opencv.hpp> #include <math.h> using namespace ...

  2. CapstoneCS5212替代RTD2166|DP转VGA转换电路设计方法|CS5212替代方案

    Capstone CS5212适用于设计DP转VGA转换电路,主要用在嵌入式单片机基于工业机或者INTEL X86主板上面,也适用于多个电子配件市场和显示器应用程序,如笔记本电脑.主板.台式机.适配器 ...

  3. 编写Java程序随机输入日期计算星期几，打印任意一年的日历

    需求说明: 随机输入日期计算星期几,打印任意一年的日历 已知,1900年1月1日是星期1,用户随机输入年月日,计算星期几 实现思路: 一.知道1900年1月1日为星期一,求输入的年份月份与1900年1 ...

  4. HTML网页设计基础笔记 • 【第7章 盒子模型】

    全部章节   >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...

  5. Oracle 系统函数

      函数名称 返回值类型 说明 示例 字符串函数 ascii(str) number 返回str首字母的ASCII码 select ascii('A') from dual; --65select a ...

  6. centos7 重定向符号

    这篇只记录使用对应的使用方法,原理后期更新 >> 追加输出 <<追加输入 >输出 <输入 将正确和错误信息同事保留到一个文件 echo "this is ...

  7. Git创建分支进行开发

    一.业务场景 自己当前开发的项目算是一个中型项目,整个项目都是由自己一个人开发完成,主要有两个子项目,一个是小程序的后台,一个是小程序的后台管理系统. 因为从一开始就只有我一个人在进行开发,所以自己平 ...

  8. android-sdk环境变量配置

    1.android-sdk环境变量 1.在系统变量新建:ANDROID_HOME,对应变量值为:G:\android-sdk-windows(sdk安装路径) 2.path添加两个变量(tools和p ...

  9. JAVA多线程之并发编程三大核心问题

    概述 并发编程是Java语言的重要特性之一,它能使复杂的代码变得更简单,从而极大的简化复杂系统的开发.并发编程可以充分发挥多处理器系统的强大计算能力,随着处理器数量的持续增长,如何高效的并发变得越来越 ...

  10. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...