怎样用4个按钮控制图片上下左右移动呢？

常规的做法就是把图片放在div里，然后通过onclick事件改变层的位置
从而达到移动图片的目的~

解决方案 »

  1.   

    //不用放到div也可以的，设置图片的position: absolute;
    <HTML><HEAD>
     <script type="text/javascript">
    <!--function Fleft()
    {
    var x1=document.getElementById("img1").style.left;
    var x=eval(Number(x1.substring(0,x1.length-2))-20); 
    document.getElementById("img1").style.left=x+"px";
    }function FRight()
    {
    var x1=document.getElementById("img1").style.left;
    var x=eval(Number(x1.substring(0,x1.length-2))+20); 
    document.getElementById("img1").style.left=x+"px";
    }function FUp()
    {
    var x1=document.getElementById("img1").style.top;
    var x=eval(Number(x1.substring(0,x1.length-2))-20); 
    document.getElementById("img1").style.top=x+"px";
    }function FDown()
    {
    var x1=document.getElementById("img1").style.top;
    var x=eval(Number(x1.substring(0,x1.length-2))+20); 
    document.getElementById("img1").style.top=x+"px";
    }</script>
    </HEAD>
    <body>
     <input onclick=Fleft() type=button value=left></input>  
     <input onclick=FRight() type=button value=right></input> 
     <input onclick=FUp() type=button value=Up></input>  
     <input  onclick=FDown() type=button value=Down></input> 
    <FONT color=#000000><img id="img1" src="1.jpg" name="picture" style="position: 
    absolute; top: 70px; left: 130px;" BORDER="0" WIDTH="140" HEIGHT="40"></body></HTML>
      

  2.   

    cuixiping(无心) 要不会做能问你吗？ 你不菜？你有本事第一个把代码写出来啊？
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <SCRIPT LANGUAGE="JavaScript">
      <!--
    //移动位置向左
    var lefts = "left";
    //移动位置向上
    var tops = "top"; //最大位置
    var maxLeft = 0;
    var maxTop = 0;
    //每次移动的步数
    var star = 10;
    //窗体加载是把位置和最大位置初始化
    function showLoad() {
    maxLeft = document.body.offsetWidth - document.getElementById("advs").offsetWidth;
    maxTop = document.body.offsetHeight - document.getElementById("advs").offsetHeight;
    }
    //想左事件
    function showLeft() {
    //当前的位置
    var curLeft = document.getElementById("advs").style.pixelLeft;
    if (curLeft <= 0) {
    curLeft = 0;
    }
    if (lefts == "left") {
    curLeft = curLeft - star;
    document.getElementById("advs").style.pixelLeft = curLeft;
    return;
    }
    }
    //想右事件
    function showRight() {
    //当前的位置
    var curLefts = document.getElementById("advs").style.pixelLeft;
    if (curLefts >= maxLeft) {
    curLefts = maxLeft;
    }
    if (lefts == "right") {
    curLefts = curLefts + star;
    document.getElementById("advs").style.pixelLeft = curLefts;
    return;
    }

    }
    //向上事件
    function showTop() {
    //当前的位置
    var curTop = document.getElementById("advs").style.pixelTop;
    if (curTop <= 0) {
    curTop = 0;
    }
    if (tops == "top") {
    curTop = curTop - star;
    document.getElementById("advs").style.pixelTop = curTop;
    return;
    }

    }
    //向下事件
    function showDown() {
    //当前的位置
    var curTops = document.getElementById("advs").style.pixelTop;
    if (curTop >= maxTop) {
    curTop = maxTop;
    }
    if (tops == "down") {
    curTops = curTops + star;
    document.getElementById("advs").style.pixelTop = curTops;
    return;
    }
    }  //-->
      </SCRIPT>
     </HEAD> <BODY onLoad="showLoad()">
      <div id="advs" style="position:absolute;background-color:#CC0066;height:100px;width:100;z-index:1;top:100px;left:100px;">
      </div>  <input type="button" value=" 左 " onClick="showLeft()">
      <input type="button" value=" 右 " onClick="showRight()">
      <input type="button" value=" 上 " onClick="showTop()">
      <input type="button" value=" 下 " onClick="showDown()">
      
     </BODY>
    </HTML>
      

  4.   

    style.pixelLeft 是什么属性？好像没有这个属性？
    只查到 style.left 这个属性
      

  5.   

    如果是滚动图片的画就用scrollLeft和scrollTop
    一张图片style.left和style.top