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

whcyl 2008-02-26 01:04:42

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

...全文

219 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

joegu 2008-05-27

打赏
举报



<!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>

 <title>Form field hints with CSS and JavaScript</title>

<style type="text/css">





/* All form elements are within the definition list for this example */

dl {

 font:normal 12px/15px Arial;

    position: relative;

    width: 350px;

}

dt {

    clear: both;

    float:left;

    width: 130px;

    padding: 4px 0 2px 0;

    text-align: left;

}

dd {

    float: left;

    width: 200px;

    margin: 0 0 8px 0;

    padding-left: 6px;

}





/* The hint to Hide and Show */

.hint {

    display: none;

    position: absolute;

    right: -250px;

    width: 200px;

    margin-top: -4px;

    border: 1px solid #c93;

    padding: 10px 12px;

    /* to fix IE6, I can't just declare a background-color,

    I must do a bg image, too!  So I'm duplicating the pointer.gif

    image, and positioning it so that it doesn't show up

    within the box */

    background: #ffc url(pointer.gif) no-repeat -10px 5px;

}



/* The pointer image is hadded by using another span */

.hint .hint-pointer {

    position: absolute;

    left: -10px;

    top: 5px;

    width: 10px;

    height: 19px;

    background: url(pointer.gif) left top no-repeat;

}

</style>

<script type="text/javascript">

function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      oldonload();

      func();

    }

  }

}



function prepareInputsForHints() {

 var inputs = document.getElementsByTagName("input");

 for (var i=0; i<inputs.length; i++){

  // test to see if the hint span exists first

  if (inputs[i].parentNode.getElementsByTagName("span")[0]) {

   // the span exists!  on focus, show the hint

   inputs[i].onfocus = function () {

    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";

   }

   // when the cursor moves away from the field, hide the hint

   inputs[i].onblur = function () {

    this.parentNode.getElementsByTagName("span")[0].style.display = "none";

   }

  }

 }

 // repeat the same tests as above for selects

 var selects = document.getElementsByTagName("select");

 for (var k=0; k<selects.length; k++){

  if (selects[k].parentNode.getElementsByTagName("span")[0]) {

   selects[k].onfocus = function () {

    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";

   }

   selects[k].onblur = function () {

    this.parentNode.getElementsByTagName("span")[0].style.display = "none";

   }

  }

 }

}

addLoadEvent(prepareInputsForHints);

</script>

</head>

<body>

<p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p>



<dl>

 <dt>

  <label for="firstname">First Name:</label>

 </dt>

 <dd>

  <input

   name="firstname"

   id="firstname"

   type="text" />

  <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span>

 </dd>

 <dt>

  <label for="lastname">Last Name:</label>

 </dt>

 <dd>

  <input

   name="lastname"

   id="lastname"

   type="text" />

  <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span>

 </dd>

 <dt>

  <label for="email">Email:</label>

 </dt>

 <dd>

  <input

   name="email"

   id="email"

   type="text" />

  <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span>

 </dd>

 <dt><label for="year">Birth Year:</label></dt>

 <dd>

  <select id="year" name="year">

   <option value="">YYYY</option>

   <option value="1066">1066</option>

   <option value="1492">1492</option>

   <option value="1776">1776</option>

   <option value="1812">1812</option>

   <option value="1917">1917</option>

   <option value="1942">1942</option>

   <option value="1999">1999</option>

  </select>

  <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span>

 </dd>

 <dt>

  <label for="username">Username:</label>

 </dt>

 <dd>

  <input

   name="username"

   id="username"

   type="text" />

  <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span>

 </dd>

 <dt>

  <label for="password">Password:</label>

 </dt>

 <dd>

  <input

   name="password"

   id="password"

   type="password" />

  <span class="hint">Between 5-13 characters, but not 7.  Never 7.<span class="hint-pointer"> </span></span>

 </dd>

 <dt class="button"> </dt>

 <dd class="button">

  <input

   type="submit"

   class="button"

   value="Submit" />

 </dd>

</dl>

<a href="http://webdeveloper.earthweb.com/repository/javascripts/2008/05/879041/formfieldhints.zip">Download This JavaScript</a>



</body>

</html>



网上看到的，参考下吧，IE中测试过，好用的

ldb5736030 2008-05-26

打赏
举报

这段代码可以实现在GridView中随着鼠标的移动，在鼠标右下方，显示不同的图片。
前台代码：



