带佬带带我！如何使用setInterval()来操作transform:translate();以改变对象标签的位置？

「已注销」 2019-07-19 03:34:12

<!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轴的的值在变化。

是我的格式语法有问题还是有什么其他的问题呢？ (っ•̀ω•́)っ笔⁾⁾ 摔

...全文

155 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 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);
    }