Question

我有这段代码：

   <script type="text/javascript">
      var animate, left=0, imgObj=null;

function init(){

   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'absolute';
   imgObj.style.top = '240px';
   imgObj.style.left = '-300px';
   imgObj.style.visibility='hidden';

   moveRight();
}

function moveRight(){
    left = parseInt(imgObj.style.left, 10);
    if (10 >= left) {
        imgObj.style.left = (left + 5) + 'px';
        imgObj.style.visibility='visible';

        animate = setTimeout(function(){moveRight();},20);

    } else {
        stop();
    }
}

function stop(){
   clearTimeout(animate);
}

window.onload = function() {init();};
   </script>
<img id="myImage" src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" style="margin-left:170px;" />

它的作用是将屏幕中间的一个图像从左侧移动到中心。但我想要做的是将图像从左上角0,0移动到右边的末端到右上边框而不是停止但是图像将从右边再次移动到左

我从未理解这个px值。现在它设置为前240并且离开-300。我试图将它改为0和0，但它没有把它放在左上角，图像根本没有移动。

如何更改代码，使其开始将图像从左上角移动到右上角，如何添加更多图像，以便像滑动一样从左到右不间断地移动它们？

Answer 1

结合使用javascript和css过渡来获得最佳效果

<style>
    img {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;

        transition-property: left;
        transition-duration: 2s;
    }
</style>

<img src="pic.jpg">

<script>
    function animate() {
        var img = document.getElementsByTagName('img')[0];
        var img_width = 100;
        var window_width = window.innerWidth;
        img.style.left = window_width - img_width;
    }

    function init() {
        setTimeout(animate, 1000);
    }

    window.onload = init();
</script>

Answer 2

试试这个：

<script>
    var animate, left=0, imgObj=null, right;

    function init(){

       imgObj = document.getElementById('myImage');
       imgObj.style.position= 'absolute';
       imgObj.style.top = 0;
       imgObj.style.left = 0;
       imgObj.style.visibility='visible';

       right = document.documentElement.clientWidth - imgObj.width;
       moveRight();

    }

    function moveRight(){
        if (left < right) {
            left += 5;
            imgObj.style.left = Math.min(left, right) + 'px';

            animate = setTimeout(moveRight,20); // call moveRight in 20msec
        }
    }

    window.onload = init;
</script>
<img id="myImage" src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" />

<强> DEMO

现在回到第二个问题：

如何添加更多图像，以便像滑块一样从左向右不间断地移动它们？

您只需要更改一些代码，以便它可以处理多个图像：

<script>
    var imgObjs=null;

    function init(){
       imgObjs = document.getElementsByTagName('img');
        for(var i = imgObjs.length; i--; ) {
           var imgObj = imgObjs[i];
           imgObj.style.position='absolute';
           imgObj.style.top = 0;
           imgObj.style.display='none';        
        }

       moveImage(0);
    }

    function moveImage(i) {
        var imgObj = imgObjs[i],
            right = document.documentElement.clientWidth - imgObj.width;

        left = imgObj.style.left = 0;
        imgObj.style.display='block';

        function moveRight(){
            if (left < right) {
                left += 5;
                imgObj.style.left = Math.min(left, right) + 'px';

                setTimeout(moveRight,20); // call moveRight in 20msec
            } else {
                imgObj.style.display='none';
                moveImage((i+1)%imgObjs.length);
            }
        }
        moveRight();
    }

    window.onload = init;
</script>
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" />
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" />
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" />

<强> DEMO

如何使图像滑动从左侧0,0位置向右移动到右侧？

2 个答案: