zoukankan      html  css  js  c++  java

  • 根据控件坐标显示div

    1. <HTML>   
    2.  <BODY>   
    3.  <div id="mydiv" style="position:absolute; display:none; background:#FF9933; height:80;120;"> I am div ^_^</div>   
    4.  点击showDiv按钮在文本框下面出现一个DIV<br>   
    5.  <table border=1>   
    6.     <tr>   
    7.         <td>   
    8.             <table border=1>   
    9.                 <tr>   
    10.                     <td>aa</td>   
    11.                     <td>   
    12.                         <input type="text" id="test">   
    13.                         <button onclick="showDiv()">showDiv</button>   
    14.                     </td>   
    15.                 </tr>   
    16.             </table>   
    17.         </td>   
    18.     </tr>   
    19.   </table>   
    20.   
    21.   <SCRIPT LANGUAGE="JavaScript">   
    22.   <!--   
    23. //得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里   
    24. function getElementPos(obj)   
    25. {   
    26.     var left = 0;   
    27.     var top = 0;   
    28.   
    29.     if(obj.x)   
    30.     {   
    31.         left= obj.x;   
    32.         top = obj.y;   
    33.     }else if(obj.offsetParent)   
    34.     {      
    35.         while(obj.offsetParent)   
    36.         {          
    37.             left += obj.offsetLeft;   
    38.             top  += obj.offsetTop;   
    39.             obj = obj.offsetParent;   
    40.         }    
    41.     }   
    42.   
    43.     return [left,top];//封装在一个数组里   
    44. }   
    45. function showDiv()   
    46. {   
    47.     var mydiv = document.getElementById("mydiv");   
    48.     var pos = getElementPos(document.getElementById("test"));   
    49.     mydiv.style.display = "";   
    50.   
    51.     mydiv.style.left = pos[0];   
    52.     mydiv.style.top = pos[1] + document.getElementById("test").offsetHeight;   
    53. }   
    54.   //-->   
    55.   </SCRIPT>   
    56.  </BODY>   
    57. </HTML>  
  • 相关阅读:
    关于zindex的那些事儿
    使用前端框架Foundation 4来帮助简化响应式设计开发
    超棒的输入特效 Fancy Input
    跳跃的圆形幻灯片
    来自Twitter的自动文字补齐jQuery插件 Typeahead.js
    Xtype定义（ Xtype defined ）
    EXT基础－元素滑动（Easy Ext Page Basics > Sliding Elements ）
    JavaScript 使用面向对象的技术创建高级 Web 应用程序
    HTML 中对client、offset、scroll的认识
    Jash跨浏览器的Javascript命令行调试工具
  • 原文地址：https://www.cnblogs.com/myssh/p/1438294.html
Copyright © 2011-2022 走看看