01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="NET_Default" %>
02.
03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04.
05.<html xmlns="http://www.w3.org/1999/xhtml" >
06.<head runat="server">
07. <title>鼠标划过显示Div层,Div层里面的信息从数据库中取出</title>
08. <mce:script type="text/javascript"><!--
09. function showTip(oEvent,obj){
10. var oDiv = document.getElementById("divTip1");
11.
12. NET_Default.ReturnTable(obj,callback);
13.
14. oDiv.style.visibility="visible";
15. oDiv.style.left = oEvent.clientX-25;
16. oDiv.style.top =oEvent.clientY-35;
17. }
18. function hideTip(oEvent){
19. var oDiv = document.getElementById("divTip1");
20. oDiv.style.visibility = "hidden";
21. }
22. function callback(res)
23. {
24. if(res!=null)
25. {
26. document.getElementById("divTip1").innerHTML=res.value;
27. }
28. }
29.
30.// --></mce:script>
31.</head>
32.<body>
33. <form id="form1" runat="server">
34. <div>
35.
36. </div>
37. <asp:DataList ID="DataList1" runat="server">
38. <ItemTemplate>
39. <table>
40. <tr>
41. <td>姓名</td>
42. <td onmouseover="showTip(event,'<%#Eval("UserName") %>')" onmouseout="hideTip(event)"><%#Eval("UserName") %></td>
43. </tr>
44. </table>
45. </ItemTemplate>
46. </asp:DataList>
47. <div id="divTip1"
48. style="background:yellow; position:absolute; visibility:hidden; padding: 5px" mce_style="background:yellow; position:absolute; visibility:hidden; padding: 5px">
49. </div>
50. </form>
51.</body>
52.</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="NET_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>鼠标划过显示Div层,Div层里面的信息从数据库中取出</title>
<mce:script type="text/javascript"><!--
function showTip(oEvent,obj){
var oDiv = document.getElementById("divTip1");
NET_Default.ReturnTable(obj,callback);
oDiv.style.visibility="visible";
oDiv.style.left = oEvent.clientX-25;
oDiv.style.top =oEvent.clientY-35;
}
function hideTip(oEvent){
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
function callback(res)
{
if(res!=null)
{
document.getElementById("divTip1").innerHTML=res.value;
}
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<table>
<tr>
<td>姓名</td>
<td onmouseover="showTip(event,'<%#Eval("UserName") %>')" onmouseout="hideTip(event)"><%#Eval("UserName") %></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<div id="divTip1"
style="background:yellow; position:absolute; visibility:hidden; padding: 5px" mce_style="background:yellow; position:absolute; visibility:hidden; padding: 5px">
</div>
</form>
</body>
</html>
view plaincopy to clipboardprint?
01.using System;
02.using System.Data;
03.using System.Configuration;
04.using System.Collections;
05.using System.Web;
06.using System.Web.Security;
07.using System.Web.UI;
08.using System.Web.UI.WebControls;
09.using System.Web.UI.WebControls.WebParts;
10.using System.Web.UI.HtmlControls;
11.
12.public partial class NET_Default : System.Web.UI.Page
13.{
14. DataTable DT = new DataTable();
15. DataColumn DC = new DataColumn();
16. DataRow DR;
17. protected void Page_Load(object sender, EventArgs e)
18. {
19. AjaxPro.Utility.RegisterTypeForAjax(typeof(NET_Default));
20. if (!Page.IsPostBack)
21. {
22. CreateDataTable();
23.
24. for (int i = 0; i < 3; i++)
25. {
26. DR = DT.NewRow();
27. DR["ID"] = i.ToString();
28. DR["UserName"] ="胡果" + i.ToString();
29. DR["Keyword"] = "欢迎你ws_hgo" + i.ToString();
30. DT.Rows.Add(DR);
31. }
32.
33. }
34. DataList1.DataSource = DT;
35. DataList1.DataBind();
36. }
37. public void CreateDataTable()
38. {
39. DC = new DataColumn();
40. DC.ColumnName = "ID";
41. DC.DataType = System.Type.GetType("System.Int32");
42. //DC = new DataColumn("ID", System.Type.GetType("System.Int32"));
43. DT.Columns.Add(DC);
44. DC = new DataColumn();
45. DC.ColumnName = "UserName";
46. DC.DataType = System.Type.GetType("System.String");
47. DT.Columns.Add(DC);
48. DC = new DataColumn();
49. DC.ColumnName = "Keyword";
50. DC.DataType = System.Type.GetType("System.String");
51. DT.Columns.Add(DC);
52.
53. }
54. [AjaxPro.AjaxMethod]
55. public string ReturnTable(string Name)
56. {
57. string res;
58. //我这里有数组代替
59. string[] str = new string[] { "胡果0", "胡果1", "胡果2" };
60. if (Array.IndexOf<string>(str, Name) != -1)
61. {
62. res = "欢迎大家来到" + Name.Substring(0,Name.Length-1).ToString() + "http://blog.csdn.net/ws_hgo";
63. }
64. else
65. {
66. res = "无!";
67. }
68. return res;
69. }
70.}
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/ws_hgo/archive/2009/09/22/4579913.aspx
分享到:
相关推荐
在本案例中,"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时,会显示出一个div层,该div层中包含有与input相关的附加信息或者功能。 首先,我们需要了解几个关键的概念: 1. **事件监听器**:...
在网页设计中,有时我们需要实现一个功能:当用户将鼠标悬停在某个div元素上时,显示特定的信息或另一个div。这个功能可以增强用户体验,帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能,并确保...
"DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果,它通过改变鼠标悬停在元素上时的背景图像位置,创造出一种类似门开启或关闭的动画效果。 具体来说,滑动门效果主要基于以下CSS属性: 1. **...
在网页开发中,有时我们需要创建动态的交互效果来提升用户体验,比如当鼠标移过某个元素时,相关的提示信息会以渐变的方式显示出来。本文主要介绍了一种使用JavaScript(JS)和层叠样式表(CSS)相结合的方法,来...
当我们想要在用户将鼠标悬停在某个元素上时显示额外的信息,我们可以利用CSS来隐藏这个div,然后通过JavaScript事件监听器在鼠标悬停事件触发时显示它。 首先,我们需要创建一个div,并将其样式设置为默认隐藏。在...
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
在网页设计中,"仿CSDN鼠标移上去的显示DIV浮动层"是一种常见的交互设计技术,主要用于增强用户体验,提供更多的信息提示。这种效果常见于文章列表、菜单栏或者按钮等元素,当用户将鼠标悬停在某个元素上时,会有一...
// 鼠标进入时显示DIV层 }, function() { $("#popupLayer").hide(); // 鼠标离开时隐藏DIV层 } ); $("#popupLayer").mouseleave(function() { $(this).hide(); // 当鼠标离开弹出层时,也隐藏DIV层 }); }...
在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...
在网页设计中,为了提升用户体验,常常会使用一种叫做“鼠标划过小图片显示大图片”的特效。这种特效使得用户在鼠标悬停在小图片上时,能够预览到相应的大图片,无需点击就能了解图片的详细内容。下面将详细解释如何...
在Web开发中,通过JavaScript(简称JS)和CSS结合可以实现很多动态效果,其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术来实现一个响应鼠标事件、能够显示和隐藏特定元素(本...
在网页设计中,"鼠标悬停某个标记时的DIV层显示"是一种常见的交互效果,它增强了用户与网页的互动性。这种效果通常是通过JavaScript库,如jQuery,配合Ajax技术来实现的。接下来,我们将深入探讨如何利用jQuery和...
在JavaScript(JS)编程中,实现“鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容”的功能是一项常见的交互设计。这个功能可以提升用户体验,让用户在不离开当前页面的情况下查看图片的相关信息。下面我们将...
相对鼠标位置定义div漂浮层,相对鼠标位置定义div漂浮层
本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果:当鼠标移动到特定`div`上时,能够改变样式并弹出一个相关信息的`div`层。 首先,我们需要创建两个`div`元素:一个作为主内容区域,另一个作为弹出层。在...
在本文中,我们将深入探讨如何使用jQuery和CSS3来实现一款炫酷的鼠标滑过图片显示遮罩层的特效。这种特效广泛应用于网页设计中,为用户提供了丰富的交互体验,尤其是在图片展示、相册功能或者产品展示方面。 首先,...
在网页设计中,Div(Division)层是一种基本的布局元素,用于组织和定位网页内容。"漂亮div层 精美div层"这个标题和描述暗示我们关注的是如何利用Div来创建美观、高效的网页布局。下面我们将深入探讨Div层的重要性和...
在JavaScript编程中,创建一个移动层(通常是指在网页上浮动的元素)并使其跟随鼠标移动是一项常见的交互设计任务。这种效果可以用于制作提示框、广告条或任何需要随用户鼠标移动而移动的元素,提升用户体验。在这个...
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中,我们将探讨如何利用JavaScript来创建一个可拖动的弹出层,并控制其显示与隐藏。 首先,让我们理解`div`层的隐藏与显示。在HTML中,我们创建一个`div`元素并为其...