首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想要在右边移动一个对象,在到达该距离后,它应该使用javascript再次移动到它的原点。

要实现在右边移动一个对象,并在到达一定距离后使用JavaScript再次移动到它的原点,可以使用以下代码:

代码语言:txt
复制
// 获取对象
var object = document.getElementById("object");

// 设置初始位置
var initialPosition = object.offsetLeft;

// 设置移动距离
var distance = 100; // 假设移动100像素

// 设置移动速度
var speed = 5; // 假设每次移动5像素

// 移动对象
function moveObject() {
  // 获取当前位置
  var currentPosition = object.offsetLeft;

  // 判断是否到达目标位置
  if (currentPosition < initialPosition + distance) {
    // 向右移动
    object.style.left = currentPosition + speed + "px";
  } else {
    // 到达目标位置后,使用定时器将对象移动到原点
    clearInterval(timer);
    var timer = setInterval(function() {
      currentPosition = object.offsetLeft;
      if (currentPosition > initialPosition) {
        // 向左移动
        object.style.left = currentPosition - speed + "px";
      } else {
        // 到达原点后停止移动
        clearInterval(timer);
      }
    }, 10);
  }
}

// 调用移动函数
moveObject();

上述代码中,首先获取要移动的对象,并设置初始位置。然后定义移动距离和移动速度。接下来,使用moveObject函数来实现对象的移动。在移动过程中,判断当前位置是否到达目标位置,如果未到达,则向右移动;如果到达目标位置,则使用定时器将对象移动回原点。最后,调用moveObject函数开始移动对象。

这是一个简单的示例,实际应用中可以根据具体需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android Matrix

下面我们来看看四种变换具体情形。由于所有的图形都是由点组成,因此我们只需要考察一个点相关变换即可。 平移变换 假定有一个坐标是 ? ,将其移动到 ?...是将坐标原点移动到 ? , ? 新坐标。 2. ? 是将上一步变换 ? ,围绕新坐标原点顺时针旋转 ? 。 3. ? 经过上一步旋转变换,再将坐标原点回到原来坐标原点。...所以,围绕某一点进行旋转变换,可以分成3个步骤,即首先将坐标原点移至点,然后围绕新坐标原点进行旋转变换,再然后将坐标原点回到原先坐标原点。...错切变换效果就是让所有点x坐标(或者y坐标)保持不变,而对应y坐标(或者x坐标)则按比例发生平移,且平移大小和点到x轴(或y轴)垂直距离成正比。...如果对称轴是y = kx + b这样情况,只需要在上面的基础上增加两次平移变换即可,即先将坐标原点移动到(0, b),然后做上面的关于y = kx对称变换,再然后将坐标原点回到原来坐标原点即可。

1.6K40

A星算法详解(个人认为最详细,最通俗易懂一个版本)「建议收藏」

路径排序(Path Sorting) 计算出组成路径方格关键是下面这个等式: F = G + H 这里, G = 从起点 A 移动到指定方格移动代价,沿着到达方格而生成路径。...H 值通过估算起点于终点 ( 红色方格 ) Manhattan 距离得到,仅作横向和纵向移动,并且忽略沿途墙壁。使用这种方式,起点右边方格到终点有 3 个方格距离,因此 H = 30 。...如果你想考虑其他单位,并使他们移动时绕过彼此,建议你寻路程序忽略它们,再写一些新程序来判断两个单位是否会发生碰撞。...因为其他单位是可以动,当你到达时候它们可能不在自己位置上。这可以产生一些怪异结果,一个单位突然转向来避免和一个已不存在单位碰撞,路径计算出来和穿越路径那些单位碰撞了。...这可以通过预先设定不可到达区域来解决。某种数组中记录这些信息,寻路前检查 Blitz 版程序中,写了个地图预处理程序来完成这个。

