常见问题：定时器加速问题，每次点击会启动一个定时器，解决先清除定时器






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画运动平移</title>

    <style>

        *{margin:0;padding:0;}

        #aa1 {position:absolute;left:0px;width:100px;height:100px;background:#F00;display:inline-block;}

        #btn1 {position:absolute;top:120px;}

        .line {position:absolute;left:300px;width:1px;height:500px;background:#000;}

    </style>

</head>

<body>

<input type="button"  value = "移动" id="btn1">

<div id="aa1"></div>

<div id="aa2"></div>

<div class='line'></div>

<script>

    //1、定时器加速问题，每次点击会启动一个定时器，解决先清楚

    var oBtn1 = document.querySelector('#btn1');

    var oDiv1 = document.querySelector('#aa1');

    var timer=null;

    oBtn1.onclick=function(){

        clearInterval(timer);

        //2、不想改变speed值，判断起始值在目标点的方向

        (300-oDiv1.offsetLeft)<0? speed=-9: speed=9;

        timer = setInterval(function(){

            //3、距离足够近时，设置值

             if(Math.abs(300-oDiv1.offsetLeft)<Math.abs(speed)){

                oDiv1.style.left=300+'px';

                clearInterval(timer);

                timer =null;

            }else {

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

             }

        },20)

    }

</script>

</body>

</html>






动画通用步骤：




：判断速度speed正负：

(目标值-oDiv1.offsetLeft)<? speed=负: speed=正;

、归位

if(Math.abs(目标值-oShare.offsetLeft)<Math.abs(speed)){//显示

         oDiv1.style.left =dest+'px';

         clearInterval(timer);

         timer = null;

 }else {

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

}






 
												


											
练习：javascript-setInterval动画运动平移，定时器动画练习的更多相关文章
	

    
								
  1. 基于canvas实现物理运动效果与动画效果(一)
		
    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...
    
		
    2. 
						
  2. javascript动画效果之缓冲动画(修改版)
		
    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
    
		
    3. 
						
  3. [iOS Animation]-CALayer 定时器动画
		
    定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速 ...
    
		
    4. 
						
  4. Android动画：模拟开关按钮点击打开动画（属性动画之平移动画）
		
    在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持3种动画: 逐帧动画(Frame Ani ...
    
		
    5. 
						
  5. HTML5+javascript实现图片加载进度动画效果
		
    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...
    
		
    6. 
						
  6. 按照vue文档使用JavaScript钩子但是却不能执行动画？
		
    大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 ---------  JavaScript钩子 详情见vue文档:  https://cn.vuejs.or ...
    
		
    7. 
						
  7. 基本动画、复合动画设置 平移、缩放、旋转、透明度 编码实现 xml实现
		
    public class VAActivity extends Activity { private ImageView iv_animation; private TextView tv_anima ...
    
		
    8. 
						
  8. WPF 3D 平移模型+动画（桥梁检测系统）
		
    原文:WPF 3D 平移模型+动画(桥梁检测系统) 关于WPF 3D,网上有很多旋转的例子,但是关于平移的例子并不是太多.本文并非WPF 3D扫盲篇,因此需要对WPF 3D有一定了解,至少知道View ...
    
		
    9. 
						
  9. CoreAnimation4-隐式动画和显式动画
		
    事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在. 当你改变CA ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. HBase Rowkey 设计指南
			
    为什么Rowkey这么重要 RowKey 到底是什么 我们常说看一张 HBase 表设计的好不好,就看它的 RowKey 设计的好不好.可见 RowKey 在 HBase 中的地位.那么 RowKey ...
    
			
    2. 
						
  2. 通过BulkLoad快速将海量数据导入到Hbase
			
    在第一次建立Hbase表的时候,我们可能需要往里面一次性导入大量的初始化数据.我们很自然地想到将数据一条条插入到Hbase中,或者通过MR方式等. 但是这些方式不是慢就是在导入的过程的占用Region ...
    
			
    3. 
						
  3. spark-RDD源码分析
			
    http://stark-summer.iteye.com/blog/2178096 RDD的核心方法: 首先看一下getPartitions方法的源码: getPartitions返回的是一系列pa ...
    
			
    4. 
						
  4. Redis数据过期策略详解
			
    http://www.cnblogs.com/xuliangxing/p/7151812.html 本文对Redis的过期机制简单的讲解一下 讲解之前我们先抛出一个问题,我们知道很多时候服务器经常会用 ...
    
			
    5. 
						
  5. Cloudera Manager和CDH5.8离线安装
			
    https://blog.csdn.net/zzq900503/article/details/52982828 简介 我们在上篇文章中已经了解了CDH,为了后续的学习,我们本章就来安装CDH5.8. ...
    
			
    6. 
						
  6. kernel笔记——网络收发包流程
			
    本文将介绍网络连接建立的过程.收发包流程,以及其中应用层.tcp层.ip层.设备层和驱动层各层发挥的作用. 应用层 对于使用socket进行网络连接的服务器端程序,我们会先调用socket函数创建一个 ...
    
			
    7. 
						
  7. HTML5仿手机微信聊天界面
			
    HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下     给大家带来的是HTML5仿手机微信聊天界面, ...
    
			
    8. 
						
  8. java如何获取一个对象的大小【转】
			
    When---什么时候需要知道对象的内存大小 在内存足够用的情况下我们是不需要考虑java中一个对象所占内存大小的.但当一个系统的内存有限,或者某块程序代码允许使用的内存大小有限制,又或者设计一个缓存 ...
    
			
    9. 
						
  9. Sklearn中的回归和分类算法
			
    一.sklearn中自带的回归算法 1. 算法 来自:https://my.oschina.net/kilosnow/blog/1619605 另外,skilearn中自带保存模型的方法,可以把训练完 ...
    
			
    10. 
						
  10. 使用sz/rz基于串口传输文件
			
    关键词:lrzsz.minicom.ZMODEM.MD5sum等. 在环境受限的嵌入式系统上,往往只有串口可以使用. 此时如果需要传输文件,需要借助rz/sz工具,可以使用的传输协议有ZMODEM.Y ...
    
			
    11.