点击图片上下移动固定位置！


上下各为一个图片，中间是文字    从上而下排列的，
当点击上面那个图片是，向上移动94个像素
当点击下面那个图片时，向下移动94个像素急啊，还请知道的速回，分也不多了，就都给了把！

解决方案 »

  1.   

    这样的效果？：<html>
    <head></head>
    <style type="text/css">
    img {
    margin-left:60px;
    cursor:pointer;
    }
    #div1 {
    height:94px;
    overflow-y:hidden;
    }
    #div1 li {
    line-height:94px;
    list-style-type:decimal;
    }
    </style>
    <body>
    <img src="http://dl.dropbox.com/u/2555620/icons/arrow_up.png" id="imgUp"/>
    <div id="div1">
    <ul>
    <li>today is sunday</li>
    <li>today is sunday</li>
    <li>today is sunday</li>
    <li>today is sunday</li>
    <li>today is sunday</li>
    <li>today is sunday</li>
    <li>today is sunday</li>
    <li>today is sunday</li>
    </ul>
    </div>
    <img src="http://dl.dropbox.com/u/2555620/icons/arrow_down.png" id="imgDown"/>
    </body>
    <script type="text/javascript">
    var g=function(id){return document.getElementById(id);}
    g("imgUp").onclick=function() {
    var box=g("div1");
    if(box.scrollTop==0) {
    box.scrollTop-=94;
    }
    }
    g("imgDown").onclick=function() {
    var box=g("div1");
    if(box.scrollHeight-box.clientHeight>box.scrollTop) {
    box.scrollTop+=94;
    }
    }
    </script>
    </html>
      

  2.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <SCRIPT language=JavaScript type=text/JavaScript>
    <!--
    var sh,marqueeWidth=165,marqueeHeight=300,preTop=0,stopscroll=false;function scrollUp()
    {
     if(stopscroll==true) return;
      preTop=marquees.scrollTop;
      marquees.scrollTop+=4;
    }function scrollDown()
    {
     if(stopscroll==true) return;
      preTop=marquees.scrollTop;
      marquees.scrollTop-=4;
    }function up()
    {
     stopscroll = false;
     sh = setInterval("scrollUp()",20);
    }function down()
    {
     stopscroll = false;
     sh = setInterval("scrollDown()",20);
    }function StopScroll()
    {
     stopscroll = true;
     clearInterval( sh );
    }function init()
    {
     with(marquees)
     {
       style.height=marqueeHeight;
       style.width=marqueeWidth;
       style.overflowX="visible";
       style.overflowY="hidden";
       style.align = "center";
    //   noWrap=true;
     }
    }
    //-->
    </SCRIPT>
    </head>
    <body onload="init()">
    <TABLE cellSpacing=1 height="400" align=center border=0>
      <TR bgColor=#f8f8f8>
        <TD width=165 align=center><IMG 
          src="http://www.smallrain.net/jsimg//pointer-left.gif" border=0 onmouseout=StopScroll() onmouseover=up() style="CURSOR: pointer"></TD>
      </TR>
      <TR bgColor=#f8f8f8>
        <TD align=center>
     
     <DIV id=marquees>
            <table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="72"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="72"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="144"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="144"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="144"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="144"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="144"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="144"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td height="144"><table cellspacing="0" cellpadding="0" align="center" border="0">
                    <tr>
                      <td><a href="dfsdf"><img class="imgframe" src='http://www.smallrain.net/jsimg/1.jpg' border="0" /></a></td>
                    </tr>
                    <tr>
                      <td><div align="center">第1期</div></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
          </DIV>
       </TD>
      </TR>
      <TR bgColor=#f8f8f8>
        <TD align=center><img 
          src="http://www.smallrain.net/jsimg/pointer-right.gif" border="0" onmouseout="StopScroll()" onmouseover="down()" style="CURSOR: pointer" /></TD>
      </TR>
    </TABLE>
    </body>
    </html>如果要实现，鼠标放在上面那个图片，图片就滚动，当鼠标移开的时候，就不滚动了，那么就是onmouseout="StopScroll()" onmouseover="down()" 就OK了！
    如果只要实现当鼠标点一下，内容就动一定距离的这种的话，那么onclick调用scrollup()或scrollDown()就行了！
      

  3.   

    这样<!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>无标题文档</title>
    <script src="js/jquery-1.3.2.min.js"></script>
    </head>
    <body>
    <table align="center" style="position:absolute; left:200px; top:200px;">
    <tr><td><img id="img1"  src="image/此话无效.jpg" /></td></tr>
    <tr><td>中间</td></tr>
    <tr><td><img id="img2"  src="image/此话无效.jpg"/></td></tr>
    </table>
    </body>
    </html>
    <script language="javascript">
    $(function ()
    {
    $('#img1').click(moveUp);
    $('#img2').click(moveDown);
    });
    function moveUp()
    {

       $('table')[0].style.pixelTop= $('table')[0].style.pixelTop-94;
    }
    function moveDown()
    {

       $('table')[0].style.pixelTop= $('table')[0].style.pixelTop+94;
    }
    </script>