如何从左向右移动/滑动图像 [英] how to move/slide an image from left to right

问题描述

我想从左到右滑动或移动图像，如

I want to slide or move a image from left to right something like in

http://rajeevkumarsingh.wix.com/pramtechnology

读取的五角形框移动好了！

The read pentagonal box that moves Ok !

我尝试了一下但未能这样做
i使用下面的代码

I tried a bit but failed to do so i used the codes as below

<script type="text/javascript">

<!--
var imgObj = null;
var animate ;
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(){
if (parseInt(imgObj.style.left)<=10)
{
   imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
   imgObj.style.visibility='visible';
   animate = setTimeout(moveRight,20); // call moveRight in 20msec
   //stopanimate = setTimeout(moveRight,20);
  }
else
  stop();
  f();
}

function stop(){
   clearTimeout(animate);
}
window.onload =init;
//-->
</script>
<img id="myImage" src="xyz.gif" style="margin-left:170px;" />

Firefox和IE也有某种解决问题。如何解决它们。此外，我无法如此清楚地移动这些东西。这可能吗？我希望它与javascript而不是flash。

There some kind of resolution problem with Firefox and IE as well. How to solve them. Also i am not able to move the things so clearly. Is this possible or not? I want it to be with javascript and not flash.

推荐答案

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); // call moveRight in 20msec

        //stopanimate = setTimeout(moveRight,20);
    } else {
        stop();
    }
    //f();
}

function stop(){
   clearTimeout(animate);
}

window.onload = function() {init();};

这篇关于如何从左向右移动/滑动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！