如何每秒向右移动一次div 10像素？
要实现每秒向右移动一次div 10像素，可以使用CSS的动画和transform属性来实现。
首先，在HTML中创建一个div元素，并给它一个唯一的id，例如：
<div id="myDiv"></div>然后，在CSS中定义div的样式，并添加动画效果：
#myDiv {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: moveRight 1s infinite;
}
@keyframes moveRight {
0% { transform: translateX(0); }
100% { transform: translateX(10px); }
}上述代码中，通过设置div的position属性为absolute，使其脱离文档流，并且通过animation属性设置了一个名为moveRight的动画，持续时间为1秒，并且无限循环播放。在@keyframes中定义了动画的关键帧，从初始状态（0%）到最终状态（100%），通过transform的translateX属性实现向右移动10像素。
最后，将CSS样式应用到div元素上：
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: moveRight 1s infinite;
}
@keyframes moveRight {
0% { transform: translateX(0); }
100% { transform: translateX(10px); }
}
</style>
<div id="myDiv"></div>这样，div元素就会每秒向右移动10像素。
推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），用于加速静态资源的传输和分发，提高网站的访问速度和用户体验。产品介绍链接地址：https://cloud.tencent.com/product/cdn
相关·内容
4回答
您知道如何以每秒从左向右移动div.move 1px吗？当div到达.stop div时停止div的移动？
<div class="content">
<div class="stop">
stop
</div>
<div class="move">
</div>
</div>
<button id="go">
go
</button>
$( "#go" ).click(function() {
浏览 11提问于2015-12-13得票数 1
回答已采纳
我一直在尝试运行一个非常简单的应用程序，它每秒在画布上向右移动一个20 x 20像素的正方形。我使用调度定时器每秒触发一次事件。
问题是，除非我摇动应用程序窗口(用鼠标)，否则正方形不会向右移动，而且它偶尔会自己移动(尽管不是每秒移动一次)。
我已经尝试重新安装Visual Studio 2017，并将其安装在我的固态硬盘和硬盘上，但似乎都没有解决这个问题。
下面是应用程序的MainWindow.xaml.cs的完整代码
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
publ
浏览 6提问于2018-10-17得票数 0
2回答
假设我有这样的代码：
<div id="gameFrame">
<div id="figure"></div>
</div>
其中，图形div是一个图形的图片。如何使用jQuery使用键盘键向上、向下、向左和向右移动gameFrame内的图形？
浏览 1提问于2010-11-14得票数 1
回答已采纳
当用户输入搜索时，我在文本框的keyup事件上替换了页面上div标记中的html。当通过jQuery的.html()方法在div标记上设置html时，整个页面会先向左移动，然后再向右移动。由于某些原因，只有当我将网站部署到IIS站点时，才会发生这种情况。当我在Visual Studio中本地运行时，页面不再向左移动和向右移动。当我替换div标记内容时，我首先通过调用.html('')来清除它，然后将它设置为一个ul标记的搜索结果。这个问题也只发生在Chrome上，它在Edge上工作得很好。
浏览 1提问于2018-03-08得票数 0
我想知道是否有人可以提供任何建议/示例使用Shield UI图表来显示一段时间内的水平滚动图形。
我对如何实现这一点的建议持开放态度，但我希望看到实时(每秒或更低精度)滚动，通过频繁更新单个图形，或者可能更好，简单地在y轴上从左向右移动垂直线标记，以相对于静态背景图表演示时间的移动。
浏览 0提问于2016-03-23得票数 1
2回答
如果单击左右按钮，我如何实现将div (sellBody)向左或向右移动50px？
使用以下代码，该框仅向左或向右移动一次50px。我知道为什么，但我不知道如何让它移动到50px的任何一边，每次我点击任何一个按钮。
function slideLeft(sellBody) {
var slideLeft = document.getElementById("sellBody");
slideLeft.style.transition = "left 1.0s linear 0s";
slideLeft.style.left = "-
浏览 1提问于2013-11-05得票数 0
1回答
为什么这个函数会被调用两次呢？基本上，如果容器在另一个方向上移动得太远，脚本应该将容器向右移动100px。
<script type="text/javascript">
$(document).ready(function() {
$( "#container" ).draggable({axis: "x", drag: function() {
if($(this).offset().left < -100) {
$(this).data('draggable').offse
浏览 3提问于2011-07-07得票数 0
回答已采纳
我正在尝试实现一个功能，在我制作的游戏中，如果你按下一个按钮，汽车将自动完成一圈的赛道，而不需要任何用户输入。
为此，我为每个移动方向创建了函数。
我需要在每个函数调用之间创建一个延迟，否则它将在我按下按钮初始化它的瞬间完成一圈。我添加了以下内容：
public void driveCar()
{
Timer t = new Timer(1000 * 1, new ActionListener() {
public void actionPerformed(ActionEvent e) {
move(MOVE_RIGHT);
浏览 45提问于2019-03-01得票数 2
回答已采纳
1回答
我有一个非常简单的用例，其中我想要将文本块稍微向右或向左移动视口中的中心。 // html文件 <div>
Hello
</div> // css文件 body {
height: 80vh;
background-color: grey;
text-align: center;
} 这会使文本居中，但如何将其稍微向左或向右移动到中心点。
浏览 24提问于2020-12-10得票数 0
所以我正在试着为我正在做的一个小项目做一个原型，一个div每秒向右移动10个像素。我试着寻找如何做我想做的类似的事情，但我不能让它工作。我想用JavaScript实现它，但是当执行JavaScript时，squareStyleTop的值只是加上"100px"，所以它只是增加，几秒钟后，值看起来像这样：
这就是我到目前为止所能做到的：
//setTimeout(function(){ alert("Hello"); }, 3000);
var squareStyle = document.getElementById("sjuku").s
浏览 39提问于2021-05-12得票数 1
回答已采纳
我想在浏览器中从左到右动画一个div (比如高度50 px和宽度50 px)。
我可以在这里分享我的html css部分：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width:100px;
height:100px;
position: absolute;
}
.blue{
background:#00f;
}
.position{
marg
浏览 2提问于2017-04-19得票数 1
回答已采纳
我如何让我的播放器以恒定的速度向左/向右移动，直到用户再次触摸屏幕，这将使播放器以恒定的速度向右/向左移动，等等。
我试过寻找其他答案，但找不到一个有效的答案。
我已经将linearDamping设置为0。
浏览 0提问于2017-12-11得票数 0
4回答
如何使用箭头键移动div
、、、
我想用我的箭头键用jQuery移动一个div。所以向右，向左，向下和向上。
我找到了我想要完成的的演示
我希望能够在另一个div中移动一个div。
如何做到这一点？
浏览 3提问于2011-02-10得票数 18
回答已采纳
1回答
我试图将儿童div从它的位置向右与css3动画。我已将父div溢出设置为隐藏。但是当移动子向右溢出时，隐藏是无效的。当孩子离开父区域时，我该如何隐藏它？
<div class="container">
<div class="content">1</div>
</div>
[Example](http://jsfiddle.net/Mostwanted_cJ/zcn9G/3)
浏览 4提问于2014-07-22得票数 0
回答已采纳
我有一个表(bootstrap主题，从Django admin生成)。
在其中一列中，我有一个div，它包含三个元素，还有锚点和两个跨度-每个跨度都显示引导图示符。
<div class="my-fixed-width under-review data-sent-false">
<a href="myobjectview/789/" style="inline-block;">C4U0UACXX-8 6nb</a>
<span class="glyphicon
浏览 4提问于2015-03-01得票数 12
4回答
当指针在DIV上时，我使用animate()来为左侧的DIV标记添加动画效果。当指针离开DIV标签时，它会动画回到原来的位置。这里的问题是，动画将DIV标签在鼠标悬停时向左移动50像素，在鼠标离开时向右移动50像素。
这使得即使动画没有完成，DIV也会向右移动50个像素。
$('body').on('mouseenter', '.image-photo-previous', function() {
$(this).animate({marginLeft: '-=50px'}, 300, 'swing');
浏览 3提问于2013-04-22得票数 3
回答已采纳
我知道如何使用顶部/左边的位置增量移动div元素。但是我听说translate3d提供了性能改进，所以我想看看它。
让我说我有这个，
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.background = 'red';
div.style.position = 'absolute';
document.body.appendChild(div);
以下
浏览 2提问于2018-12-24得票数 0
回答已采纳
我在这个包含消息中创建了带有字体样式类的div。例如：
<div class="font-style" style=position:relative>
Hi all How are you !!!
</div>
而Jquery是
jQuery('.font-style').css({'right': '0px', 'left': '300px'}).animate({
'right'
浏览 1提问于2013-08-29得票数 1
回答已采纳
1回答
我试着让一个物体在团结中每一秒运动，但它似乎不起作用。我试着制作游戏蛇，我开始是以头部的雪碧为中心，然后每秒钟向右移动，然后添加玩家的控制。能帮上忙吗？
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Snake_Move : MonoBehaviour
{
private Vector2 pos;
private Vector2 moveDirection;
private float moveTimer;
private
浏览 4提问于2020-03-30得票数 0
回答已采纳
我试图用变量gameTime.ElapsedGameTime.TotalMilliseconds移动一个2D测试精灵；
更新工作的精灵位置的代码如下：
spritePosition.X += (float)gameTime.ElapsedGameTime.TotalMilliseconds;
使用上面的行，sprite在运行时向右移动，就像预期的那样。
然而，我不明白为什么我需要"+=“。也就是说，为什么以下内容不起作用：
spritePosition.X = (float)gameTime.ElapsedGameTime.TotalMilliseconds;
(我知道x += 1是x
浏览 5提问于2013-12-18得票数 3
回答已采纳
2回答
我有两列，左右浮动，如下所示：
<div style="float: left;">
text1
</div>
<div style="float: right;">
text 2
</div>
但是如何才能将右列稍微向左移动一点呢？用“填充”？怎么做？
或者，如果我使用这个，我如何才能将右边的列向右移动一点？
<div style="float: left;">
text1
</div>
<div style="float: left;">
te
浏览 0提问于2012-06-03得票数 1
我们需要创建一个屏幕保护程序，其中一个图像是固定的，第二个图像应该是连续地向右移动，这样当它向右移动时，不存在图像的左侧部分应该再次填充图像。我们编码如下所示。
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 10
浏览 1提问于2018-04-10得票数 0
回答已采纳
2回答
我想单击一个div，然后再向右移动:0，如果我再次单击该div，它将使第二个div向右移动：-200，但我似乎无法让它工作。
$(document).ready(function(){
$('#menu').click(function(){
if ($('#menudrop').css('right', '-200px'));
$('#menudrop').css('right', '0px');
else{
浏览 2提问于2016-03-03得票数 0
1回答
一种遍历二维矩阵的算法
、、、
给定一个全为正数的二维矩阵，我如何从一个角落遍历矩阵到另一个角落，使路径上的值之和最大？你只能向左、向右、向上或向下移动，即不能沿对角线移动。
你不能后退，也就是说，你总是要走向另一个角落。
浏览 1提问于2012-02-26得票数 1
回答已采纳
我需要更改类page，您可以在每个报告模板中看到它。
这就是我想要的：
<div class="page" style="margin-left: 7mm">
...
</div>
问题是我需要在每次应用类page时应用该样式，所以如果我能够修改类来添加我的margin-left，这对我来说将非常有用。如果不是，我想我将不得不改变每一个里面有class="page"的模板，这将是可怕的。
你可能想知道为什么我需要添加margin-left，这是因为我必须在每一页的左边距添加一个文本，所以我必须在页眉中添加一个div。
浏览 0提问于2018-04-10得票数 3
有人能帮我完成以下工作吗？提前感谢！
使用JavaScript (我不想使用JQuery)，鼠标向下移动元素，如果单击id navLinkLeft，如何将元素向左移动；如果单击id navLinkRight，则继续向右移动；当鼠标向上移动时，继续移动。
<nav>
<a href="#" id="navLinkLeft">Link Left</a>
<div id="navLinks">Navigation Links to Be Moved</div>
<a href=&#
浏览 3提问于2014-10-11得票数 0
回答已采纳
1回答
我想在屏幕上无限制地从左到右移动对象。我可以用这段代码移动一个物体。我想要的是每秒都有一个新的对象实例开始从左边移动。所以一开始我看到一个物体在移动。下一秒，我看到两个物体在移动。几秒钟后，我想看到物体从左向右移动。如何做到这一点？我在正确的轨道上吗？
timer1 = new Timer();
timer1.scheduleAtFixedRate(new TimerTask() {
@Override
public void run() {
TimerMethod();
浏览 0提问于2012-09-21得票数 0
回答已采纳
2回答
我有一个简单的jQuery动画代码，用于当用户单击一个链接时从左向右移动div，然后在用户单击另一个链接时从右向左移动div。
我的问题是，如果用户一直点击同一个链接，div就会一直向左移动。我希望他们只能点击它一次，如果他们再次点击它，链接不会做任何事情。
下面是我的代码：
$(document).ready(function(){
$('a.facebook').click(function() {
$('#social_holder').animate({'left' : '-=420px'});
});
$(
浏览 2提问于2013-03-23得票数 2
回答已采纳
1回答
背景
我正在工作的HTML5视频比较滑块。默认情况下，一个视频的50%显示在每秒的顶部。用户可以在两个视频的中间移动滑块，向左或向右看更多或更少的视频。两者都被设置为自动播放和连续循环。
但是，这种功能在移动设备上不能很好地工作，所以我决定将图像显示而不是移动设备的视频显示为更好。
问题我知道我可以使用媒体查询或JavaScript来检测小屏幕大小并切换内容。不过，我需要瞄准的设备，而不是屏幕宽度。是否有一个可靠的方法来实现这一点？
<div class="slider-video__container">
<div class
浏览 2提问于2017-11-23得票数 0
回答已采纳
我试图使ul#pikame向右移动--它的相对位置是0，但是即使位置不是0，它也一直向右移动。
我知道li_left在开始时被设置为0，它记得并坚持它，但是我需要li_left来更新每一次新的点击。
我的代码：
li_left = $('ul#pikame').css('left');
if (li_left == '0px') {
$('a.prev').click(function (e) {
// e.preventDefault();
$('ul#pikame').a
浏览 2提问于2013-12-16得票数 0
回答已采纳
我有一个向右移动div并更改宽度的脚本--但是我无法控制效果触发的顺序。
下面是剧本：
$(document).ready(function() {
$('#access').click(function(){
$('#active').animate({right:"6px"}, 400);
$('#active').css({width:"60px"});
});
});
现在发生的情况是#active更改宽度，然后向右移
浏览 1提问于2014-01-29得票数 0
回答已采纳
3回答
当我更改左、右变量时，我有一个元素需要从左向右、右向左移动。
下面是我正在做的一个轻巧的例子。它从左向右、向右向左移动，但没有动画。
我做错什么了？
CSS:
div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /*
浏览 0提问于2014-05-28得票数 14
2回答
我想用滑动手势识别器向右或向左移动图像，我已经在使用CCMoveTo功能移动图像了，但我不知道如何根据滑动的力度来更快或更慢地移动图像。
如果用户进行强滑动，则图像的移动速度应该比用户软滑动时更快。
有人有什么建议吗？
浏览 1提问于2012-09-26得票数 4
回答已采纳
请看这个：
如果单击右侧，框将向右移动；如果单击左侧，框将向左移动。但是，如果您再次单击右键，则什么都不会发生...
我怎样才能让它随意左右移动多次，而不是只工作一轮，然后就不工作了？
另外，如果你先向左，然后向右，它也会变得一团糟，如何解决呢？
jquery：
$('.right').click(function(e) {
e.preventDefault();
$('#foo').animate({
'right'
浏览 0提问于2011-09-10得票数 5
回答已采纳
在第一次点击按钮时，div应该向右移动300 by。当点击第二次按钮，div应该动画到左300 on。下一次点击相同。
我试过了，但它只向左移动，但我怎么能切换到再次向右移动div呢？
密码-
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ marginLeft: "300px"});
});
})
浏览 5提问于2020-11-10得票数 2
回答已采纳
2回答
我正在用JavaScript做一个游戏，我想知道当你按下向左和向右键时，我如何才能让物体移动得很流畅。到目前为止，我已经得到了一个可以左右移动的圆圈。如果你按住向右箭头键，圆圈就会向右移动，但是，如果你同时按下向左键，圆圈就会出现故障并停止移动，反之亦然。我想要它，这样当我按向右箭头键时，当我仍然按它时，我按向左键，圆圈将向左，反之亦然。无论如何，下面是我的代码：
var x = 200;
draw = function() {
background(255,255,255);
ellipse(x, 200, 50, 50);
if (keyIsPressed &
浏览 3提问于2016-12-18得票数 0
2回答
嗨，伙计们，任何帮助都将不胜感激。我一直在我的网站上工作，我有一个包含我的登录表单的div，点击一个按钮就可以将其更改为我的注册表。
问题是，当页面第一次加载时，表单位于1个位置。当我点击按钮时，它会向右移动。然后我可以在表单之间来回切换，没有任何问题，表单停留在一个地方。
如果单击顶部眼睛周围的蓝色按钮，将更改表单。我还没有完成这个部分的设计。
这是我的索引页面的链接，您可以看到问题所在。我甚至试着做了一个第三个div来进一步向右移动表单，但它仍然不起作用。
任何帮助都是非常感谢的。
浏览 1提问于2014-08-06得票数 0
1回答
我试着做一个代码，当单击'.moveright‘按钮时，它应该同时移动两个对象。第一个对象是包含图像、'.parent‘div内的徽标(代码第2行)和按钮本身的div。它起作用了。div在类似的div之间移动。
当我试图用音频移动相应的div (在html文件的不同部分)时，问题就开始了(音频和标志img具有相同的类，因此可以识别为赋值)。但它似乎并没有移动。我在代码里写错了什么？
一般的想法是，我有，比方说，20个div与可点击的图像代表不同的音频文件。当单击其中一个音频文件时，由于使用.attr找到相应的类，相应的音频文件就会开始播放--而且它可以工作。
现在我试着让这些标
浏览 4提问于2022-09-25得票数 0
1回答
编辑：需要帮助才能获得准确的每秒3条滴答，但这是不可能的，因为分数。再检查一下现实生活中的时钟，我意识到它实际上每秒移动4次，我认为1/4秒是均匀的，而且应该是准确的。更新了这个问题，因为我也不能让它起作用：
我正在建造一个时钟，它有三种选择:第二只手移动。我已经成功地使秒移动6°每秒(1“滴答”每秒)和一个选项与无缝扫描(0.006°/毫秒)。但我无法让我的公式适用于我的第三种选择:让第二只手精确地每秒移动4次，即每秒1.5°)。
这是第二次使用的代码行(我稍后使用CGAffiateTransform，因此使用弧度)：
let quarterSecond = round(millisecon
浏览 0提问于2018-03-22得票数 0
回答已采纳
在我的游戏中，我用LinearImpuls表示跳跃，用ApplyForce表示从左向右移动.But，问题是当玩家在那个时候跳的时候，如果发生了移动，那么玩家的速度就会增加，看起来就像在空中跑步一样。
那么如何解决这个问题呢？
提前感谢
浏览 1提问于2012-09-03得票数 0
1回答
将文本与滑块对齐
、、
我有一个这样的表结构
<tr>
<td>
Text to move
</td>
</tr>
<tr>
<td>
<div>jQuery slider container is in here<a>slider pointer is in here</a></div>
</td>
</tr>
当滑块移动时，我看到link元素的样式更新了一个百分比，表示它向右移动了多远。例如：style="
浏览 0提问于2011-10-08得票数 0
回答已采纳
2回答
我记得有一次在学校，我们有一个任务，用pascal编写一个字幕文本，这是一个从左到右移动的文本。我还记得我一点也不知道该怎么做。现在我仍然不是一个好的程序员，我想问你们会怎么做--当然没有任何类库。
我想把任何字母放在数组值中，然后例如，每秒钟将数组值向右移动一个位置或其他东西。不知道这是不是一个好的“算法”。
你们觉得怎么样？
浏览 0提问于2011-09-13得票数 0
回答已采纳
2回答
我想连续向右移动框，然后向左移动，再向右向左移动，但它只做了一个循环
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
浏览 1提问于2017-07-10得票数 0
1回答
考虑下面的示例，如下所示：
<div contenteditable="true" style="background-color: #ccf;">
<p>This div is editable.</p>
</div>
<div style="background-color: #ccf; width: 2000px;">
<p>This is a wide div that causes scrollbars.</p>
</div>
浏览 3提问于2014-08-06得票数 2
我的应用程序中有一个客户记录列表(表中的tr)。
当用户将鼠标悬停在一条记录(tr)上时，我希望显示一个悬停在其他记录上的div，并显示有关该记录的更多详细信息。
我想让div随着鼠标移动--例如，如果他们将鼠标向右移动20个像素，这样他们就可以看到记录上的不同字段( tr)，那么现在未隐藏的div应该向右移动20个像素来跟随光标。
这可以用Javascript/CSS实现吗？
浏览 1提问于2010-12-05得票数 1
我的InputAdapter中有以下代码
...
@Override
public boolean keyDown (int keycode) {
if (keycode == Keybindings.KEY_RIGHT) this.player.right();
return super.keyDown(keycode);
}
@Override
public boolean keyUp (int keycode) {
if (keycode == Keybindings.KEY_RIGHT) this.player.stopMovingRight();
r
浏览 4提问于2016-06-01得票数 0
回答已采纳
在按键39 (右箭头)移动一个简单的div向右。就像我在键盘上按右箭头时，div必须移动right.like游戏。
浏览 3提问于2022-01-09得票数 -4
我有一个动态更新的数组(每秒改变一次)。它由从1到9的值组成。我的任务是找出最大值是从左向右移动还是从右向左移动。
对于此输入，输出应从左到右。数据来自传感器，并且每秒都在更新阵列。
[1 , 3 , 4 , 2 , 1 , 0 , 0 ]
[1 , 1 , 4 , 8 , 4 , 0 , 0 ]
[1 , 1 , 2 , 3 , 9 , 0 , 0 ]
[4 , 0 , 0 , 9 , 9 , 0 , 0 ]
[4 , 0 , 0 , 0 , 3 , 8 , 3 ]
[6 , 3 , 4 , 0 , 9 , 9 , 8 ]
我能想到的唯一方法就是将数组中最大的3个元素相加并保存它们的
浏览 0提问于2018-11-12得票数 0
我正在使用React和Ant Design为Ant应用程序创建一个简单的UI。我想在屏幕的右上角放置一个按钮。我的组件呈现函数看起来像这样：
return (
<div style={{something here?}}>
<div style={{something else here?}}>
<Button>Logout</Button>
</div>
<div>
{Main components here}
浏览 1提问于2019-07-12得票数 4
假设我使用的是标准的iPhone 4。
我的菜单栏的宽度是2000px。当用户触摸并按住菜单div时，他可以左右移动手指，菜单栏也会移动。这允许用户使用他的手指浏览菜单的所有项目。(向左/向右滚动)
如何在javascript/jquery中实现这一点？
它就像Google Images的webview (在你的手机上打开)。你可以向左和向右滑动来导航每个图像。
除了……我希望它是一个菜单栏，没有“抓取”。
浏览 1提问于2012-04-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
