基于框架插件实现点击小图显示大图效果

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

显示以下效果：

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

1、前台界面

% @ Page Language=' c# ' AutoEventWireup=' true '代码后面=' webform 1。aspx。cs“Inherits=”练习。Webform 1 ' % 1！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title style type=' text/CSS ' # mydiv ul { list-style-type 3360 none；} # mydiv ul Li { display : inline；} # mydiv { width :500 pxborder : solid 1px # 444背景色： # 333;}/style link href=' CSS/nf。灯箱。CSS ' rel='样式表type=' text/CSS '/script src=' http : jquery 1.7。js ' type=' text/JavaScript '/script script src=' http : js/nflight box。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){//var settings={ containerresizespeed333 $(' # mydiv ul a ')).lightBox({ containerresizespeed : 1000 })；})/script/head dyform id=' form 1 ' runat=' server ' div id=' mydiv ' runat=' server '/div/form/body/html 2，后台代码

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统网络。用户界面使用系统。网络控件；使用系统数据。程序使用系统。数据；使用系统。文字；命名空间练习{公共分部类网络表单1 :系统.网络。用户界面。第{页受保护的无效页面_加载(对象发送者，事件参数e) { if(！IsPostBack){ LoadData()；} } private void LoadDATa(){ string const='数据源=LOVE-PC \ \ sqlexpress PC；初始目录=BoKe用户id=sa密码=admin '；使用(SqlConnection conn=新的SQLConnection(const)){ 0使用(SqlCommand cmd=conn . CreateCommand()){ conn . Open()；cmd .' CommandText='从T_Photo中选择BigImgUrl，SmallImgUrlsqldatadapter=new sqldatadapter(cmd)；DataTable dt=new DataTable()；适配器。填充(dt)；StringBuilder sb=new StringBuilder()；某人(某人的简写)追加(' ul ')；for(int I=0；我决定。行。计数；某人。追加(' a href=' dt .行[I][' BigIMgurl ']' ')；//添图片路径某人(某人的简写)追加(“李”)；某人(某人的简写)追加(' img src='http: dt .行[I][' SmallImgUrl ']' ')；//添图片路径某人(某人的简写)追加('/Li ')；某人(某人的简写)追加('/a ')；}某人。追加('/ul ')；我的部门.InnerHtml=sb .ToString()；} } } }}以上就是本文的全部内容，希望对大家的学习有所帮助。