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

How to Move an image from right to left by using style.left?

本文关键字：左移 移动 图像 何使用 style left      更新时间：2023-09-26

我正在学习编程课程，来自 coursera，在第 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";

附言我知道这是一个课程项目，但请注意，从性能的角度来看，这不是对元素进行动画处理的好方法:)更好的方法是使用 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/

您应该在

值中添加"px"，并且该对象的 CSS 属性应position设置为 relative 或 absolute 。

在position属性relative的情况下，它的父对象也应该将"position"属性设置为相对。

你忘了添加像素了！

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

要使其从右到左工作：

var the_timer, x_position = 1000, the_image;
function do_timer(){
    the_image = document.getElementById("stones_img");
    x_position = x_position - 1;
    if (x_position < 0) clearInterval(the_timer); // stop once it gets to 0
    the_image.style.left=x_position + "px";;
    console.log(x_position);
}

并在图像上更新左侧属性上的样式：

style="position:absolute;left:1000px;"
您需要

指定范围

<!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">
</head>
    <body onload="the_timer=setInterval(do_timer, 50);the_timer2=setInterval(do_timer_translate, 50)">
        </br>
    <button onclick="CLEAR()">Clear</button>
    </br>       </br>       </br>
<h3>USING POSITION LEFT</h3>
    <img id="stones_img" src="http://icons.iconarchive.com/icons/iconshock/thundercats/256/the-eye-of-thundera-icon.png"  style="position:absolute;" width="100">
<br />
<br />
<br />
<br />
<br />
<h3>USING CSS3 TRANSLATE</h3>
    <img id="stones_img2" src="http://icons.iconarchive.com/icons/iconshock/thundercats/256/the-eye-of-thundera-icon.png"   width="100">
<script>
    
  //---------------------- USING LEFT;
        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+"px";
            console.log(x_position);
        }
  
  //------------------------ USING Translate
        function do_timer_translate(){
            the_image = document.getElementById("stones_img2");
            x_position = x_position + 1;
            the_image.style['transfrom'] = "translateX("+x_position+"px)";
            the_image.style['-webkit-transform'] = "translateX("+x_position+"px)";
            the_image.style['-ms-transform'] = "translateX("+x_position+"px)";
            the_image.style['-moz-transform'] = "translateX("+x_position+"px)";
            the_image.style['-o-transform'] = "translateX("+x_position+"px)";
            console.log(x_position);
        }
  
  //------------------------STOP
  function CLEAR(){
  clearInterval(the_timer);clearInterval(the_timer2)
  };
  
  
  
</script>
</body>
</html>

相关文章：