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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

             font-size: 12px;

         }

         div {

             width: 200px;

             height: 200px;

             background: green;

             position: relative;

             left: -200px;

         }

         span {

             width: 30px;

             height: 30px;

             line-height: 30px;

             background: red;

             position: absolute;

             left: 200px;

             top: 85px;

             text-align: center;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

 <div id="div">

     <span id="show">show</span>

 </div>

 </body>

 </html>

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

 <script>

     function $(id) {

         return typeof id === "string" ? document.getElementById(id) : id;

     }

     window.onload = function() {

         //变量定义区

         var pto = $("div");

         var btn = $("show");

         var timer = null;

         var speed = 0;

         //鼠标移动绑定事件

         btn.onmouseenter = start;

         //函数用于调用定时器timer

         function start() {

             clearInterval(timer);

             timer = setInterval(show, 30);

         }

         //函数用于自动增加

         function show() {

             //speed是速度变量，用于控制窗口移动的速度

             //这里的/20可以变为除任何数，主要为控制速度变化

             speed = (0 - pto.offsetLeft) / 20;

             //调用了Math方法，ceil是四舍五入取整

             speed = Math.ceil(speed);

             if (pto.offsetLeft == 0) {

                 clearInterval(timer);

             } else {

                 pto.style.left = pto.offsetLeft + speed + 'px';

             }

         }

         //鼠标移出绑定事件

         btn.onmouseleave = back;

         //函数用于调用定时器timer

         function back() {

             clearInterval(timer);

             timer = setInterval(clear, 30);

         }

         //函数用于自动减少

         function clear() {

             speed = (-200 - pto.offsetLeft) / 20;

             //调用了Math方法，floor是舍小数取整

             speed = Math.floor(speed);

             if (pto.offsetLeft == -200) {

                 clearInterval(timer)

             } else {

                 pto.style.left = pto.offsetLeft + speed + 'px';

             }

         }

     }

 </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. 项目中处理android 6.0权限管理问题

    android 6.0对于权限管理比较收紧,因此在适配android 6.0的时候就很有必要考虑一些权限管理的问题. 如果你没适配6.0的设备并且权限没给的话,就会出现类似如下的问题: java.la ...

  2. 浏览器的云加速可能导致IP统计异常

    前段时间弄个流量统计相关的东西,请求展示图片时根据请求的IP进行 md5 签名生成点击链接的验证参数,结果发现一个莫名其妙的问题 发现点击日志中有一小部分点击的IP居然不一致,如果是开放给别人用可能存 ...

  3. 内存/硬盘/io关系

    CPU:工人,干活的,判断以及逻辑处理 硬盘:仓库,原料,数据存储 内存:车间,工人干活的地方,车间中加工原料,当车间中没有原料了,在从仓库中取原料,对原料进行加工  内存本身有一定的存储空间,对内存 ...

  4. Java开发工具

    总的来看Java的开发工具无非由两个部分构成,一个JDK一个是IDE,无论JDK是不可变的,IDE则是哪个用着舒服就用哪个. 1JDK 1.1简介 JDK是 Java 语言的软件开发工具包(SDK), ...

  5. logger日志工具类

    日志工厂类 package cn.itcast.utils; import java.util.logging.FileHandler; import java.util.logging.Handle ...

  6. viusal studio 调试错误及解决方法（长期更新记录）

    1.为了看运行结果加了 system("pause"):结果导致图像显示不出来,数据为空.主要是因为system pause后停止计算.图像显示不出来.应该改成:waitKey(0 ...

  7. HDU 1079 Calendar Game 博弈

    题目大意:从1900年1月1日 - 2001年11月4日间选择一天为起点,两个人依次进行两种操作中的任意一种,当某人操作后为2001年11月4日时,该人获胜.问先手是否获胜 操作1:向后移一天 操作2 ...

  8. setAction方法 Snackbar 右侧按钮可以被点击并处理一些事件

    从数据库同一记录取得的字段所组装成的对象应该是同一个对象,然后由不同的Session从数据库同一条记录上分别取得对象,它们的内存地址是不一样的. 一般来说,常见的数字加密方式都可以分为两类,即对称加密 ...

  9. python 基础学习3-函数

    1. 函数参数-默认参数 python函数也可以跟C语言一样,在函数的形参中设定默认值. >>> def test(flag, port = 8080) ... print port ...

  10. 昨天面试遇到的一道C语言题

    楼主之前是做C/C++开发的,今年转到java,hadoop方向了,所以很多C/C++的细节都有些模糊了,碰巧这次面试题中,就出了一道C指针的问题. 问题不算难,但楼主一时之间竟也想不起来答案了... ...