您好，欢迎来到中国板报网！　今天是：
黑板报手抄报素材第一站！
当前位置： →
　　不论是长辈、父母，还是同事、朋友，在别人生日的时候，送上满满的祝福，总能让别人对你刮目相看。今天小编收集了63张漂亮的生日祝福图片，非常漂亮哦，记得推荐给你身边的朋友。
看了的同学还看了:
你是不是还要找:
有什么感想，您也来说说吧！
精彩评论：（3条）
[手机用户]112.96.112.*发表于 23:09:23
祝总园长生日快乐
[手机用户]112.96.112.*发表于 23:08:52
祝总园长生日快乐
其他人还看页面导航：
→ 正文内容 动态加载图片数据
jquery动态加载图片数据练习代码
这里我只是随便做了下，上面是照片列表和两个按钮，单击小图片下面显示大图片，当点击按钮时可以查看下一页，上一页的图片。
这几天研究jquery，感受到了该库的强大，而且找到本不错的书 &&&& 这里我只是随便做了下，上面是照片列表和两个按钮，单击小图片下面显示大图片，当点击按钮时可以查看下一页，上一页的图片。 思路： 　　1、首先建一个照片查看页面viewer.htm，简单布局，上面是小图片和两个按钮，下面是大图片。 　　2、建一个一般处理程序viewServer.ashx，用来处理照片查看页面的请求。 　　3、然后当然要用到数据库啦，包括图片的路径，描述等信息。每张小图片路径应该对应一张大图片，单击小图片时候再加载，这里我没做小图片所以都用大图片加载了。 　　4、数据传输使用json，建立一个加载图片的函数，当页面加载或者单击left、right按钮的时候，通过ajax加载图片，将请求图片的开始编号、结束编号传递到后台页面， 　　　　后台页面收到请求信息后，在数据库中查找所需图片信息。 效果如图： 实现代码： viewer.htm
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&我的照片&/title& &style type="text/css"& #top{width:1000height:100margin:} #leftBtn{width: 18 text-align:height: 100 float: background-image: url(images/images/left.jpg);} #rightBtn{width: 18 height: 100 float:background-image: url(images/images/right.jpg);} #smallPhoto{ text-align: float:margin-left:10margin-right:5 } #bigPhoto{width:1000height:600text-align:margin:} .photo{width:100 height:100cursor:} #bottom{width:1000height:50margin:} &/style& &script src="../js/jquery-1.4.2.js" type="text/javascript"&&/script& &script type="text/javascript"& $(function(){ loadPhoto(1,9);//页面加载函数,每次显示9张图片，加载时候显示1-9 $("#count").text("1"); $("#leftBtn").click(function(){ var firstIndex=parseInt($("#smallTr :first-child image").attr("id"),10); if(firstIndex&=1){ //如果已经到第一页了
} else{ var startId=firstIndex-9; var endId=startId+8; $("#count").text(startId); loadPhoto(startId,endId); } }); $("#rightBtn").click(function(){ var sum=$("#sum").text(); var lastIndex=parseInt($("#smallTr :last-child image").attr("id"),10); if(lastIndex&=parseInt(sum,10)){ //如果已经到最后一页了
} else{ var startId=lastIndex+1; var endId=startId+8; $("#count").text(startId); loadPhoto(startId,endId); } }); }); //获取图片总数 function getCountPhoto(){ $.post("viewServer.ashx",{"action":"countPhoto"},function(data,status){ if(status!="success"){ alert("图片总数加载失败！"); } else{ $("#sum").text(data); } }); }; //加载图片的公共函数，索引从startid到endId function loadPhoto(startId,endId){ $.post("viewServer.ashx",{"startId":startId,"endId":endId,"action":"getData"},function(data,status){ //告诉后台要哪几张图片 if(status!="success"){ alert("小图片加载失败！"); } else{ getCountPhoto(); //获取图片总数 $("#smallTr").empty(); var photos=$.parseJSON(data); //使用json传递数据，json用着就是爽啊 for(var i=0;i&photos.i++){ var photo=photos[i]; var td=$("&td &&img id='"+photo.Rownum+"' class='photo' src='images/"+photo.ImageUrl+"'/&&/td&"); $("#smallTr").append(td); } $("#tmpimg").attr("src","images/"+photos[0].ImageUrl); } //为每个小图片设置mouseover和click事件 $("#smallTr img").mouseenter(function(){ $(this).attr("cursor","pointer"); }) .click(function(){ $("#count").text($(this).attr("id")); $("#tmpimg").attr("src",$(this).attr("src")); }); }); }; //如果图片加载过慢，提示加载中。。。。 $("#loading").ajaxStart(function(){ $(this).show(); }) .ajaxStop(function(){ $(this).hide(); }); &/script& &/head& &body style="text-align:"& &form id="form1" runat="server"& &div id="top" style="text-align: center"& &input id="leftBtn" type="button" /& &div id="smallPhoto"& &table& &tr id="smallTr"& &/tr& &/table& &/div& &input id="rightBtn" type="button" /& &/div& &div id="bigPhoto"& &span style="display:" id="loading"&加载中.....&/span& &br /&&&img id="tmpimg" src="" style="position: height: 600 width: 800"/& &/div& &br /& &div id="bottom"& 共&span id="sum" style="visibility:"&&strong&0&/strong&&/span&张， 当前第&span id="count" style="visibility:"&&strong&0&/strong&&/span&张 &/div& &/form& &/body& &/html&
viewserver.ashx:
代码如下: &%@ WebHandler Language="C#" Class="viewServer" %& using S using System.W using System.Data.SqlC using System.D using System.Collections.G public class viewServer : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string action = context.Request["action"].ToString(); if (action == "countPhoto") //统计共有多少图片 { string sql = "select count(*) from T_SmallPhotos"; DataTable dt = sqlHelper.GetTable(sql); int count = Convert.ToInt32(dt.Rows[0][0]); context.Response.Write(count.ToString()); } else if (action == "getData") //请求图片数据 { string startId = context.Request["startId"].ToString(); string endId = context.Request["endId"].ToString(); //string sqlStr = string sqlStr = "SELECT * FROM (SELECT id, [imageName], [imageUrl], [imageAlt], [notes], Row_Number() OVER (ORDER BY id) rownum FROM T_SmallPhotos) t WHERE t .rownum &= 1 AND t .rownum &=5" //这个查询语句有点小复杂，使用了开窗函数 string sqlStr = "SELECT * FROM (SELECT id, [imageName], [imageUrl], [imageAlt], [notes], Row_Number() OVER (ORDER BY id) rownum FROM T_SmallPhotos) t WHERE t .rownum &= @startId AND t .rownum &= @endId"; //string sqlStr = "SELECT [id], [imageName], [imageUrl], [imageAlt], [notes] FROM [T_SmallPhotos] where id&1 and id&10"; SqlParameter[] param = new SqlParameter[] {new SqlParameter("@startId",startId), new SqlParameter("@endId",endId)}; DataTable dt = sqlHelper.GetTable(sqlStr, param); List&Photo& list = new List&Photo&(); for (int i = 0; i & dt.Rows.C i++) { list.Add(new Photo(Convert.ToInt32(dt.Rows[i][0]), dt.Rows[i][1].ToString(), dt.Rows[i][2].ToString(), dt.Rows[i][3].ToString(), dt.Rows[i][4].ToString(), Convert.ToInt32(dt.Rows[i][5]))); } System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();//将数据序列化为json数据 context.Response.Write(jss.Serialize(list)); } } public bool IsReusable { get {
} } //封装一个照片类，然后使用json传递 public class Photo { public Photo(int i, string name, string url, string alt, string notes, int rownum) { id = imageName = imageUrl = imageAlt = this.notes = this.rownum = }
//图片编号 public int Id { get { } set { id = } } private string imageN//图片名称 public string ImageName { get { return imageN } set { imageName = } } private string imageU //图片路径 public string ImageUrl { get { return imageU } set { imageUrl = } } private string imageA //图片描述 public string ImageAlt { get { return imageA } set { imageAlt = } }
public string Notes { get { } set { notes = } }
public int Rownum { get { } set { rownum = } } } }
其中sqlHelper是我自定义的数据库访问类，比较简单就不贴出来了。 在实现过程中遇到一个ajax方面的问题，现在还是没搞太明白： 我的js代码中有两个请求函数，一个是获取图片总数getCountPhoto(),一个是加载图片的公共函数loadPhoto(startId,endId),我想在页面加载的时候同时调用这两个函数，分别显示出页码信息和具体图片列表，
代码如下: $(function(){ loadPhoto(1,9); 　　　　getCountPhoto(); }
这样的话发现页面内容总是错误，经过调试发现原来两个ajax请求是交叉执行，并不是一个执行完成执行另一个的。 这就是前几天做的了。
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910动态搞笑图片 — 搞笑哦
标签：, , ,
㒗抢沙发
㒗抢沙发
㒗抢沙发
㒗抢沙发
㒗抢沙发
标签：, , , ,
㒗抢沙发
标签：, , ,
㒗抢沙发
标签：, , ,
㒗抢沙发
㒗抢沙发
㒗抢沙发搞笑图片一周热门
搞笑动态图片
搞笑动态图片一周热门
恶搞图片一周热门
搞笑漫画一周热门
内涵图片一周热门
ps搞笑图片
ps搞笑图片一周热门
儿童搞笑图片
儿童搞笑图片一周热门
动物搞笑图片
动物搞笑图片一周热门
植物搞笑图片
植物搞笑图片一周热门
友情链接 联系QQ：319383如何修改GIF动态图片中的文字
本节介绍如何修改GIF动态图片中的文字
GIF动画是由多张图片连续播放组成的，所以要修改GIF动画的内容就得分解动画，然后把图片一张张的修改，之后再添加帧，生成动画
修改步骤：
1.分解GIF动画，并一帧帧的编号保存
2.在GIF闪图制作中打开第一张
3.修改背景色，用绘图工具画一个长方形把原来的文字盖住
4.打上自己的文字
5.添加到帧
6.选择背景层，在菜单中点击“图像”的拉列表中选择“打开图片到图层”，打开第二张图片，然后添加帧，接下来都重复这样的操作，直到添加完为止。
7.点击“生成动画”完成。
更多教程&&&&&&&&&&&&&&&&&&&&
QQ在线帮助}