您需要指定范围

Question

我正在按照课程编写课程，在第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>

Answer 1

您需要将单位添加到the_image.style.left = x_position + "px";值：

remote: running install_data remote: copying external/youtube-dl/youtube-dl -> /usr/local/bin remote: error: [Errno 30] Read-only file system: '/usr/local/bin/youtube-dl' remote: remote: ---------------------------------------- remote: Command "/app/.heroku/python/bin/python -u -c "import setuptools, tokenize;__file__='/tmp/pip-sEL0Eg-build/setup.py';exec(compile(getattr(tokenize, 'open', open)(__file__).read().replace('\r\n', '\n'), __file__, 'exec'))" install --record /tmp/pip-6TegpX-record/install-record.txt --single-version-externally-managed --compile" failed with error code 1 in /tmp/pip-sEL0Eg-build remote: remote: ! Push rejected, failed to compile Python app

P.S。我知道这是一个课程项目，但请注意，这不是从性能角度动画元素的好方法:)更好的方法是使用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/

Answer 2

你应该添加＆＃34; px＆＃34;对于该值，该对象应将CSS属性position设置为relative或absolute。

如果position属性为relative，则其父对象应具有＆＃39;位置＆＃39;属性也设置为相对。

Answer 3

您忘记添加像素了！

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;"

Answer 4

您需要指定范围

＆＃13;

<!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>

＆＃13;

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

4 个答案:

您需要指定范围