Question

我有一个gif动画图片，在我的页面上，我想在两个地方之间移动该动画。例如，它会在页面左侧显示3秒钟，然后移动到页面右侧并显示3秒钟，然后返回到页面左侧，继续以这种方式重复。

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

提前致谢！：）

Answer 1

您可以使用Javascript和CSS为屏幕中的图像移动设置动画。但不是在PHP中。

所以这是演示教程链接。 Code＆amp; Demo 这是代码。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以使用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>

随着时间的推移PHP移动两个地方之间的gif图像

2 个答案: