Jquery插件实现图片显示【客户端】
2013-05-08 15:52
429 查看
前台
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> #mydiv ul{ list-style-type:none;} #mydiv ul li{ display:inline;} #mydiv{ width:500px; border:solid 1px #444; background-color:#333;} </style> <script src="jquery/Jquery1.7.js" type="text/javascript"></script> <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" /> <script src="jquery/NFLightBox.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#mydiv ul a').lightBox({ containerResizeSpeed: 1000}); }) </script> </head> <body> <form id="form1" runat="server"> <div id="mydiv" runat="server"> </div> </form> </body> </html>
后台
public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string sqlcon = @"Data Source=Lan-PC;Initial Catalog=News;Persist Security Info=True;User ID=sa;Password=478950"; SqlConnection conn = new SqlConnection(sqlcon); SqlCommand cmd = conn.CreateCommand(); conn.Open(); cmd.CommandText = "select BigImgUrl,SmallImgUrl from T_Photo"; SqlDataAdapter ap = new SqlDataAdapter(cmd); DataTable dt = new DataTable(); ap.Fill(dt); StringBuilder sb = new StringBuilder(); sb.Append("<ul>"); for (int i = 0; i < dt.Rows.Count; i++) { sb.Append("<a href=" + dt.Rows[i]["BigImgUrl"] + ">");//添图片路径 sb.Append("<li>"); sb.Append("<img src=" + dt.Rows[i]["SmallImgUrl"] + ">");//添图片路径 sb.Append("</li>"); sb.Append("</a>"); } sb.Append("</ul>"); mydiv.InnerHtml = sb.ToString(); } } }
相关文章推荐
- loner_li JQuery插件 实现相册光箱特效(后台数据库调图片和前台直接显示)
- 五滴水:使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
- 利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- 在web客户端实现显示图片原图预览功能 ,采用的是jquery的lightbox_balupton_zh技术
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- 分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- jQuery动态改变图片显示大小(修改版)的实现思路及代码
- JQuery实现开关灯效果以及图片的显示背景变暗
- 完美兼容各大浏览器的jQuery插件实现图片切换特效
- jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
- jquery插件实现图片延迟加载 -- jquery.lazyload
- jquery插件scroll-loading实现的图片延迟加载
- JQuery实现鼠标移动图片显示描述层的方法
- jquery.uploadify插件实现图片上传和预览效果
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)