jquery连接数据库实现图片的放大镜效果_数据库图片两个值一个大的一个小的怎么实现放大镜-优快云博客

本文链接：https://blog.youkuaiyun.com/gengyudan/article/details/8902248

这篇博客展示了如何使用jQuery实现从数据库中获取图片，并为这些图片添加放大镜效果。首先，通过CSS定义了页面样式，然后引入jQuery库和NFLightBox插件的样式和脚本文件。接着，利用jQuery的$(function () {...})来初始化lightBox插件，为链接添加放大镜功能。最后，在后台C#代码中，连接数据库并查询Picture表中的Img和Img1字段，将结果动态生成HTML列表，展示图片链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<title></title>
    <style type="text/css">
        #divresult ul
        {
            list-style-type: none;
        }
        #divresult ul li
        {
            display: inline;
        }
        #divresult
        {
            width: 500px;
            border: solid 1px #444;
            background-color: #333;
        }
    </style>
    <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script src="js/NFLightBox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#divresult ul a').lightBox();
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divresult" runat="server">
    </div>
    </form>
</body>

后台：

public partial class WebForm1 : System.Web.UI.Page
    {
        string id = "0";
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Data();
            }
        }
        private void Data()
        {
            string str=@"data source=数据库名;initial catalog=自己写的数据库名;user id=连接数据库的名称;password=连接数据库的密码";
            SqlConnection con = new SqlConnection(str);
            con.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            cmd.CommandText = "SELECT Img,Img1 FROM Picture";

            SqlDataAdapter adpter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adpter.Fill(dt);

            StringBuilder sb = new StringBuilder();

            sb.Append("<div>");
            sb.Append("<ul>");

            foreach (DataRow row in dt.Rows)
            {
                string img = row["Img"].ToString();
                string img1 = row["Img1"].ToString();
                sb.Append("<li>" + "<a href='" + img1 + "'><img src='" + img + "' /></a></li>");
                divresult.InnerHtml = sb.ToString();
            }

sb.Append("</ul>");
sb.Append("</div>");

}
}