鼠标在文本上移动时层的显示与消失（以及层里显示图片）ASP.NET

最新推荐文章于 2021-06-05 07:08:30 发布

lifuyun

最新推荐文章于 2021-06-05 07:08:30 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：行业项目项目团队DONET . net ASP.NET 文章标签： asp.net function ie javascript null border

本文链接：https://blog.youkuaiyun.com/lifuyun/article/details/1761965

ASP.NET 同时被 3 个专栏收录

53 篇文章

订阅专栏

. net

52 篇文章

订阅专栏

项目团队DONET

22 篇文章

订阅专栏

这篇博客介绍了如何在ASP.NET中使用JavaScript实现鼠标在文本上移动时显示和隐藏层的功能，包括显示文字和图片。示例代码展示了两种方法，一种显示一段时间后自动隐藏，另一种显示不隐藏。同时，博主分享了在不同文本和层之间切换的处理方式，并讨论了onmouseover和onmousemove事件的区别。文章最后提到了在WebGIS中可能需要采用不同的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下面是显示文字的层做法如下：
把这里的所有代码都放在<body>与</body>之间即可
<script language=javascript>

</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：浦东新区张江高科技园区<br>电

话：021-51314288-23</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(); οnmοusemοve=showdiv();>李福云联系方式</a></td>
</tr>
</table>
当然了这里的功能比较简单，没有对浏览器类型进行判断，就把这个问题留给各位了，欢迎每一位朋友来修改这个问题。
在这里还有一个问题就是如果文本不止一个、定义的层也就不止一个。如果还用这样的方法就会出错，对这个问题研究了一下，用下面的这个方法就可以解决了。
<script language=javascript>

</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：浦东新区张江高科技园区<br>电

话：021-51314288-23</div>

<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top:

36">地址：安徽芜湖市清水镇<br>电话：021-51314288-23</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(ab); οnmοusemοve=showdiv(ab);>李福云联系方式</a></td>
</tr>
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(cd); οnmοusemοve=showdiv(cd);>家乡之宝坻</a></td>
</tr>
</table>
如果有更多的文本和层的话以此类推即可。
　　在这里有几点要说明的就是：
　　1、showdiv中带参数时再用document.all.ab.style.display=""就不适用了，关于这点朋友们可以参考有关书籍
　　2、onmouseover与onmousemove的区别是：当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件，只要是在对象上移动而且

没有移出对象的，就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。
　　3、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。
　　4、有需要的朋友可以直接拿去用。
二、下面显示图片层的二种方法总结如下：
A、显示一段时间后自动隐藏：
<a href="#" title="<img src='https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/lifuyun/312101/o_%e6%9d%8e%e7%a6%8f%e4%ba%91.JPG'/>">帅哥</a>　　　
<a href="#" title="<img src='http://bbs.bc-cn.net/UploadFace/27761.jpg'/>">美女</a>
<script language="javascript">
//***********默认设置定义.*********************
tPopWait=50;    //停留tWait豪秒后显示提示。
tPopShow=5000;    //显示tShow豪秒后关闭提示
showPopStep=2;    //显示渐变快慢
popOpacity=99;    //消失渐变快慢
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12pt; padding-right: 4px; padding-left:

4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;font-size: 9pt;' class='cPopText'></div>");
function showPopupText()
{
    var o=event.srcElement;
    MouseX=event.x;
    MouseY=event.y;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
    if(o.dypop!=sPop)
    {
        sPop=o.dypop;
        clearTimeout(curShow);
        clearTimeout(tFadeOut);
        clearTimeout(tFadeIn);
        clearTimeout(tFadeWaiting);
        if(sPop==null || sPop=="")
        {
            dypopLayer.innerHTML="";
            dypopLayer.style.filter="Alpha()";
            dypopLayer.filters.Alpha.opacity=0;
        }
        else
        {
            if(o.dyclass!=null) popStyle=o.dyclass
            else popStyle="cPopText";
            curShow=setTimeout("showIt()",tPopWait);
        }
    }
}
function showIt()
{
    dypopLayer.className=popStyle;
    dypopLayer.innerHTML=sPop;
    popWidth=dypopLayer.clientWidth;
    popHeight=dypopLayer.clientHeight;
    if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
    else popLeftAdjust=0;
    if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
    else popTopAdjust=0;
    dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
    dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
    dypopLayer.style.filter="Alpha(Opacity=0)";
    fadeOut();
}
function fadeOut()
{
    if(dypopLayer.filters.Alpha.opacity<popOpacity)
    {
        dypopLayer.filters.Alpha.opacity+=showPopStep;
        tFadeOut=setTimeout("fadeOut()",1);
    }
    else
    {
        dypopLayer.filters.Alpha.opacity=popOpacity;
        tFadeWaiting=setTimeout("fadeIn()",tPopShow);
    }
}
function fadeIn()
{
    if(dypopLayer.filters.Alpha.opacity>0)
    {
        dypopLayer.filters.Alpha.opacity-=1;
        tFadeIn=setTimeout("fadeIn()",1);
    }
}
document.οnmοuseοver=showPopupText;
function opwin()
{
    if(IsLogin)
    {
        dypopLayer.filters.Alpha.opacity-=1;
        tFadeIn=setTimeout("fadeIn()",1);
    }
    else
    {
    }
}
</script>
B、显示不隐藏：
<form method="POST" name="from" action="">
<a style='CURSOR:hand' οnmοuseοver='showmenu(event,"<img name=LogoPic

οnlοad=/"javascript:if(this.width>200)this.style.width=200;/">");document.images.LogoPic.src=document.from.Logo.value;' οnmοuseοut='delayhidemenu()'

>[预览]</a>
<div class="menuskin" id="popmenu" οnmοuseοver="clearhidemenu();highlightmenu(event,'on')" οnmοuseοut="highlightmenu(event,'off');dynamichide(event)"

style="Z-index:100"></div>
<style>.menuskin {Border: #666666 1px solid; Visibility: hidden; Position: absolute; Font: 12px Verdana; Background-Color:#EFEFEF; background-repeat :

repeat-y;}</style>
<input type="hidden" name="Logo" value="http://bbs.bc-cn.net/UploadFace/27761.jpg"></form>

eventX-menuobj.contentwidth
        else
            menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX

        if (bottomedge<menuobj.contentheight&&mod!=0)
            menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6?

function contains_ns6(a, b) {
    while (b.parentNode)
        if ((b = b.parentNode) == a)
            return true;
    return false;
}
function hidemenu(){
    if (window.menuobj)
        menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
    ie_clearshadow()
}
function dynamichide(e){
    if (ie4&&!menuobj.contains(e.toElement))
        hidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
        hidemenu()
}
function delayhidemenu(){
    if (ie4||ns6||ns4)
        delayhide=setTimeout("hidemenu()",500)
}
function clearhidemenu(){
    if (window.delayhide)
        clearTimeout(delayhide)
}
function highlightmenu(e,state){
    if (document.all)
        source_el=event.srcElement
    else if (document.getElementById)
        source_el=e.target
    if (source_el.className=="menuitems"){
        source_el.id=(state=="on")? "mouseoverstyle" : ""
    }
    else{
        while(source_el.id!="popmenu"){
            source_el=document.getElementById? source_el.parentNode : source_el.parentElement
            if (source_el.className=="menuitems"){
                source_el.id=(state=="on")? "mouseoverstyle" : ""
            }
        }
    }
}
</script>
三、总结：
以上都是一些比较简单的层显示，其实还有很多更高级的特性，本人正在研究中，若如有感兴趣的请与我联系共同探讨。由于时间的因素，还有一些我没有来的急传上来