如何使用Javascript使图像移到屏幕右侧并返回_Javascript_Html_Css

如何使用Javascript使图像移到屏幕右侧并返回

javascript html css

如何使用Javascript使图像移到屏幕右侧并返回,javascript,html,css,Javascript,Html,Css,您好，我的网页上有一个跑车的图像，我想从屏幕的左侧移动到右侧的末端，然后转身向左回到它原来的起始位置。我试着寻找如何做到这一点，但没有运气。。以下是我的HTML代码： <html> <head> <style> #para1 { visibility: hidden; position:absolute; top:22px; left:307px;} #para2 { visibility: hidden; position:absolute;

您好，我的网页上有一个跑车的图像，我想从屏幕的左侧移动到右侧的末端，然后转身向左回到它原来的起始位置。我试着寻找如何做到这一点，但没有运气。。以下是我的HTML代码：

<html>
<head>
<style>
    #para1 { visibility: hidden; position:absolute; top:22px; left:307px;}
    #para2 { visibility: hidden; position:absolute; top:47px; left:307px;}
    #para3 { visibility: hidden; position:absolute; top:73px; left:307px;}
    #para4 { visibility: hidden; position:absolute; top:99px; left:307px;}
</style>
<script>
    var carleft = 0;

    function focuscolor(myinput)
    {
        myinput.style.backgroundColor = "#00ff00";
    }
    function blurcolor(myinput)
    {
        myinput.style.backgroundColor = "#ffffff";
    }
    function showhelp(mypara)
    {
        var para = document.getElementById(mypara);
        para.style.visibility = "visible";
    }
    function hidehelp(mypara)
    {
        var para = document.getElementById(mypara);
        para.style.visibility = "hidden";
    }
    function startcar()
    {
        setInterval(movecar, 10);
    }
    function movecar()
    {
        carleft += 10;
        document.getElementById("car").style.left = carleft + "px";
    }
</script>
</head>
<body>
    <img id="car" style="position:absolute; top:200px; left=0px" src="images/car.gif" onload="startcar()" />
    <p id="para1">Enter your first name.</p>
    <p id="para2">Enter your last name.</p>
    <p id="para3">Enter your address.</p>
    <p id="para4">Enter your phone number.</p>
    <form>
    <fieldset style="width:270px; background-color:lightblue;"><legend style="text-align:center; border: 1px solid blue;">Contact Form</legend>
    First Name: <input type="text" name="fname" onfocus="focuscolor(this); showhelp('para1')" onblur="blurcolor(this); hidehelp('para1')" /><br />
    Last Name: <input type="text" name="lname" onfocus="focuscolor(this); showhelp('para2')" onblur="blurcolor(this); hidehelp('para2')" /><br />
    Address: <input type="text" name="address" onfocus="focuscolor(this); showhelp('para3')" onblur="blurcolor(this); hidehelp('para3')" /><br />
    Phone Number: <input type="text" name="phone" onfocus="focuscolor(this); showhelp('para4')" onblur="blurcolor(this); hidehelp('para4')" /><br />
    <input type="submit" name="Send" /></fieldset>
    </form>
</body>
</html>


#para1{可见性：隐藏；位置：绝对；顶部：22px；左侧：307px；}
#para2{可见性：隐藏；位置：绝对；顶部：47px；左侧：307px；}
#para3{可见性：隐藏；位置：绝对；顶部：73px；左侧：307px；}
#para4{可见性：隐藏；位置：绝对；顶部：99px；左侧：307px；}
var-carleft=0；
函数聚焦颜色（myinput）
{
myinput.style.backgroundColor=“#00ff00”；
}
函数颜色（myinput）
{
myinput.style.backgroundColor=“#ffffff”；
}
函数showhelp（mypara）
{
var para=document.getElementById（mypara）；
para.style.visibility=“可见”；
}
功能隐藏帮助（mypara）
{
var para=document.getElementById（mypara）；
para.style.visibility=“隐藏”；
}
函数startcar（）
{
设置间隔（移动车，10）；
}
函数movecar（）
{
carleft+=10；
document.getElementById（“car”）.style.left=carleft+“px”；
}
输入您的名字
输入您的姓氏
输入您的地址
输入您的电话号码
联系方式
名字：

姓氏：

地址：

电话号码：

谢谢大家!

我是用css动画制作的，但是有一件事我忘了提，那可能对你很重要

css动画

不受较旧浏览器的支持

以下是

HTML

<img src="http://i286.photobucket.com/albums/ll84/denisketje/lambo.png" alt="car" class="car" />

最后是

关键帧

@-webkit-keyframes Car {
   from {
       left: -300px;
   }
   50% {
       left: 100%;
   }
   to { 
       left: -300px;
   }
}

下面是示例，请删除url中的

show

，以查看代码

如果您需要我解释它是如何工作的，那么我很乐意告诉我。

CSS3动画是不是一个选项？您似乎走对了方向。我建议在页面加载后使用JQuery$（document.ready（function（）{}）；，调用startcar（）；。然后，您只需添加代码，在图像到达最右边的位置后，将其移回起始位置。如果您希望使用此选项，请使用

CSS3动画。我可以保证它的代码比您的代码少得多pHmm它可以工作，但是否可以使它转到屏幕的右侧，然后反向移回左侧？而不是让它穿过页面，然后在左边结束？谢谢，等一下，给你
@-webkit-keyframes Car {
   from {
       left: -300px;
   }
   50% {
       left: 100%;
   }
   to { 
       left: -300px;
   }
}