PHP移动gif图像之间的两个地方随着时间的推移 - PHP moving gif image between two place over time

PHP moving gif image between two place over time

我有一个gif动画图像，在我的页面上，我想在两个位置之间移动该动画。例如，在页面左侧显示3秒，然后移动到页面右侧显示3秒，然后回到页面左侧，如此重复。

我是PhP和网站的新手，所以我希望如果有人能给我一个线索。如果可能的话，最好是简单的代码示例。

提前感谢!:)

您可以使用Javascript和css在屏幕上动画图像运动。

这里是演示教程链接。代码,演示代码如下:

function reset1() {
  clearTimeout(my_time);
  document.getElementById('i1').style.left = "500px";
  document.getElementById('i1').style.top = "100px";
  document.getElementById("msg").innerHTML = "";
}
function move_img(str) {
  var x = document.getElementById('i1').offsetTop;
  x = x + 100;
  document.getElementById('i1').style.top = x + "px";
}
function disp() {
  var step = 1; // Change this step value
  //alert("Hello");
  var y = document.getElementById('i1').offsetTop;
  var x = document.getElementById('i1').offsetLeft;
  if (y < 600) {
    y = y + step;
    document.getElementById('i1').style.top = y + "px"; // vertical movment
  } else {
    if (x < 800) {
      x = x + step;
      document.getElementById('i1').style.left = x + "px"; // horizontal movment
    }
  }
  //////////////////////
}
function timer() {
  disp();
  var y = document.getElementById('i1').offsetTop;
  var x = document.getElementById('i1').offsetLeft;
  document.getElementById("msg").innerHTML = "X: " + x + " Y : " + y
  my_time = setTimeout('timer()', 10);
}

<html>
<head>
  <title>Demo of Image moving across screen in JavaScript</title>
</head>
<body>
  <img src=http://www.plus2net.com/javascript_tutorial/images/help.jpg id='i1' style="position:absolute; left: 500; top: 100;">
  <br>
  <br>
  <br>
  <br>
  <input type=button onClick=timer() value='Start'>
  <input type=button onClick=reset1() value='Reset'>
  <div id='msg'></div>
</body>
</html>

你可以用Js来做这个。将此代码保存为html。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.divmain{ width:1000px; height:400px; margin:0 auto;}
.divmain .left{ float:left; width:200px; height:200px;} 
.divmain .right{ float:right; width:200px; height:200px; display:none} 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
      $('.left').toggle();
      $('.right').toggle();                
}, 5000);
});
</script>
</head>
<body>
<div class="divmain">
    <div class="left">
        <img src="http://www.thisiscolossal.com/wp-content/uploads/2013/01/4.gif" width="200"/>
    </div>
    <div class="right">
        <img src="http://www.thisiscolossal.com/wp-content/uploads/2013/01/4.gif" width="200" />
    </div>
</div>
</body>
</html>