`
独善其身008
  • 浏览: 171778 次
  • 性别: Icon_minigender_2
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

鼠标划过显示Div层,Div层里面的信息从数据库中取出

阅读更多
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

    在本案例中,"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时,会显示出一个div层,该div层中包含有与input相关的附加信息或者功能。 首先,我们需要了解几个关键的概念: 1. **事件监听器**:...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    在网页设计中,有时我们需要实现一个功能:当用户将鼠标悬停在某个div元素上时,显示特定的信息或另一个div。这个功能可以增强用户体验,帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能,并确保...

    DivCss鼠标划过滑动门效果

    "DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果,它通过改变鼠标悬停在元素上时的背景图像位置,创造出一种类似门开启或关闭的动画效果。 具体来说,滑动门效果主要基于以下CSS属性: 1. **...

    JS+CSS实现感应鼠标渐变显示DIV层的方法.docx

    在网页开发中,有时我们需要创建动态的交互效果来提升用户体验,比如当鼠标移过某个元素时,相关的提示信息会以渐变的方式显示出来。本文主要介绍了一种使用JavaScript(JS)和层叠样式表(CSS)相结合的方法,来...

    鼠标放上去显示div

    当我们想要在用户将鼠标悬停在某个元素上时显示额外的信息,我们可以利用CSS来隐藏这个div,然后通过JavaScript事件监听器在鼠标悬停事件触发时显示它。 首先,我们需要创建一个div,并将其样式设置为默认隐藏。在...

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    仿CSDN鼠标移上去的显示DIV浮动层

    在网页设计中,"仿CSDN鼠标移上去的显示DIV浮动层"是一种常见的交互设计技术,主要用于增强用户体验,提供更多的信息提示。这种效果常见于文章列表、菜单栏或者按钮等元素,当用户将鼠标悬停在某个元素上时,会有一...

    鼠标悬停在按钮上弹出DIV层页面,鼠标离开后层消失jquery实例

    // 鼠标进入时显示DIV层 }, function() { $("#popupLayer").hide(); // 鼠标离开时隐藏DIV层 } ); $("#popupLayer").mouseleave(function() { $(this).hide(); // 当鼠标离开弹出层时,也隐藏DIV层 }); }...

    纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存

    在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...

    简单的鼠标划过小图片显示大图片特效

    在网页设计中,为了提升用户体验,常常会使用一种叫做“鼠标划过小图片显示大图片”的特效。这种特效使得用户在鼠标悬停在小图片上时,能够预览到相应的大图片,无需点击就能了解图片的详细内容。下面将详细解释如何...

    鼠标经过显示隐藏div

    在Web开发中,通过JavaScript(简称JS)和CSS结合可以实现很多动态效果,其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术来实现一个响应鼠标事件、能够显示和隐藏特定元素(本...

    鼠标悬停某个标记时的DIV层显示

    在网页设计中,"鼠标悬停某个标记时的DIV层显示"是一种常见的交互效果,它增强了用户与网页的互动性。这种效果通常是通过JavaScript库,如jQuery,配合Ajax技术来实现的。接下来,我们将深入探讨如何利用jQuery和...

    js鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容

    在JavaScript(JS)编程中,实现“鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容”的功能是一项常见的交互设计。这个功能可以提升用户体验,让用户在不离开当前页面的情况下查看图片的相关信息。下面我们将...

    相对鼠标位置定义div漂浮层

    相对鼠标位置定义div漂浮层,相对鼠标位置定义div漂浮层

    div css移动鼠标改变样式弹出div层

    本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果:当鼠标移动到特定`div`上时,能够改变样式并弹出一个相关信息的`div`层。 首先,我们需要创建两个`div`元素:一个作为主内容区域,另一个作为弹出层。在...

    jQuery炫酷鼠标滑过图片显示遮罩层特效.zip

    在本文中,我们将深入探讨如何使用jQuery和CSS3来实现一款炫酷的鼠标滑过图片显示遮罩层的特效。这种特效广泛应用于网页设计中,为用户提供了丰富的交互体验,尤其是在图片展示、相册功能或者产品展示方面。 首先,...

    漂亮div层 精美div层

    在网页设计中,Div(Division)层是一种基本的布局元素,用于组织和定位网页内容。"漂亮div层 精美div层"这个标题和描述暗示我们关注的是如何利用Div来创建美观、高效的网页布局。下面我们将深入探讨Div层的重要性和...

    js移动层和跟随鼠标的div

    在JavaScript编程中,创建一个移动层(通常是指在网页上浮动的元素)并使其跟随鼠标移动是一项常见的交互设计任务。这种效果可以用于制作提示框、广告条或任何需要随用户鼠标移动而移动的元素,提升用户体验。在这个...

    JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口

    JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...

    JS做的隐藏与显示DIV可拖动弹出层

    在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中,我们将探讨如何利用JavaScript来创建一个可拖动的弹出层,并控制其显示与隐藏。 首先,让我们理解`div`层的隐藏与显示。在HTML中,我们创建一个`div`元素并为其...

Global site tag (gtag.js) - Google Analytics