用JavaScript实现层在指定位置显示

转载 2017年01月02日 23:28:56

<html>
       <script type="text/JavaScript">
    function show1(event)
    {
       var sourceObj=event.srcElement||event.target;
       var targetObj=document.getElementById("test1");
       targetObj.style.left=sourceObj.offsetLeft;
       targetObj.style.top=sourceObj.offsetTop+sourceObj.offsetHeight;
    }
   
   
    function show2(event)
    {
       var sourceObj=event.srcElement||event.target;
       var targetObj=document.getElementById("test2");
       targetObj.style.left=sourceObj.offsetLeft+sourceObj.offsetWidth;
       targetObj.style.top=sourceObj.offsetTop;
    }

     function show3(event)
    {
       var sourceObj=event.srcElement||event.target;
       var targetObj=document.getElementById("test3");
       targetObj.style.left=sourceObj.offsetLeft+sourceObj.offsetWidth;
       targetObj.style.top=sourceObj.offsetTop+sourceObj.offsetHeight;
    }
       </script>


<body>

   <input name="button1" type="button" value="层测试1" onClick="show1(event);">
   <input name="button2" type="button" value="层测试2" onClick="show2(event);">
   <input name="button3" type="button" value="层测试3" onClick="show3(event);">
   <br>
   <br><br>
          <div id="test1" style="position:absolute;height:60; width:120;border:1px #feda32 solid;background-color:#33aad2;">
    层1
          </div>
   
 <br><br><br>  
          <div id="test2" style="position:absolute;width:120;height:60;border:1px #feda32 solid;background-color:#33aad2;">
   层2
          </div>
   
 <br><br><br>  
          <div id="test3" style="position:absolute;width:120;height:60;border:1px #feda32 solid;background-color:#33aad2;">
   层3
          </div>
 
</body>
<html>

相关文章推荐

JavaScript实现页面到滚动到指定位置执行某些操作

使用JavaScript实现页面滑动到指定位置加载动画。 若页面滚动到class名为group-pic的元素的位置时开始加载 $(document).ready(function(){ va...

利用Web ADF JavaScript Library实现GPS终端的实时位置显示(初级篇)

本文涉及的内容包括:JSON, JQuery, Hashtable,请自行先了解相关技术 ArcGIS Server Web ADF内部包含了一套JavaScript Library,我们称它为Web...

Javascript图层的隐藏与显示并控制其显示位置

Javascript控制图层的隐藏与显示并控制其显示位置
  • wwwdbs
  • wwwdbs
  • 2011年05月04日 16:03
  • 2031

JavaScript 输出当前系统时间到页面指定位置。

使用JavaScript的技术,输出当前系统时间到页面指定位置。 当前系统时间

Javascript自动将页面滚动到指定位置

昨天一个朋友问我如何在页面加载完成后,自动将页面定位到某个位置,当时有些忙,就没来得及解决。殊不知今天在做PHP教程的项目中也有了同样的需求:为了页面美观,需要只显示用户从楼盘相册点击后进入的相册幻灯...

Javascript——百度地图API——显示位置

在移动互联网发展日益迅速的时代,我们在使用许多手机应用(如大众点评网、网页浏览器)时,都会发现其中有“获取当前地理位置”的功能。那么这种功能是如何实现的呢?我们可以借助百度地图提供的API来达到这一目...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用JavaScript实现层在指定位置显示
举报原因:
原因补充:

(最多只允许输入30个字)