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

时间:2013-11-13 20:13:47

标签: javascript html css

你好,我在www.thetotempole.ca的网页上有一张跑车的图片,我想从屏幕左边移动到右边的,然后转身向左转回原来的起始位置。我试图搜索如何做到这一点并没有运气..这是我的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>

谢谢!

1 个答案:

答案 0 :(得分:0)

我是用css-animations做到的,但有一点我忘了提及对你来说很重要。

旧版浏览器支持 css-animations

这是HTML

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

CSS

.car {
   width: 300px;
   position: absolute;
   -webkit-animation: Car 5s linear infinite;
   -moz-animation: Car 5s linear infinite;
   -ms-animation: Car 5s linear infinite;
   -o-animation: Car 5s linear infinite;
}

最后是keyframes

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

以下是JSFIDDLE并删除网址中的show以查看代码。

如果您需要我解释它的工作方式,那么我很乐意,但只是让我知道。