js获取鼠标坐标,设置div的高度、位置、内容等,及注意要点
后台:GridView控件的方法
protected void ShowGrid_OnRowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { //string str1,......... e.Row.Cells[2].Attributes.Add("onmouseover", "mouseOverTip('" + str1+ "','" + str2+ "','" + "......"+ "')"); e.Row.Cells[2].Attributes.Add("onmouseout", "mouseOutTip()"); //e.Row.Cells[2].Attributes.Add("onmousemove", "mousemoveTip('" + str1+ "','" + str2+ "','" + "......"+ "',event)"); e.Row.Cells[2].Attributes.Add("onmousemove", "mousemoveTip2(event)"); } if (e.Row.RowType == DataControlRowType.DataRow)//-1 != e.Row.RowIndex { //鼠标经过时,行背景色变 e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#00A9FF'"); Button1.Text = e.Row.RowIndex.ToString(); Forecast_DataBind(((Label)(e.Row.Cells[0].Controls[1])).Text.ToString().Trim()); //鼠标移出时,行背景色变 e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'"); } }
前台:javascript部分
<script type="text/javascript" > function mouseOverTip(str1,str2,....) { var div1 = document.getElementById("tipdiv"); div1.style.display = "block"; document.getElementById("gnamediv").innerHTML = "站名:" + str1; document.getElementById("wstatusdiv").innerHTML = "天气现象:" + str2; //...... } function mouseOutTip() { var div1 = document.getElementById("tipdiv"); div1.style.display = "none"; } function mousemoveTip(str1,str2,.....,event) { var div1 = document.getElementById("tipdiv"); div1.style.display = "block"; document.getElementById("gnamediv").innerHTML = "名称:" + str1; document.getElementById("wstatusdiv").innerHTML = "天气:" + str2; //...... var x, y; var e = e || event; x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + 20; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; div1.style.position = "absolute"; div1.style.top = y + "px"; div1.style.left = x + "px"; } function mousemoveTip2(event) { var div1 = document.getElementById("tipdiv"); var x, y; var e = e || event; x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + 20; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; div1.style.position = "absolute"; div1.style.top = y + "px"; div1.style.left = x + "px"; } </script>
实现功能:当鼠标悬停在、离开、移动于gridview第2列上时,展现细节内容的div层或显示、或隐藏、或移动。
注意要点(易出问题的地方):1、div1.style.display = "block"; "block"需要加引号。
2、div1.style.position = "absolute"; 这一句是需要的。
3、div1.style.left = x + "px"; 需要加上"px"。如果缺少,只能在搜狗浏览器上正常运行,起作用;在IE、FireFox、360浏览器上,div的位置将是固定不随鼠标动的。
4、var e = e || event; 这里应该是event,不应该是window.event。如果写成window.event,在FireFox上不兼容。