gpt4 book ai didi

javascript - 如何使用 style.left 从右向左移动图像?

转载 作者:太空宇宙 更新时间:2023-11-04 10:46:46 24 4
gpt4 key购买 nike

我正在学习 coursera 的编程类(class),第 3 周第 12 章向我们展示了如何使用 style.left 移动图像,当我运行 <script> 时。什么也没发生,控制台也没有显示任何错误,我不知道出了什么问题。这是代码:

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>set time</title>
<meta name="Author" content=""/>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
var the_timer, x_position = 0, the_image;
function do_timer(){

the_image = document.getElementById("stones_img");
x_position = x_position + 1;
the_image.style.left=x_position;
console.log(x_position);
}
</script>
</head>

<body onload="the_timer=setInterval(do_timer, 50)">
</br>
<button onclick="clearInterval(the_timer)">Clear</button>


</br> </br> </br>
<img id="stones_img" src="http://i47.photobucket.com/albums/f196/overcracker/Blog/thundercats.png" style="position:absolute; left:10000">

</body>
</html>

最佳答案

您需要将单位添加到left 值:

the_image.style.left = x_position + "px";

附言我知道这是一个类(class)元素,但请注意,从性能的 Angular 来看,这不是为元素设置动画的好方法 :) 更好的方法是使用 CSS 动画或过渡,这不会导致浏览器重新布局并且可以进行硬件加速。

供引用:

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

关于javascript - 如何使用 style.left 从右向左移动图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35326996/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com