带佬带带我!如何使用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);
    }

87,990

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