Question

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

谢谢！

Answer 1

我是用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以查看代码。

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

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

1 个答案: