zoukankan      html  css  js  c++  java
  • 方框移动

    <HEAD>
    <TITLE>方框移动</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <style language="javascript">
    <!--
    body, td{
     font-size: 9pt;
    }
    .hidden{display:none;}
    .show{display:block;}
    -->
    </style>
    </HEAD>
    <BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var speed=10;//速度
    var ci = 10;//运动次数
    var left=0;//方框左位置
    var top=0;//方框上位置
    var width=0;//方框宽
    var height=0;//方框高
    var aimleft=0;//目标左位置
    var aimtop=0;//目标上位置
    var aimwidth=0;//目标宽
    var aimheight=0;//目标高
    var lb=0;//左步长
    var tb=0;//上步长
    var wb=0;//宽步长
    var hb=0;//高步长
    var fk = null;
    var aim = null;
    var aim1 = null;
    function initObj(oid){
     if (!fk){fk = document.getElementById('fk');}
     if (!aim){aim = document.getElementById('aim');}
     if (!aim1)aim1 = document.getElementById('aim1');
    // while (fk.hasChildNodes())fk.removeChild(fk.firstChild);
     if (oid)
      append(fk,document.getElementById(oid),true);
    }
    function append(o,oc,cloned){
     while (o.hasChildNodes())o.removeChild(o.firstChild);
     if (cloned)oc = oc.cloneNode(true);
     oc.className = 'show';
     o.appendChild(oc);
    }
    /*
    * 取得对象位置、大小
    * 取得目标对象位置、大小
    */
    function setSource(obj,oid){
     initObj(oid);
     left      = getOffset(obj).Left;
     top       = getOffset(obj).Top;
     width     = obj.offsetWidth;
     height    = obj.offsetHeight;
     aimleft   = getOffset(aim).Left;
     aimtop    = getOffset(aim).Top;
     aimwidth  = aim.offsetWidth;
     aimheight = aim.offsetHeight;
     fk.style.display='';
     clearInterval(MyMar);
    }
    /**
    * 设置方向步长、宽高步长
    */
    function setStep(){
     lb = (aimleft-left)/ci;
     tb = (aimtop-top)/ci;
     wb = (aimwidth-width)/ci;
     hb = (aimheight-height)/ci;
    }
    /**
    * 移动
    */
    function move(){
     setStep();
     left+=lb;
     top+=tb;
     width+=wb;
     height+=hb;
     if(left<aimleft-2 || top<aimtop-2 || width<aimwidth-2 || height<aimheight-2){
      fk.style.left = left+"px";
      fk.style.top = top+"px";
      fk.style.width = width+"px";
      fk.style.height = height+"px";
     }else{
      if (fk)
       while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
      hiddenFK();
      clearInterval(MyMar)
     }
    }
    function hiddenFK(){
     initObj();
     fk.style.display='none';
    }
    /**
    * 取得某元素在页面中相对页面左上顶点的位置
    */
    function getOffset(obj){
     var offsetleft = obj.offsetLeft;
     var offsettop = obj.offsetTop;
     while (obj.offsetParent != document.body)
     {
      obj = obj.offsetParent;
      offsetleft += obj.offsetLeft;
      offsettop += obj.offsetTop;
     }
     return {Left : offsetleft, Top : offsettop};
    }
    var MyMar=setInterval(move,speed);
    //-->
    </SCRIPT>
    <div id="fk" style="position: absolute; 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
    <TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
    <TR bgcolor=#ffffff>
     <TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">笔记本</TD>
     <TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家电</TD>
     <TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">电冰箱</TD>
     <TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
     <TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家电</TD>
     <TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家电</TD>
    </TR>
    </TABLE>
    <br><br>
    <br><br>
    <br><br>
    <TABLE id="aim" style="border: 1px solid #666666 ; 227px; height: 300px;">
    <TR>
     <TD id='aim1' valign="top"></TD>
    </TR>
    </TABLE>
    <br>
    <br>
    <br>
    <br>
    <TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
    <TR bgcolor=#ffffff>
     <TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">笔记本</TD>
     <TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家电</TD>
     <TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">电冰箱</TD>
     <TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
     <TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家电</TD>
     <TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家电</TD>
    </TR>
    </TABLE>
    <div id="t1" class="hidden">第1个div</div>
    <div id="t2" class="hidden">第2个div</div>
    <div id="t3" class="hidden">第3个div</div>
    <div id="t4" class="hidden">第4个div</div>
    <div id="t5" class="hidden">第5个div</div>
    <div id="t6" class="hidden">第6个div</div>
    </BODY>
  • 相关阅读:
    hdu 3790 最短路径问题
    hdu 2112 HDU Today
    最短路问题 以hdu1874为例
    hdu 1690 Bus System Floyd
    hdu 2066 一个人的旅行
    hdu 2680 Choose the best route
    hdu 1596 find the safest road
    hdu 1869 六度分离
    hdu 3339 In Action
    序列化和反序列化
  • 原文地址:https://www.cnblogs.com/MaxIE/p/765339.html
Copyright © 2011-2022 走看看