www.6766.com基于jQuery插件实现点击小图显示大图效果_jquery_脚本之家

   #mydiv ul{ list-style-type:none;} #mydiv ul li{ display:inline;} #mydiv{ width:500px; border:solid 1px #444; background-color:#333;}      $ { //var settings = { containerResizeSpeed: 3000 }; $.lightBox({ containerResizeSpeed: 1000 }); }) 

2、后台代码

本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data.SqlClient;using System.Data;using System.Text;namespace 练习{ public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if  { LoadData(); } } private void LoadData() { string constr = "data source=LOVE-PC\SQLEXPRESSPC;initial catalog=BoKe;user id=sa;password=admin"; using (SqlConnection conn = new SqlConnection { using (SqlCommand cmd =conn.CreateCommand; cmd.CommandText = "select BigImgUrl,SmallImgUrl from T_Photo"; SqlDataAdapter adapter = new SqlDataAdapter; DataTable dt = new DataTable; StringBuilder sb = new StringBuilder; for (int i = 0; i < dt.Rows.Count; i++) { sb.Append("");//添图片路径 sb.Append; sb.Append("");//添图片路径 sb.Append; sb.Append; } sb.Append; mydiv.InnerHtml = sb.ToString(); } } } }}

以上就是本文的全部内容,希望对大家的学习有所帮助。

点击任意一张图片会显示大图

显示以下效果

1、前台界面

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图