这里的html和css的代码是复制之前的随便匀速运动的，所以不需要改变

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <title>Document</title>
  7.      <style type="text/css">
  8.          * {
  9.              margin: 0;
  10.              padding: 0;
  11.              font-size: 12px;
  12.          }
  13.  
  14.          div {
  15.              width: 200px;
  16.              height: 200px;
  17.              background: green;
  18.              position: relative;
  19.              left: -200px;
  20.          }
  21.  
  22.          span {
  23.              width: 30px;
  24.              height: 30px;
  25.              line-height: 30px;
  26.              background: red;
  27.              position: absolute;
  28.              left: 200px;
  29.              top: 85px;
  30.              text-align: center;
  31.              cursor: pointer;
  32.          }
  33.      </style>
  34.  </head>
  35.  
  36.  <body>
  37.  <div id="div">
  38.      <span id="show">show</span>
  39.  </div>
  40.  </body>
  41.  
  42.  </html>

js代码和之前的匀速运动的区别在于需要添加一个变量用来控制速度变化

  1.  <script>
  2.      function $(id) {
  3.          return typeof id === "string" ? document.getElementById(id) : id;
  4.      }
  5.  
  6.      window.onload = function() {
  7.          //变量定义区
  8.          var pto = $("div");
  9.          var btn = $("show");
  10.          var timer = null;
  11.          var speed = 0;
  12.  
  13.          //鼠标移动绑定事件
  14.          btn.onmouseenter = start;
  15.  
  16.          //函数用于调用定时器timer
  17.          function start() {
  18.              clearInterval(timer);
  19.              timer = setInterval(show, 30);
  20.          }
  21.  
  22.          //函数用于自动增加
  23.          function show() {
  24.              //speed是速度变量，用于控制窗口移动的速度
  25.              //这里的/20可以变为除任何数，主要为控制速度变化
  26.              speed = (0 - pto.offsetLeft) / 20;
  27.              //调用了Math方法，ceil是四舍五入取整
  28.              speed = Math.ceil(speed);
  29.              if (pto.offsetLeft == 0) {
  30.                  clearInterval(timer);
  31.              } else {
  32.                  pto.style.left = pto.offsetLeft + speed + 'px';
  33.              }
  34.  
  35.          }
  36.  
  37.          //鼠标移出绑定事件
  38.          btn.onmouseleave = back;
  39.  
  40.          //函数用于调用定时器timer
  41.          function back() {
  42.              clearInterval(timer);
  43.              timer = setInterval(clear, 30);
  44.          }
  45.  
  46.          //函数用于自动减少
  47.          function clear() {
  48.              speed = (-200 - pto.offsetLeft) / 20;
  49.              //调用了Math方法，floor是舍小数取整
  50.              speed = Math.floor(speed);
  51.              if (pto.offsetLeft == -200) {
  52.                  clearInterval(timer)
  53.              } else {
  54.                  pto.style.left = pto.offsetLeft + speed + 'px';
  55.              }
  56.          }
  57.  
  58.      }
  59.  </script>

javascript动画效果之缓冲动画的更多相关文章

  1. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  2. Android 动画效果 及 自定义动画

    1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...

  3. Java 给PPT添加动画效果（预设动画/自定义动画）

    PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...

  4. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  5. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  6. 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标

    1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...

  7. 通过CSS3属性值的变化实现动画效果+触发这些动画产生交互

    css3过渡 transition 兼容性:IE10+ transition: none | all | property 默认为none all 表示所有属性过渡 property 指定属性值,如c ...

  8. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  9. 原生js动画效果（源码解析）

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

随机推荐

  1. 【angular】angular如何让传递变量参数+ng-change的使用

    HTML: <div class="form-group"> <label class="col-sm-2 control-label"> ...

  2. （ASP.NET ）去除字符串中的HTML标签

    string strDoContent = "执行增加<a href="/AdminCX/Admin_CompanyDetail.aspx?CompanyGuid=cd8e1 ...

  3. Path.OS 模块的使用方法(转自DK的博客)

    Python os.path模块 使用方法 os.path.abspath(path) #返回绝对路径 os.path.basename(path) #返回文件名 os.path.commonpref ...

  4. selenium1,selenium2,watir的比较

    接触web方面的自动化测试,会接触几个常用的工具,selenium1,selenium2,watir 有的时候总是混淆,那么他们的优缺点啥的呢,在让你给项目选自动化框架,会选择哪个??? 1,语言的支 ...

  5. Python---day5-各类模块的使用

    #_*_coding:utf-8_*_ 时间模块import time # print(time.clock()) #返回处理器时间,3.3开始已废弃 , 改成了time.process_time() ...

  6. 无法启动MYSQL服务”1067 进程意外终止”解决办法

    原文:http://www.111cn.net/database/mysql/48888.htm   本文章主要是总结了各种导致mysql提示无法启动MYSQL服务"1067 进程意外终止& ...

  7. qt5.6 for android

    尝试在qt下写android的程序.测试,没有编译成功. 在选项-android配置页面,提示有"Qt version for 3 architectures are missing&quo ...

  8. 关于Application的onCreate以及Activity生命周期在源码里都是什么时候调用的

    在ActivityThread.handleLaunchActivity中 Activity a = performLaunchActivity(r, customIntent);这一方法最终回调目标 ...

  9. Gym 101102B The Little Match Girl（贪心+规律）

    这个题目的做法不止一种,solve1:每个数字使用的火柴棒都在2~7之间,而且是连续的,就是2-7之前没有空着的数.这样就有一个结论,在下界为l,上界为r的情况下,假设有n个数,那么火柴棒总数一定在n ...

  10. django+celery+rabitmq

    django 项目中的设置(proj代表项目目录) proj settings.py CELERY_BROKER_URL = 'amqp://guest:guest@localhost:5672/' ...