原生JS实现div匀速移动效果

最新推荐文章于 2023-06-03 13:05:32 发布
最新推荐文章于 2023-06-03 13:05:32 发布
阅读量891 收藏 2
点赞数
分类专栏： 前端知识点系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ligonglanyuan/article/details/122213576
版权

javascript html 前端

        点击开始按钮，然后div从当前位置向右匀速移动，当div移动到距离左侧500px的位置，停止移动；

<!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>
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    btn.onclick = function () {
      var step = 6; 
      var target = 500;
      var timerId = setInterval(function () {
        if (box.offsetLeft >= target) {  
          clearInterval(timerId);
          box.style.left = target + 'px';
          return;
        }
        box.style.left = box.offsetLeft + step + 'px';
      }, 30);
    }
  </script>
</body>
</html>

我是波哩个波
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生javascript实现匀速运动动画效果
10-22
主要为大家详细介绍了原生javascript实现匀速运动动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现拖拽移动与缩放效果
11-19
本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码，供大家参考，具体内容如下 效果图如下-实现了简单的拖拽和缩放功能 第一步—简单的拖拽功能 // 创建一个MoveClass构造函数 function MoveClass(id, ...
原生js实现移动动画，变化动画
weixin_40618068的博客
01-12 1129
初生牛犊不怕虎，想用博客来记录自己以前的一些学习经历，对您有帮助的话请留下你们的赞哦！ 话不多说进入正题 首先我们应该怎么用原生js实现动画，思路是这样的 通过某些方法获取到当前元素的样式属性值，例如宽度width，高度height等 获取到当前值current之后，要传入我们target，就是我们希望元素移动到哪里，即是目标值，但因业务的需要我们可能不仅要让元素移动的同时也要改变其他样式，例如...
js控制div匀速移动和停止
热门推荐
h_qingyi的博客
11-30 1万+
JS实现对象匀速、变速移动和停止 JS实现对象匀速移动和停止 HTML： JS：实现向右运动 var timer=null;window.onload=function(){var odiv=document.getElementById('d1');var obtn=document.getElementById('btn');clearInt
js之div盒子的移动和网页轮播图
m0_53417841的博客
07-09 735
网页轮播图的制作
前端开发JS--匀速运动
m0_51937621的博客
01-10 1272
准备工作 1、有一个用户可视的物体 2、点击一个按钮，触发运动 在这里插入代码片 一、匀速运动 //运动就是改变物体像素 //有了一个div,js要控制，首先要获取,元素然后在进行控制。 //点击btn，物体快发生运动。 var oDiv=document.getElementsByTagName(“div”)[0]; var oBtn=document.getElementById(‘btn’); oBtn.οnclick=function(){ //s=vt; var iSpeed=4;//以每30m
JavaScript div移动动画
weixin_30780649的博客
08-02 262
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; pa...
原生js实现可拖拽效果
10-20
本文主要介绍了原生js实现可拖拽效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
（vue）js平移动画
qq_55681529的博客
06-03 661
body代码,给了两张图来进行移动，绑定了一个ref属性，主要是为了在onMouted中取得这个dom元素。首先来上图看看效果，主要利用css配合js代码完成，主要利用dom元素的margin值来进行移动。
移动div盒子 原生js
weixin_41865901的博客
12-26 852
开始 点击第一个按钮移动到400px 点击第二个按钮移动到800px 点击第一个按钮移动到400px 这里需要用到定时器 需要注意的是： 1.元素移动div盒子要脱离文档流，即（position：absolute） 2.通过element.style.left不能获取元素的left，只能设置，要用offsetLeft()来获取 3.最好不用var timeid = setInterval(fn,time)的方式，因为这样每点击一次按钮就会定义一个新的timeid，你会发现移动的盒子逐渐加快速度。好的方式是
一个简单的Js平移动画函数封装
ERIC_xiafeng的博客
03-10 681
day07 一、运动函数的封装 div向右运动：div的在当前位置的基础上每次向右移动一定的距离，到指定位置停止 ​ 取出每次一次位移前div的位置+偏移量 div向左运动：div在当前位置基础上每次都向左移动指定距离 (当前位置-偏移量) 运动函数的封装： ​ 将整个运动的实现代码放入一个函数中,将运动函数中变化的量(值不确定的，随着应用场景会发生改变的量)提取为参数，例如：位移的目标对象、每次位移的距离、停止的位置、发生变化的属性 /* 功能：向右移动 参数： @obj 目
前端原生js点击按钮向右移动div
m0_49714202的博客
08-19 1960
前端原生js点击按钮向右移动div
js控制div左右匀速移动，走马灯
Lccccb的博客
11-27 975
move(bol){ //div上一次的left位置信息 let position_left_old = parseInt(this.position_left.split('px')[0]); let countOffset = 0; //点击一次之后总的移动量，用于判断暂停 let speed = 3; //移动速度 let timer...
JS基础_键盘移动div
兴趣是最好的老师
12-12 217
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .
Web每日一练day17 页面div每秒右移10px，10秒结束
weixin_43942765的博客
07-13 505
<HTML> <HEAD> <TITLE>颜色块移动</TITLE> <SCRIPT LANGUAGE="javascript"> function move(){ /* **********Found********** */ var toy = ____________.getElementById("toy"); /* **********Found********** */ toy.style.left = par.
用js实现div元素向右平滑移动300px， 耗时1秒，不能使用transition
songJunFeng1的博客
12-01 3049
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单位移动画</title> <style> </style> </head> <body> <div id="element" style="width: 200px; height: 200px; backgro.
定时器的应用——div向右移动
mantou_riji的博客
04-09 947
点击按钮div向右移动 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <style> * { margin: 0; padding: 0; } #box1 { width: 100px; height: 100px; backgr
JS运动函数
前端开发,HTML5,css3,JavaScript,node.js,vue
11-16 749
运动函数,div盒子移动
【JS动态效果】如何jquery实现div右侧滑入滑出的效果
赏樱看雪撸代码
03-24 4686
二话不多说，先看效果哈，这样才能吸引你那双有故事的双眸： 下面就针对这个效果我们做一个核心技术的介绍： 首先我们用到的核心知识点为：jquery的animate函数，其中滑出来和滑进去的缓慢效果是利用CSS3里面的transition属性。另外还有关于点击非div地方隐藏该div的效果主要是click事件触发隐藏效果。 说再多还不如贴代码来解释来的实际： html: <div class="box"> <div class="boxhead"> <h3&g
点击按钮实现div移动动画
最新发布
02-22
要实现点击按钮实现div移动动画，可以使用JavaScript和CSS来实现。下面是一种实现方式： 1. 首先，在HTML中创建一个按钮和一个需要移动的div元素，并给它们分别设置id属性，例如： ```html <button id="moveButton">Move</button> <div id="movingDiv"></div> ``` 2. 接下来，在CSS中定义移动的动画效果。可以使用CSS的`@keyframes`规则来定义动画的关键帧，然后通过`animation`属性将动画应用到div元素上。例如： ```css @keyframes moveAnimation { 0% { left: 0; } 100% { left: 200px; } } #movingDiv { position: relative; width: 100px; height: 100px; background-color: red; animation: moveAnimation 1s ease-in-out infinite; } ``` 上述代码定义了一个名为`moveAnimation`的动画，从左边距离为0开始，到左边距离为200px结束。然后将该动画应用到id为`movingDiv`的div元素上，设置动画持续时间为1秒，使用ease-in-out缓动函数，并设置动画无限循环。 3. 最后，在JavaScript中添加事件监听器，当按钮被点击时触发移动动画。可以使用`addEventListener`方法来监听按钮的点击事件，并在事件处理函数中修改div元素的样式。例如： ```javascript var moveButton = document.getElementById("moveButton"); var movingDiv = document.getElementById("movingDiv"); moveButton.addEventListener("click", function() { movingDiv.style.animationPlayState = "running"; }); ``` 上述代码获取id为`moveButton`和`movingDiv`的元素，并为按钮添加点击事件监听器。当按钮被点击时，将div元素的`animationPlayState`属性设置为"running"，即开始播放动画。 这样，当点击按钮时，div元素就会开始移动动画。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是波哩个波

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值