2.4K30
  • A*算法详解

    路径排序(Path Sorting) 计算出组成路径方格关键是下面这个等式: F = G + H 这里, G = 从起点 A 移动到指定方格移动代价,沿着到达方格而生成路径。...H 值通过估算起点于终点 ( 红色方格 ) Manhattan 距离得到,仅作横向和纵向移动,并且忽略沿途墙壁。使用这种方式,起点右边方格到终点有 3 个方格距离,因此 H = 30 。...如果你想考虑其他单位,并使他们移动时绕过彼此,建议你寻路程序忽略它们,再写一些新程序来判断两个单位是否会发生碰撞。...因为其他单位是可以动,当你到达时候它们可能不在自己位置上。这可以产生一些怪异结果,一个单位突然转向来避免和一个已不存在单位碰撞,路径计算出来和穿越路径那些单位碰撞了。...这可以通过预先设定不可到达区域来解决。某种数组中记录这些信息,寻路前检查 Blitz 版程序中,写了个地图预处理程序来完成这个。

    2.1K91

    在编程中发现数学之美——使用python和Processing绘制几何图形

    注意原点仍然被标记为(0,0),实际上我们并没有移动原点,只是移动了整个坐标系,这样把原点移动到屏幕中央来了。 使用rotate旋转对象 几何中旋转表示将一个物体围绕着一个中心转动。...上面的代码表示围绕着原点旋转坐标系20度,这儿原点在窗口左上角。下面的图形首先移动原点到窗口中心,然后旋转20度。 Rotate函数使圆上绘制对象变得很容易: 移动原点,到你想要画圆心。...这是因为改变了坐标系原点同时也改变了整个坐标系方向。当移动到方块位置之后,移动到一个方块之前,我们需要再回到方块组成圆心。...:创建了一个t变量,将坐标系移动到我们绘制三角形位置,旋转坐标系,绘制三角形,最后增加t值。...讲到这儿,你应该想起了勾股定理。 我们假设大三角形中心到任意一个顶点距离是length,也就是30-60-90三角形斜边。

    6.2K11

    路径规划算法之A*算法

    路径排序 计算出组成路径方格关键是下面这个等式: F=G+H G代表从起点S移动到这个节点代价,沿着到达节点而生成路径。 H是从指定节点移动到终点D估算成本。...因为在这个时候我们还不知道到终点真正距离,所以H只是对剩余距离估算值,在这里我们采用曼哈顿方法对其进行估算。 曼哈顿距离:计算从当前节点横向或纵向移动到达目标所经过方格数,忽略对角移动。...继续搜索 为了继续搜索,我们从open list中选择F值最小节点,这里对应应该是起点S右边F值为4格子。...现在我们已经检查了当前方格所有相邻方格,也对他们进行了处理,接下来选择下一个待检查方格了。 再次遍历open list,现在只有7个方格了,依然选择F值最小那个。...,并且将当前方格设置为父亲节点,记录这个方格G、H和F值; 如果已经openlist中,检查经由当前方格到达它是否是更优路径,用G值作参考,更小G值表示这是更优路径。

    46010

    Unity Demo教程系列——Unity塔防游戏(二)敌人(Moving Through a Maze)

    我们将使用机器人,蜘蛛,鬼魂或诸如立方体之类简单对象。但总的来说,敌人拥有任意复杂3D模型。为了便于支持,我们将为敌人预制层使用一个对象对象仅附加了Enemy组件。 ?...(预制体根节点) 给对象一个子节点,即Model根。应该具有transform组件。 ?...(敌人出现在出生点上) 3 移动敌人 一旦敌人出现,应该开始沿着路径移动到最近目的地。我们必须为它们设置动画,以实现这一目标。我们首先简单地将它们图块之间滑动,然后使它们移动更加复杂。...进度完成,对下一个瓦片重复过程。但是路径可以随时更改。我们将继续按照计划路线行驶,并在到达一个瓦片时重新评估,而不是找出正在进行路线。 让敌人追踪两个瓦片,这样它就不会受到路径变化影响。...相反,准备下一个状态之前,我们必须规范进度,并在进入新状态应用新因子。 ? 前进状态不需要任何改变,因此使用系数1。向右或向左转时,敌人覆盖了半径为½四分之一圆,因此覆盖距离为¼π。

    2.3K10

    scrollIntoView()方法导致整个页面产生偏移

    问题描述 今天在做页面UI改版时候发现,之前使用是dom.scrollIntoView(); 使得点击右侧题目编号时候,让左侧题目滚动到页面可视区域。...如果不知道 scrollIntoView 如果使用有篇文章专门写了 scrollIntoView 简单使用:scrollIntoView() 让元素进入可视区域 · Issue #167 但是现在有个问题就是...如下图所示,当我点击第9题时候,左侧第9题移动到视口中,但是整个页面包括导航栏都往上移动了,且无法回来,整个页面是没有滚动条。 ?...只能借助搜索引擎了,于是Stack Overflow 上面找到了一篇文章: javascript - ScrollIntoView() causing the whole page to move...这段代码执行,就可以让元素到达父元素顶部位置。 注意事项:offsetTop 不一定是相对于父元素,如果有很多父元素的话,它是相对于第一个定位父元素

    4.2K40

    Android滑动菜单框架完全解析,教你如何一分钟实现滑动菜单特效

    */ private int leftEdge; /** * 左侧布局最多可以滑动到右边缘。值恒为0,即marginLeft到达0之后,不能增加。...如果手指移动距离大于屏幕1/2,或者手指移动速度大于SNAP_VELOCITY, * 就认为应该滚动将左侧布局展示出来。...如果手指移动距离加上leftLayoutPadding大于屏幕1/2, * 或者手指移动速度大于SNAP_VELOCITY, 就认为应该滚动将右侧布局展示出来。...,当滚动到达左边界或右边界时,跳出循环。...因此在这里我们也可以看出,使用SlidingLayout这个布局前提条件,必须为这个布局提供两个子元素,第一个元素会作为左边布局偏移出屏幕,第二个元素会作为右边布局显示屏幕上。

    2.2K60

    Android中Matrix(矩阵)

    看起来大概是下面这样: Android中,使用一个3×1矩阵来表示一个点: x,y分别代表x,y轴上坐标,而1代表屏幕z轴上坐标为默认。...应用矩阵进行图形变换主要原因,是因为矩阵是可以通过矩阵乘法进行组合使用,如果对canvas绘制bitmap时,先平移T(dx, dy),再旋转R(θ),最后缩放S(k1,k2),就可以将三个变换矩阵相乘...从原点看出去,每个轴旋转方向都是逆时针): Matrix操作可以看做是对上面左手坐标系变换 因为Matrix变换是对每个canvas点起作用,其实也可以看做对这个三维坐标系起了作用,canvas...M’ = T(dx, dy) * M // 右乘 因为矩阵变换是顺序执行,所以平时最常用应该是pre左乘,所有的变换操作都依次执行,比如canvas常用translate等变换方法其实就是左乘...比如:图形变换是以左边原点原点,所以旋转、缩放等功能应用到canvas.drawBitmap()方法时(因为bitmap常从原点往右下方画),图像表现出来结果就特别奇怪,需要将canvas坐标系移动到图像中心点再操作然后再把坐标系回去

    1.7K10

    一个有些意思项目--文件夹对比工具(一)

    只是多了几个字符呢,毕竟,按理来说,插入了几个字符,原来右侧字符被迫右移,其实在程序看来,是从插入地方开始,两个字符串已经开始是不同了。...字符串转换 其实以上问题可以用下面的例子来简单阐述: 假设有一个原始字符串是:ABCABBA,现在我们想把变成:CBABAC,是不是有很多种方式呢?...(4,6)移动到(7,6),依次删除BBA,即变成CBABAC 所以,我们再一次成功到达了右下角,此时字符串也变成了CBABAC。...而Myers目标,应该就是从众多路线中,选出一条距离最短(向右次数 + 向下次数之和;走对角线不算)路线。 而这条最短路线,就是最短diff算法答案。...Myers算法还不是很理解,但是如果按照我们暴力思路,就是每条路线距离都计算一下(向右次数 + 向下次数之和;走对角线不算),然后取最短路线即可。

    56540

    ​canvas 高级功能(上)

    image-20220608230642654 但是,如果你想换回之前使用红色填充颜色,怎么做呢?希望你不会考虑再次重写fillSty1e属性并将它设置为红色!哦,你没这样?太聪明了!...1.4 保持和恢复多个绘图状态 本文开头,曾提到过一次处理多个状态有一些复杂。但是,在学完前面的内容之后,希望现在你已经理解如何处理了。...2.1 平移 最基本操作就是平移,即将2D渲染上下文原点一个位置移动到一个位置。...画布中进行平移使用是translate方法时,实际上移动是2D渲染上下文坐标原点,而不是所绘制对象。...通过移动2D渲染上下文原点,画布中所有对象都将移动相应距离: context.fillRect(150, 150, 100, 100); context.translate(150, 150);

    2K20

    G28指令详解

    如果我们向一个或多个轴添加一个值,如下所示: G28 G91 X0 Y0 Z20.0; 机器会将其读取为在到达参考位置之前 Z 轴上到达刀具上方 20 毫米中间位置。...当将刀具回原始参考位置时,我们可以使用它来避开机器内部障碍物,如图所示。...提示: 机器将需要 G28 行中 G91 命令。G91 将机器切换到增量定位 如果省略此代码,机器将首先移动到由您数据定义零位置。换句话说,它会在返回参考点之前将刀具插入零件中。...G53 参考返回如下所示: G53 Z0.0; G53 G 代码调用机床原点原点通常是换刀位置或机床原点。上面的代码行告诉机床使用机床数据,如果不输入参数我们就无法更改数据(不建议)。...G28.1指令 使用 G28.1 G 代码指令会将所有轴参考到原点位置。 行为类似于某些 CNC 控件上“全部回零”按钮。

    2.2K40

    路径查找器AI

    (看图) [可视弧] 然后,Cartesio为每个节点创建一个区域以及相邻节点(称之为AI_star)列表,通过到达目的地。...[hq72ujqy00.jpg] 最后,通过传递一个Cartesio对象,起点P1和终点P2来初始化Super_path类。Super_path.Next()可以一步一步地从起点移动到终点。...E抛出以下信息 对E(目的)引用 对S(来源)引用 一个指向节点引用(即上一个节点,本例中为E); 距离D(终点到E距离,在这种情况下为0)。...如果不是第一个消息,则如果新距离D + dist(this,M.Throu)小于存储节点中距离,则存储距离取新距离D + dist(this,M.Throu),并抛出一个消息去更新D与...对于起点S接收到每个消息M,S考虑具有最小距离D那个消息,然后,S就可以知道应该怎么走,才能尽快到达E了。 举一个从E到S消息传播例子(蓝色箭头为传播方向),如下图(图中只列出部分信息)。

    1.4K70

    Android Matrix详解

    一、 平移变换 假定有一个坐标是 ,将其移动到 ,再假定在x轴和y轴方向移动大小分别为: 如下图所示: 不难知道: 如果用矩阵来表示的话,就可以写成: 二、 旋转变换 2.1 围绕坐标原点旋转...: 假定有一个点 ,相对坐标原点顺时针旋转 情形,同时假定P点离坐标原点距离为r,如下图: 那么, 如果用矩阵,就可以表示为: 2.2 围绕某个点旋转 如果是围绕某个点 顺时针旋转 ,那么可以用矩阵表示为...是将坐标原点移动到新坐标。 2. 是将上一步变换 ,围绕新坐标原点顺时针旋转 。 3. 经过上一步旋转变换,再将坐标原点回到原来坐标原点。...所以,围绕某一点进行旋转变换,可以分成3个步骤,即首先将坐标原点移至点,然后围绕新坐标原点进行旋转变换,再然后将坐标原点回到原先坐标原点。...如果对称轴是y = kx + b这样情况,只需要在上面的基础上增加两次平移变换即可,即先将坐标原点移动到(0, b),然后做上面的关于y = kx对称变换,再然后将坐标原点回到原来坐标原点即可。

    16110

    【IOS开发基础系列】UIScrollView专题

    1 UIScrollView原理        滚动过程当中,其实是修改原点坐标。当手指触摸,scroll view会暂时拦截触摸事件,使用一个计时器。...一个滚动视图可以根据手指移动,调整原点位置。展示内容视图,根据滚动视图原点位置,开始绘制视图内容,这个原点位置就是滚动视图偏移量。...为了达到这个目的,临时中断了一个touch-down事件,通过建立一个定时器,定时器开始行动之前,看是否触摸手指做了任何移动。...假如是 NO,那么滚动到达边界会立刻停止。...编写很多子类是很沉闷事情,你最后会有很多无法重复使用单独视图,而MVC视图部分一个重点是视图是可以不同控制器和不同模式之中重复使用,如果我们把所有逻辑都放在视图中,减少了可复用性。

    57930

    ——化简2048游戏

    大家好,又见面了,是全栈君。 游戏介绍: 这个能轻松到达 4096. 所以取名为 4096了。...那么就在对应地方补上2、4。使得这两个比較大值能够merge。 比例如以下图中两个32色块: 这个图中向左移动,32和32会移动到左边。...那么第二行32右边出现小方块,那么下一次向右移动,32就有机会和32合并。 例如以下图所看到: 然后继续右移,32能够和32合并了: 5. 最空旷地方生成2/4....另外另一些值得优化点。 比如第5点,在这一点中,须要生成色块不应该和最大值一条直线上。 另外还须要做优化就是:假设你一直左右移。非常有可能有一个状态导致无法再左右移动。那么就须要上下移动。...之后步骤一定要让最大值所在色块不能向上移动。而其它底线色块能够向上移动。这样上,底线就仅仅有最大值。然后再次左右移动就能够将最大值放入到边角中。

    1.7K10

    CSS

    div4发现上一个元素div3是标准流中元素,因此div4顶部和div3底部对齐,并且总是成立,因为从图中可以看出,div3上,div4也跟着上,div4总是保证自己顶部和上一个元素div3...允许两边都可以有浮动对象 left   :  不允许左边有浮动对象 right  :  不允许右边有浮动对象 both  :  不允许有浮动对象 定义非常容易理解,但是读者实际使用时可能会发现不是这么回事...div4发现上一个元素div3是标准流中元素,因此div4顶部和div3底部对齐,并且总是成立,因为从图中可以看出,div3上,div4也跟着上,div4总是保证自己顶部和上一个元素div3...就拿上边例子来说,我们是让div2移动,但我们却是div1元素CSS样式中使用了清除浮动,试图通过清除div1右边浮动元素(clear:right;)来强迫div2下,这是不可行,因为这个清除浮动是...如果设定 position:relative,就可以使用 top,bottom,left和 right 来相对于元素文档中应该出现位置来移动这个元素。

    2K30

    A星寻路算法(A* Search Algorithm)

    你是否在做一款游戏时候创造一些怪兽或者游戏主角,让它们移动到特定位置,避开墙壁和障碍物呢? 如果是的话,请看这篇教程,我们会展示如何使用A星寻路算法来实现!...A星寻路算法中,通过给每一个方块一个和值,值被称为路径增量。让我们看下工作原理! 路径增量 我们将会给每个方块一个G+H 和值: G是从开始点A到当前方块移动量。...关于G值 G是从开始点A到达当前方块移动量(本游戏中是指方块数目)。 为了计算出G值,我们需要从前继(上一个方块)获取,然后加1。...建议根据“城市街区距离”去计算方块相关值,确保你理解了原理。 同时注意F值(左上角)是G(左下角)值和H(右下脚)值和。...下面是从原路返回示意图: 最短路径是从终点开始,一步步返回到起点构成(例子:终点我们可以看到箭头指向右边,所以方块前继左边)。

    2.7K31

    A*寻路初探(转载)

    后面会解释具体用途。 3,从开启列表中删除点A,把加入到一个“关闭列表”,列表中保存所有不需要再次检查方格。 在这一点,你应该形成如图结构。图中,暗绿色方格是你起始方格中心。...G值是14。如果我们从当前格移动到那里,G值就会等于20(到达当前格G值是10,移动到上面的格子将使得G值增加10)。因为G值20大于14,所以这不是更好路径。如果你看图,就能理解。...从起始格A移动到目标格B只是简单从每个格子(节点)中点沿路径移动到一个,直到你到达目标点。就这么简单。 ?...那是因为其他单位会移动,当你到达他们原来位置时候,他们可能已经离开了。这有可能会导致奇怪结果,一个单位突然转向,躲避一个已经不在那里单位,并且会撞到计算完路径,冲进路径中单位。...你也看看以下网页。读了这篇教程,他们应该变得容易理解多了。 * Amit A* 页面:这是由Amit Patel制作,被广泛引用页面,如果你没有事先读这篇文章,可能会有点难以理解。

    1.3K10

    Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单侧滑实现

    一个Activity布局中需要有两部分,一个是菜单(menu)布局,一个是内容(content)布局。两个布局横向排列,菜单布局左,内容布局右。...*/ private int leftEdge; /** * menu最多可以滑动到右边缘。值恒为0,即marginLeft到达0之后,不能增加。...如果手指移动距离大于屏幕1/2,或者手指移动速度大于SNAP_VELOCITY, * 就认为应该滚动将menu展示出来。...,当滚动到达左边界或右边界时,跳出循环。...当手指离开屏幕时候,会判断应该动到菜单布局还是内容布局,判断依据是根据手指滑动距离或者滑动速度,细节可以看代码中注释。

    2.9K100
    领券