87,990
社区成员
发帖
与我相关
我的任务
分享带佬带带我！如何使用setInterval()来操作transform:translate();以改变对象标签的位置？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="ThemeMarch">
<title>1</title>
<style>
#div1
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
/* transform:translateX(10px); */
/* transform: translateY(10px); */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<input value="移动" type="button" onclick="startnow()"/>
<div style="height : 1000px">
<div id="div1">Hello World</div>
</div>
<script>
var m = document.getElementById("div1");
var left = 0;
var top = 0;
function startnow(){
setInterval(() => {
m.style.transform='translate(' + (left) + 'px' , (top) + 'px)';
console.log(m.style.transform);
top += 10;
left += 10;
}, 800);
}
</script>
</body>
</html>
上面是我的代码，在代码中我设置点击按钮之后div就会在xy轴上平移，但是在使用js操作transform中的translate来改变位置时发现只会有X轴的改变，在控制台观察translate()值的时候数据也是只有X轴的在变化。
单独使用translateX()的时候可以正常操作，循环调用实现X轴平移。但是在单独使用Y的时候却无法调用，控制台不会报错，但是也观察不到数据。
在使用translate(x，y)的时候同时输入数据，但是也只有一个X轴的的值在变化。
是我的格式语法有问题还是有什么其他的问题呢？ (っ•̀ω•́)っ 笔⁾⁾ 摔
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="ThemeMarch">
<title>1</title>
<style>
#div1
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
/* transform:translateX(10px); */
/* transform: translateY(10px); */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<input value="移动" type="button" onclick="startnow()"/>
<div style="height : 1000px">
<div id="div1">Hello World</div>
</div>
<script>
var m = document.getElementById("div1");
var left = 0;
var top = 0;
function startnow(){
setInterval(() => {
m.style.transform='translate(' + (left) + 'px' , (top) + 'px)';
console.log(m.style.transform);
top += 10;
left += 10;
}, 800);
}
</script>
</body>
</html>
上面是我的代码，在代码中我设置点击按钮之后div就会在xy轴上平移，但是在使用js操作transform中的translate来改变位置时发现只会有X轴的改变，在控制台观察translate()值的时候数据也是只有X轴的在变化。
单独使用translateX()的时候可以正常操作，循环调用实现X轴平移。但是在单独使用Y的时候却无法调用，控制台不会报错，但是也观察不到数据。
在使用translate(x，y)的时候同时输入数据，但是也只有一个X轴的的值在变化。
是我的格式语法有问题还是有什么其他的问题呢？ (っ•̀ω•́)っ 笔⁾⁾ 摔
...全文
请发表友善的回复…
发表回复
天际的海浪 2019-07-19
- 打赏
- 举报
1。逗号(,)要拼接进字符串里。2，不能用top做全局变量名，会与window.top属性冲突
var m = document.getElementById("div1");
var mleft = 0;
var mtop = 0;
function startnow(){
setInterval(() => {
m.style.transform='translate(' + (mleft) + 'px,' + (mtop) + 'px)';
console.log(m.style.transform);
mtop += 10;
mleft += 10;
}, 800);
}
