gpt4 book ai didi

javascript - 如何使用 Javascript 使图像在屏幕右侧移动并返回

转载 作者:太空宇宙 更新时间:2023-11-03 18:30:18 25 4
gpt4 key购买 nike

您好,我的网页上有一张跑车图片 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>

谢谢!

最佳答案

我用 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;
}

最后是关键帧

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

这是 JSFIDDLE并删除 url 中的 show 以查看代码。

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

关于javascript - 如何使用 Javascript 使图像在屏幕右侧移动并返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19963403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com