鼠标指到表的每一行记录时，动态的展示一个div，这么定位呢,该如何处理-JavaSript-爱易网页

鼠标指到表的每一行记录时，动态的展示一个div，这么定位呢,该如何处理

日期：2014-05-16　浏览次数：20453 次

鼠标指到表的每一行记录时，动态的展示一个div，这么定位呢
比如一个产品表，每一行就是一个产品记录，现在想把鼠标指到第一行，就在这行的附近（可以在右边稍微下点的位置）展示一个div，里面的内容就是产品详细介绍。
可是现在我的问题就是不知道怎么给这个div定位。请教大家哦！

------解决方案--------------------
[code=HTML]<HTML>
<HEAD>
<script Language="JavaScript">
function showDivMenu(sub){
document.getElementById(sub).style.left = window.event.clientX - 100 ;//鼠标位置
document.getElementById(sub).style.top = window.event.clientY + 15 ;
if (document.getElementById(sub).style.display =="none")
{
document.getElementById(sub).style.display ="block";
}
else if(document.getElementById(sub).style.display == "block")
{
document.getElementById(sub).style.display ="none";
}
}
</Script>
</HEAD>
<BODY>
<table>
<tr>
<td nowrap onMouseOver="showDivMenu('leon1')" onMouseOut="showDivMenu('leon1')">
<div align="center">XX1111XX</div>
<div id="leon1" style="position:absolute; background:#B8D5F5; display:none;">
111111111111111111
</div>
</td>
</tr>
<tr>
<td nowrap onMouseOver="showDivMenu('leon2')" onMouseOut="showDivMenu('leon2')">
<div align="center">XX222XX</div>
<div id="leon2" style="position:absolute; background:#B8D5F5; display:none;">
22222222222222222222222
</div>
</td>
</tr>
</table>
</BODY>
</HTML>[code]

<div id="leon">的id属性写成自增的就好了
------解决方案--------------------
这段代码可以实现在GridView中随着鼠标的移动，在鼠标右下方，显示不同的图片。
前台代码：

HTML code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
   </head>
<body>
    <form id="form1" runat="server">
    <script language="javascript" type="text/javascript">
//browser detection
    var agt=navigator.userAgent.toLowerCase();
    var is_major = parseInt(navigator.appVersion);
    var is_minor = parseFloat(navigator.appVersion);

    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
    var is_nav4 = (is_nav && (is_major == 4));
    var is_nav6 = (is_nav && (is_major == 5));
    var is_nav6up = (is_nav && (is_major >= 5));
    var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
</script>

<script language="javascript" type="text/javascript">
debugger;
    var offsetX = 0;
    var offsetY = 5;
    var opacity = 100;
    var toolTipSTYLE;

    function toolTip(msg, fg, bg)
    {
      if(toolTip.arguments.length < 1) // if no arguments are passed then hide the tootip
      {
        if(is_nav4)
            toolTipSTYLE.visibility = "hidden";
        else
            toolTipSTYLE.display = "none";
      }
      else // show
      {
        if(!fg) fg = "#777777";
        if(!bg) bg = "#ffffe5";
        var content = '<table border="0" cellspacing="0" cellpa

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

鼠标指到表的每一行记录时，动态的展示一个div，这么定位呢,该如何处理

相关资料更多>

推荐阅读更多>