当前位置:编程学习 > C#/ASP.NET >>

鼠标移到某个项目中就呈现详细信息 移开信息就消失

如题: 
鼠标移上去取得ID 根据ID呈现详细信息。移开后信息消失
类似于:
移上去后: --------------------编程问答-------------------- onmouseover 执行JS方法   比较麻烦手头上没有现成的源码 你自己写吧 --------------------编程问答--------------------
引用楼主 zsc1109 的回复:
如题:
鼠标移上去取得ID 根据ID呈现详细信息。移开后信息消失
类似于:
移上去后:

这个我知道 就是后面的不知咋弄 --------------------编程问答-------------------- onmouseover 

就是div的显示与隐藏。 --------------------编程问答-------------------- 这个用JS是可以搞定的就是要花点时间。 --------------------编程问答-------------------- 放上鼠标 
onmouseover="display()"

function display()
{
  "显示一个浮动的div层
}

onmouseout="undisplay()"

function undisplay()
{
  "关闭刚打开的div显示层
}


代码:参照:
http://download.csdn.net/source/2080859 --------------------编程问答-------------------- 以下是我原来写的代码,和你的需求是一样的,代码里有注释,你自己看看

var baseText = null;
        function showPopup(w,h,uid,id)        //当鼠标移到某范围是执行 显示DIV
        {   
            
           var param = "uid="+uid+"&id=" + id;
            var options =
            { 
                 method: 'post', parameters: param, onComplete:
                 function(transport) {
                     var retv = transport.responseText;
                     var arr =retv.split("_|");
                    document.getElementById("ctl00_workspace_txtContent").value = arr[0];
                    document.getElementById("sptitle").innerHTML=arr[1];
                    document.getElementById("sptype").innerHTML=arr[2];
                    document.getElementById("spname").innerHTML=arr[3];
                    document.getElementById("sptel").innerHTML=arr[4];
                 }
            }
            new Ajax.Request('mytel.aspx', options);
            
            //以上代码为 当onmouseover时要显示的信息
            
            
            var popUp = document.getElementById("popupcontent"); 
            popUp.style.top = 50+document.documentElement.scrollTop;
            popUp.style.left = document.body.clientWidth/2-w/2;   //在屏幕居中显示
            popUp.style.width = w + "px";  
            popUp.style.height = h + "px";  
            if (baseText == null) 
            baseText = popUp.innerHTML;  
            popUp.innerHTML = baseText+"<div id=\"statusbar\"></div>"; 
            var sbar = document.getElementById("statusbar");   
            sbar.style.marginTop = (parseInt(h)-60) + "px";  
            popUp.style.visibility = "visible";
            
        }
        function hiddenPopup()         //当光标移开时执行,隐藏DIV
        {
            var popUp = document.getElementById("popupcontent");   
            popUp.style.visibility="hidden";
        }

<div id="popupcontent" style="width:530px; height:585px; text-align:left;" class="center">
    <div class="shangquan_bg">
    <div class="shangquan_bg_l"></div>
    <div class="shangquan_bg_r"></div>
    </div>
    <div style="width:100%; height:550px;">
    <div class="shangquan_lbg"></div>
           <div class="jiaotan_main">
          <div class="jiaotan_title">
          <span style="float:left; margin-top:3px;"><img src="../templates/telren/images/jiaotan_tit.jpg" /></span>
          <span style="color:#F5CF88; line-height:27px; float:right">手机人  </span>
          </div><br>
          <div class="jiaotan">
          <div><img src="../templates/telren/images/jiaotan1.jpg" /> <span id="sptitle"> </span>     </div>
          <div><img src="../templates/telren/images/jiaotan2.jpg" /> <span id="sptype"> </span></div>
          <div><img src="../templates/telren/images/jiaotan3.jpg" /> <span id="spname"> </span></div>
          <div><img src="../templates/telren/images/jiaotan4.jpg" /> <span id="sptel"> </span></div>
          <div style="height:300px;"><img src="../templates/telren/images/jiaotan5.jpg"   style="float:left"/> <div style="float:left; width:370px; margin-left:5px;">
                          <asp:TextBox ID="txtContent" Width="370px" Height="280px" runat="server" 
                              TextMode="MultiLine" ></asp:TextBox></div></div>
          <div style="height:40px; margin-top:15px; text-align:center;"><a href=""> 
                          <asp:ImageButton ID="imgbtnSend" 
                              ImageUrl="../templates/images/jiaotan6.jpg" Width="76px" Height="24px" 
                              runat="server" onclick="imgbtnSend_Click" /></a> <a href="javascript:void(0);"><img src="../templates/images/jiaotan7.jpg" onclick="hiddenPopup();" /></a></div>
          </div>
          </div>
     <div class="shangquan_rbg"></div>
    </div>
    <div class="shangquan_fbg">
    <div class="shangquan_fbg_l"></div>
    <div class="shangquan_fbg_r"></div>
    </div>
    </div>


上面两段是JS和要显示的DIV。 你再在一个控件上写个onmouseover和onMouseMove方法就行了,触发showPopup()方法和hiddenPopup()方法 --------------------编程问答-------------------- onmousemove
onmousemout显示DIV
function $(id){
            return document.getElementById(id);
        }
        function show(evt){
            $("div1").innerHTML = "show";
        }
        
        function abc(evt){
            $("div1").innerHTML = "abc";
        }
<div onMouseOver="show();" onmouseout="abc();">
        </div>
        
        <hr>
        <div id="div1"></div>
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,