用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实现层在指定位置显示

           function show1(event)    {       var sourceObj=event.srcElement||event.target;       var ...
  • xinxin19881112
  • xinxin19881112
  • 2009年09月08日 18:50
  • 1886

利用JavaScript实现鼠标在文字上悬浮时弹出悬浮层

在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?代码: ...
  • sunqian_happy
  • sunqian_happy
  • 2015年11月08日 11:55
  • 587

js在指定位置输出

function show(){  document.getElementById("showlast").innerHTML=document.lastModified;   //黄色部分为输出内...
  • k8080880
  • k8080880
  • 2011年09月16日 15:02
  • 1563

状态栏的时间显示(javascript)

var timerID = null;//设置变量timeID,其为null数据类型。var timerRunning = false;//设置变量timeRunning,其为布尔型。function...
  • zhaoxiaoyang5156
  • zhaoxiaoyang5156
  • 2007年07月13日 23:14
  • 722

javaScript实现弹出层效果

html lang="en"> head> meta charset="UTF-8"> title>弹出层title> link rel="stylesheet" href="...
  • darongzi1314
  • darongzi1314
  • 2016年09月27日 18:44
  • 293

通过js得到时间,并显示到jsp上

代码: 部分jsp代码:          id="startdate" style="width:120px;" editable="false" class="easyui-dat...
  • u013456370
  • u013456370
  • 2016年12月20日 15:16
  • 448

高德地图开发(二)地图上显示指定位置

根据坐标在地图上显示指定点,并给出点的具体地址
  • lhp15575865420
  • lhp15575865420
  • 2017年10月02日 14:15
  • 953

在指定位置显示窗口

昨天一同学问我一个问题,如何在页面的指定元素的指定位置,点击该元素触发显示窗口的事件网上查了一下资料,自己整理了一下,代码如下:function showWindow(obj){   var oPop...
  • naruto1021
  • naruto1021
  • 2009年10月14日 09:05
  • 443

用javascript实现浮出层

前段时间做需求时。积累下一个小组件,这个小组件是实现类似title提示的功能。它支持同步和异步地向浮出层中渲染数据。 Demo 大家可以到这里查看实例。大家可以缩小浏览器的窗口,然后再看浮...
  • xiaioji
  • xiaioji
  • 2012年12月02日 15:35
  • 414

JavaScript实现多个重叠的层点击切换效果

如题所述的层切换效果,在网页上有三个层按一定次序互相重叠,鼠标点击任意一个层,该层会在最顶层显示,其它层被遮挡,点击鼠标即可实现自由切换,此为第一种方法,还有更多方法...
  • life66881
  • life66881
  • 2015年03月05日 13:28
  • 527
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用JavaScript实现层在指定位置显示
举报原因:
原因补充:

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