<%@ 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" cellpadding="0" class="toolTip"><tr><td bgcolor="' + fg + '">' +

                                      '<table border="0" cellspacing="1" cellpadding="0"<tr><td bgcolor="' + bg + '">'+

                                      '<font face="sans-serif" color="' + fg + '" size="-2">' + msg +

                                      '</font></td></tr></table>'+

                                      '</td></tr></table>';

       if(is_nav4)

        {

          toolTipSTYLE.document.write(content);

          toolTipSTYLE.document.close();

          toolTipSTYLE.visibility = "visible";

        }



        else if(is_ie || is_nav6up)

        {

          document.getElementById("toolTipLayer").innerHTML = content;

          toolTipSTYLE.display='block'

        }

      }

    }



    function moveToMousePos(e)

    {

      if(!is_ie){

        x = e.pageX;

        y = e.pageY;

      }else{

        x = event.x + document.body.scrollLeft;

        y = event.y + document.body.scrollTop;

      }



      toolTipSTYLE.left = x + offsetX+'px';

      toolTipSTYLE.top = y + offsetY+'px';

      return true;

    }



    function show(strPath)

    {

        var strtemp = strPath.replace('~', '../..');

        if(document.getElementById)

        {

              toolTipSTYLE = document.getElementById("toolTipLayer").style;

        }

        if(is_ie || is_nav6up)

        {

            toolTipSTYLE.visibility = "visible";

            toolTipSTYLE.display = "none";

            document.onmousemove = moveToMousePos;

        }

          

        s = '<table width="103px" cellspacing="2" cellpadding="2" border="0">';    

        s += '<tr><td><img src="'+ strtemp + '" border="0"/> </td></tr>';   

        s += '</table>';

        toolTip(s);

     }

</script>

<div id="toolTipLayer" style="position: absolute; visibility: hidden; left: 0; right: 0">

</div>

<asp:GridView ID="GV1" runat="server" AllowPaging="True" AutoGenerateColumns="False"

        Width="100%" OnRowDataBound="GV1_RowDataBound">

        <Columns>

            <asp:TemplateField HeaderText="序号">

                <ItemStyle HorizontalAlign="Center" Width="5%"></ItemStyle>

                <ItemTemplate>

                    <asp:Label ID="LbNo" runat="server" Text='<%# this.GV1.PageIndex * this.GV1.PageSize + this.GV1.Rows.Count + 1 %>'></asp:Label>

                </ItemTemplate>

            </asp:TemplateField>

            <asp:TemplateField Visible="true">

                <ItemStyle HorizontalAlign="Center" Width ="5%"></ItemStyle>

                <ItemTemplate>

                    <asp:Label ID="LbId" runat="server" Text='<% # Bind("ImgID") %>'></asp:Label>

                </ItemTemplate>

            </asp:TemplateField>

            <asp:TemplateField HeaderText="预览图片">

                <ItemStyle  Width="10%"></ItemStyle>

                <ItemTemplate>

                    <asp:HiddenField ID="hidImage" runat="server" Value='<% # Bind("ImgUrl") %>' />

                    <asp:Label ID="LbPreview" runat="server" Text="预览"></asp:Label>

                </ItemTemplate>

            </asp:TemplateField>        </Columns>

        <HeaderStyle BackColor="Silver"></HeaderStyle>

        <AlternatingRowStyle BackColor="#C0FFC0"></AlternatingRowStyle>

    </asp:GridView>





    </form>

</body>

</html>

.CS代码：



using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;



public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        SQLHelper sql = new SQLHelper();

        DataTable dt = sql.getpicinfo();

        this.GV1.DataSource = dt;

        this.GV1.DataBind();

    }

    protected void GV1_RowDataBound(object sender, GridViewRowEventArgs e)

    {

        //---要绑定的数据Services方法--

        if (e.Row.RowType == DataControlRowType.DataRow)

        {

            HiddenField hidImage = (HiddenField)e.Row.FindControl("hidImage");

            Label lbPreview = (Label)e.Row.FindControl("LbPreview");

            Label lbId = (Label)e.Row.FindControl("lbId");



            if (lbPreview == null || hidImage == null || lbId ==null  )

            {

                return;

            }



            if (!string.IsNullOrEmpty(hidImage.Value))

            {

                // get selected user name

                lbPreview.Attributes.Add("onmouseover", "show(\'" + hidImage.Value.Trim() + "\')");

                lbPreview.Attributes.Add("onmouseout", "toolTip()");

            }

        }

    }

}

世界因你而小 2008-05-26

打赏
举报

mark

whcyl 2008-02-26

打赏
举报

虽然是取鼠标的位置来设置div的位置
但是这个表是有滚动条的，好像有滚动条的时候div就不是那么听话了，设置起来这样好像不行吧

PleaseDoTellMeWhy 2008-02-26

打赏
举报

也就是取鼠标的位置！

function show( events )
{
//取鼠标位置
var x = events.x ? events.x : events.pageX;
var y = events.y ? events.y : events.pageY;
}

<input type="button" value="test" onclick="show(event);"

给div加上样式style="position:absolute;"

他的top 和left属性设定为
divname.style.top = y;
divname.style.left = x;

如果想让他移动到上面就显示，移开就隐藏，就设置divname.style.display 为 '' 或者 'none'!

loveyunwt 2008-02-26

打赏
举报

[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属性写成自增的就好了

xf_pan 2008-02-26