1

您好，我在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>

谢谢！

4

1 回答 1

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并删除showurl 中的代码以查看代码。

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

于 2013-11-13T22:32:23.250 回答