鼠标移到某个项目中就呈现详细信息 移开信息就消失
如题:鼠标移上去取得ID 根据ID呈现详细信息。移开后信息消失
类似于:
移上去后: --------------------编程问答-------------------- onmouseover 执行JS方法 比较麻烦手头上没有现成的源码 你自己写吧 --------------------编程问答--------------------
这个我知道 就是后面的不知咋弄 --------------------编程问答-------------------- 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