<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    body {

      margin: 0;

    }

    #box {

      position: relative;

      background-color: red;

      width: 100px;

      height: 100px;

    }

  </style>

</head>

<body>

  <input type="button" value="开始" id="btn">

  <div id="box"></div>

  <script>

    // 1 点击按钮，让盒子能够向右移动

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

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

    btn.onclick = function () {

      // // style.left 获取的是标签中的style属性设置的样式属性的值

      // // 如果标签中的style没有设置该样式属性，我们获取到的是空字符串

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

      // // 10px10px  当我们给样式属性设置非法的值，浏览器会帮我们过滤掉

      // console.log(box.style.left + 10 + 'px');

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

      //

      //

      // 获取盒子当前的位置  offsetLeft  offsetTop

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

      //

      // box.offsetLeft 只读属性

      //

      // 2 让盒子不停的向右移动

      // 循环的速度非常非常非常快，瞬间循环100次

      // for (var i = 0; i < 100; i++) {

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

      // }

      var timerId = setInterval(function () {

        // 让盒子停在500px的位置

        // 判断盒子当前的位置是否到达500

        //

        // 最终盒子停止的位置

        var target = 600;

        // 步进

        var step = 6;

        if (box.offsetLeft >= target) {

          // 停止定时器

          clearInterval(timerId);

          // 设置横坐标为500

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

          console.log(box.style.left);

          // 退出函数

          return;

        }

        box.style.left = box.offsetLeft + step + 'px';

        console.log(box.style.left);

      }, 30);

    }

  </script>

</body>

</html>

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

  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实现简单动画——生命游戏

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

  10. Blender简单动画:一个小球从一座山上滚下.

    简单动画:一个小球从一座山上滚下.注:[key]方括号内是快捷键; {大括号}内是模式,页签名称或选项等. ==== 1. 建模:    == 1.1 山[shift A] 建立平面plane,可以大 ...

随机推荐

  1. 编写Java程序_输入一个5位数，判断它是不是回文数。即12321是回文数，个位与万位相同，十位与千位相同。

    要求: 输入一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同. 实现代码: package kaoshi; import java.util.Scanner; pu ...

  2. 编写Java程序，使用日期处理类实现日期的格式化输出

    返回本章节 返回作业目录 需求说明: 按"yyyy-MM-dd"格式输入一个字符串型日期,然后输出这个日期为本年中的第几周. 实现思路: 使用SimpleDateFormat格式化 ...

  3. 你还不了解SpringSecurity吗？快来看看SpringSecurity实战总结~

    SpringSecurity简介:   权限管理中的相关概念 主体 principal: 使用系统的用户或设备或从其他系统远程登录的用户等等,简单说就是谁使用系统谁就是主体. 认证 authentic ...

  4. 【】Hadoop生态圈介绍

    Technorati 标记: hadoop,生态圈,ecosystem,yarn,spark,入门 1. hadoop 生态概况 Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用 ...

  5. IIS部署Python-django项目

    1.安装CgiModule模块 首先,IIS要部署django项目,需要CgiModule模块的支持,所以首先我们要确认这个模块是否存在 打开IIS管理器: 我这里是存在的: 如果不存在,可以自行在控 ...

  6. Api接口测试总是似懂非懂，只因这个原理没搞清楚

    ​ 前言 掌握了http协议,就掌握了接口测试 笔者在网络上看过不少接口测试教程,一上来就开始讲怎么操作工具,而不告诉读者为什么要这么操作.读者可能照猫画虎成功了,也可能操作失败了但不知为何出错. 因 ...

  7. 【Warrior刷题笔记】力扣169. 多数元素 【排序 || 哈希 || 随机算法 || 摩尔投票法】详细注释 不断优化 极致压榨

    题目 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/majority-element/ 注意,该题在LC中被标注为easy,所以我们更多应该关 ...

  8. Django_MVT（二）

    一.MVT简介 M全拼为Model,与MVC中的M功能相同,负责和数据库交互,进行数据处理. V全拼为View,与MVC中的C功能相同,接收请求,进行业务处理,返回应答. T全拼为Template,与 ...

  9. java调用redis的多种方式与心得

    心得: /** * 心得: * 1.连接方式主要有:直连同步,直连事务,直连管道,直连管道事务,分布式直连同步,分布式直连管道, * 分布式连接池同步,分布式连接池管道:普通连接池同步,普通连接池管道 ...

  10. Linux上天之路（一）之Linux前世今生

    0. Linux的前世今生 linux是什么 linux是一个计算机的操作系统,与windows类似,是一款系统软件 操作系统 说到操作系统其实我们首先要思考三个问题: 1)操作系统是什么? 2)操作 ...