鼠标经过datalist 中的图片显示提示信息列表

最新推荐文章于 2022-05-10 14:15:08 发布

hyhyct

最新推荐文章于 2022-05-10 14:15:08 发布

阅读量971

点赞数

文章标签： server function object asp div jquery

本文详细介绍了如何通过jQuery实现前端元素的动态响应效果，包括图片加载时的提示弹窗显示与隐藏，以及如何通过事件监听优化用户体验。文章还提供了一个包含数据列表、图片展示和动态提示信息的实例代码，旨在提升网站的交互性和用户满意度。

前台代码

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).find(":image").each(function (index, ele) {
                $(this).mouseover(function () { $("#DataListPhase_DivTips_" + index).css("display", "block"); });
                $(this).mouseout(function () { $("#DataListPhase_DivTips_" + index).css("display", "none"); });
                ;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList runat="server" ID="DataListPhase" RepeatColumns="9" OnItemDataBound="DataListPhase_ItemDataBound">
            <ItemTemplate>
                <asp:ImageButton runat="server" ID="imageButton" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageUrl")%>'
                    OnClick="imageButton_click" />
                <div id="DivTips" runat="server" style="display: none; width: 100px; position: absolute;
                    top: 50px; z-index: 1">
                    <table>
                        <asp:Repeater runat="server" ID="RepeaterParticipates">
                            <ItemTemplate>
                                <tr>
                                    <td>
                                        UserName:<%# DataBinder.Eval(Container.DataItem, "UserName")%>
                                    </td>
                                </tr>
                            </ItemTemplate>
                        </asp:Repeater>
                    </table>
                </div>
            </ItemTemplate>
        </asp:DataList>
    </div>
    </form>
</body>
</html>

后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace JQuery1
{
    public partial class 鼠标经过弹出DIV : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

DataTable dt = new DataTable();
dt.Columns.Add("ImageUrl");

                for (int i = 0; i < 9; i++)
                {
                    DataRow dr = dt.NewRow();
                    dr["ImageUrl"] = i + ".jpg";
                    dt.Rows.Add(dr);
                }
                DataListPhase.DataSource = dt;
                DataListPhase.DataBind();
            }

}

        protected void DataListPhase_ItemDataBound(object sender, DataListItemEventArgs e)
        {
            Repeater r = (Repeater)e.Item.FindControl("RepeaterParticipates");
            DataTable dt = new DataTable();
            dt.Columns.Add("UserName");
            DataRow dr = dt.NewRow();
            dr[0] = "hai shi xiao";
            dt.Rows.Add(dr);
            DataRow dr1 = dt.NewRow();
            dr1[0] = "hai shi xiao 111111111111";
            dt.Rows.Add(dr1);
            r.DataSource = dt;
            r.DataBind();

}

        public void imageButton_click(object sender, EventArgs e)
        {
            Response.Redirect("http://www.baidu.com/");
        }
    }
}