给指定的页面元素增加浮动div

最新推荐文章于 2023-12-16 06:30:00 发布

最新推荐文章于 2023-12-16 06:30:00 发布 · 209 阅读

文章标签：

#JavaScript #HTML #ViewUI

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页元素动态显示与隐藏的方法。通过为特定元素添加鼠标悬停事件，当用户将鼠标移至指定文本框上时，会触发一个包含额外内容的DIV显示出来。该DIV的位置和大小可以通过JavaScript精确控制，并且用户可以点击链接来关闭它。这种方法增强了网页的交互性和用户体验。

<html>
<head><title>eg </title>
<SCRIPT language="javascript" src="../2/div.js"></SCRIPT>
  <script language="javascript">


   function dynamicDiv(str,div)
   {
    var str1="z|sd|asdf|z1";
    var arr=new Array();
   arr=str1.split("|");
   var tem=new Array();

    for(var i=0;i<arr.length;i++)
          {
           tem[i]=document.getElementById(arr[i]);
           if(tem[i]!=null)
           {
             tem[i].onmouseover=new Function("show('"+div+"','"+arr[i]+"')");
           }
           }
   }
   function show(div,controlID)
   {
      var obj=document.getElementById(controlID);



      var t=document.getElementById(div);

     t.style.zIndex=11;
      //t.style.z-Index=2;
       t.style.display="block";
      t.style.position="absolute";
      //div显示的位置
      t.style.top=obj.offsetTop+20;
      t.style.left=obj.offsetLeft;
      //div显示长度.宽度
      t.width="20";
      t.height="50";




   }
   //关闭div
   function hidden(div)
   {

    var t=document.getElementById(div);
    if(t!=null)
    {
     t.style.display="none";
    }
   }



</script>
</head>
<body onload="dynamicDiv('s','div1')">



<input type="text" id="z" value="123" name="z"/><br>
<input type="text" id="z1" value="321" name="z1"/>
<div name="div1" id="div1" style="display:none;background-color :red;">
<input type="text" id="123" name="123" value="dddddd"/>
<a href="#" onclick="hidden('div1')" >关闭</a>
asldfjsk
</div>
</body>
</html>