Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）

原理：AJAX动态加载数据库中图片信息给游览器，利用2个叠词div动态修改内部图片透明度做出淡进淡出效果。（IE6无效)

难点：json数组操作。

HTML：就是几个图片容器。加载大图的div position: absolute;

<body><!--小图--><div id="thumbs"><div id="lastthumbs"></div><div id="thumbsnav"></div><div id="nextthumbs"></div></div><!--大图--><div id="photo"><div id="lastphoto"></div><div id="photocontent"><div id="below"><img alt="lidy" src="#"/></div><div id="above"><img alt="lidy" src="#"/></div><div id="msg"><p>得瑟得瑟</p><input type="button" value="确定" onclick="msg(0)"/></div><ul><li></li><li></li></ul></div><div id="nextphoto"></div></div>
</body>

CSS:加载大图的div position: absolute;

View Code

   <style type="text/css">body {text-align: center;margin: 0px auto;}/*小图*/#lastthumbs {float: left;margin-top:20px;width:22px;height:50px;cursor: pointer;background:url(images/icon_2.png) no-repeat -179px -181px;}#thumbsnav {float: left;margin-left:10px;}#thumbsnav span {cursor: pointer;}#nextthumbs {float:right;margin-top:20px;width:22px;height:50px;cursor: pointer;background:url(images/icon_2.png) no-repeat -197px -181px;}          #thumbs {margin: 20px auto;width: 1020px;height: 80px;}#thumbs span {border: 2px solid red;margin-left:10px;display:inline-block;height: 80px;} /*大图*/#photo {clear:both;margin: 0px auto;width: 1000px;height:600px;}#photo div {height:500px;}#lastphoto {margin-top:50px;float:left;width:100px;height:350px !important;cursor:pointer;background:url(images/icon_2.png) no-repeat -295px 0px;   }#nextphoto {margin-top:50px;float:left;width:100px;height:350px !important;cursor:pointer;background:url(images/icon_2.png) no-repeat -408px 0px;      }#photocontent {float:left;width:800px;position:relative;}#photocontent ul {list-style-type: none;margin-top:460px;}#below {position: absolute;width:800px;left:0px;top:0px;}#above {position: absolute;width:800px;left:0px;top:0px;}/*提示消息*/#msg {position: absolute;display:none;top:200px;left:350px;border:2px solid #888;height:90px !important;background-color:white;}</style>

JS :看代码

View Code

        var num = 0; //当前图片var link = 0; //当前滚动条序号var btnstop = true; //按钮var datas; //json数据var count; //图片总数function photoload(index) { //图片加载if (btnstop) { //防止多次点击btnstop = false;$("#below img").attr("src", datas[num].photo_url); //当前图片到下层num = index; //更新当前索引var objImagePreloader = new Image();objImagePreloader.onload = function () { //当图片加载完成时$("#above img").css("opacity", "0"); //先隐藏上层图片$('#above img').attr('src', datas[index].photo_url); //设置下载好的图片到上层$("#photocontent ul li:eq(0)").html("地点：" + datas[index].photo_source); $("#photocontent ul li:eq(1)").html("介绍：" + datas[index].photo_info); //介绍$("#above img").animate({ //上层图片淡进opacity: 1.0}, 1500, function () {btnstop = true;  // 动画完成
                    });$("#below img").animate("opacity", "0", 1500); //下层图片淡出
                }objImagePreloader.src = datas[index].photo_url; //要加载的图片的地址
            }}function nextthumbs() { //下一组小图片加载if (link < parseInt(count / 7)) { //判定是否超出总数link++;$.post("photo.ashx", { "num": link }, //异步请求下一组图片地址function (data) {datas = datas.concat($.parseJSON(data)); //合并当前的数据和加载的数据var img = $("#thumbsnav img"); //获取小图片DOM对象for (i = link * 7; i < (link + 1) * 7; i++) { //遍历新数据，取出设置小图地址if (i < count) { //判定是否超出总数var purl = datas[i].photo_url.split("/"); //取出来的是大图地址，小图地址要加上thumbs文件夹img[i % 7].index = i;img[i % 7].src = purl[0] + "/thumbs/" + purl[1];img[i % 7].onclick = function () { //设置新的点击事件的图片索引photoload(this.index);};}else { //已到最后img[i % 7].src = "images/thumbs/1.gif";}}})}else {msg(2);}}function lastthumbs(){ //上一组图片，不需要加载了。if (link > 0) {link--;var img = $("#thumbsnav img");for (i = link * 7; i < (link + 1) * 7; i++) { //遍历新数据，取出设置小图地址var purl = datas[i].photo_url.split("/");img[i % 7].index = i; //设置索引img[i % 7].src = purl[0] + "/thumbs/" + purl[1];img[i % 7].onclick = function () { //设置新的点击事件的图片索引photoload(this.index);};}}}function nextphoto() {  //加载下一张图片$("#below img").attr("src", datas[num].photo_url); //当前图片到下面的元素num++;var objImagePreloader = new Image(); //图片加载对象objImagePreloader.onload = function () { //图片加载完成$("#above img").css("opacity", "0"); //上层图片隐藏$('#above img').attr('src', datas[num].photo_url); //设置加载好的地址$("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);$("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info); //介绍$("#above img").animate({  //慢慢显示opacity: 1.0}, 1500, function () {btnstop = true;  // 动画完成
                });$("#below img").animate("opacity", "0", 1500); //慢慢隐藏
            }objImagePreloader.src = datas[num].photo_url; //加载图片的地址
        }function lastphoto() { //加载上一张图片$("#below img").attr("src", datas[num].photo_url);num--;var objImagePreloader = new Image();objImagePreloader.onload = function () { //图片加载完成$("#above img").css("opacity", "0");$('#above img').attr('src', datas[num].photo_url);$("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);$("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info);$("#above img").animate({ opacity: 1.0}, 1500, function () {btnstop = true; // 动画完成，按钮启用
                });$("#below img").animate("opacity", "0", 1500); //淡出
            }objImagePreloader.src = datas[num].photo_url; //加载图片的地址
        }function msg(index) { //窗口消息$("#msg").css("display", "block");if (index == 0) {$("#msg").css("display", "none");}else if (index == 1) {$("#msg p").html("已到第一张图片");setTimeout(function () { $("#msg").css("display", "none"); }, 5000);}else {$("#msg p").html("已到最后一张图片");setTimeout(function () { $("#msg").css("display", "none"); }, 5000);}}$(document).ready(function () {//这里最好不要用$()取代if (count == null) { //第一次加载$.post("photo.ashx", { "count": 0 }, function (data) { //获取总的数量count = parseInt(data);});}$.post("photo.ashx", { "num": "0" }, //请求第一组图片数据function (data) {datas = $.parseJSON(data); //实例化json$("#above img").attr("src", datas[num].photo_url); //开始显示的图片地址$("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);$("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info); //开始显示的图片介绍var thumbs = $("#thumbsnav");//小图Domfor (i = 0; i < 7; i++) { //遍历第一组小图加载地址var purl = datas[i].photo_url.split("/");var span = "<span><img οnclick='photoload("+i+")' alt='lidy' src='" + purl[0] + "/thumbs/" + purl[1] + "' /></span>";thumbs.append(span); //加入Dom
                    }});$("#nextthumbs").click(function () { //下一组小图
                nextthumbs();});$("#lastthumbs").click(function () { //上一组小图
                lastthumbs();});$("#nextphoto").click(function () { //下一幅图片if (btnstop) { //防止多次点击if (num < count - 1) { //判定超出总数 btnstop = false;                      if (parseInt((num + 1) / 7) > link) { //超出当前的7张图片的话，要更新小图link++; //累加小图轮数$.post("photo.ashx", { "num": link }, //请求下一组图片数据function (data) {datas = datas.concat($.parseJSON(data)); //合并到现在的数据nextphoto(); //加载下一轮大图了var img = $("#thumbsnav img");for (i = link * 7; i < (link + 1) * 7; i++) { //遍历显示下一组的小图if (i < count) { //判定最后几张图不满7张的话var purl = datas[i].photo_url.split("/");img[i % 7].index = i;img[i % 7].src = purl[0] + "/thumbs/" + purl[1];img[i % 7].onclick = function () { //更新点击事件图片地址索引photoload(this.index);};}else { //显示其他的图片img[i % 7].src = "images/thumbs/1.gif";}}})}else {nextphoto(); //如果不用加载下一组图片
                        }}else {$("#msg").css("display", "block");}}})$("#lastphoto").click(function () { //加载上一张大图if (btnstop) {if (num > 0) { //如果不是第一张btnstop = false;if (parseInt((num - 1) / 7) < link) {  //如果是这组的第一张，要加载上一组的小图片lastthumbs(); //加载上一组小图片
                        }lastphoto();//加载上一张图片
                    }else {msg(1); //第一张图片显示提示
                    }}})})

后台处理程序photo.ashx：（请求json数据和图片总数）

View Code

 public void ProcessRequest(HttpContext context){string num = context.Request["num"];int inum;if (num != null){if (int.TryParse(num, out inum)){SqlParameter[] sqlp = new SqlParameter[]{ //获取7行数据new SqlParameter("@min",SqlDbType.Int),new SqlParameter("@max",SqlDbType.Int)};sqlp[0].Value = inum*7;sqlp[1].Value = (inum+1)*7;DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.connectionString, "proc_photolinks", sqlp);context.Response.Write(Dataset2Json(ds)); //转成Json
            }else{             context.Response.Write("h");}}else if (context.Request["count"]!=null){context.Response.Write(SqlHelper.ExecuteScalar(SqlHelper.connectionString, "proc_photocount").ToString());}else{}}public static string Dataset2Json(System.Data.DataSet ds){StringBuilder json = new StringBuilder();json.Append("[");foreach (System.Data.DataTable dt in ds.Tables){json.Append(DataTable2Json(dt));json.Append(",");}json.Remove(json.Length - 1, 1);json.Append("]");return json.ToString();}public static string DataTable2Json(System.Data.DataTable dt){StringBuilder jsonBuilder = new StringBuilder();for (int i = 0; i < dt.Rows.Count; i++){jsonBuilder.Append("{");for (int j = 0; j < dt.Columns.Count; j++){jsonBuilder.Append("\"");jsonBuilder.Append(dt.Columns[j].ColumnName);jsonBuilder.Append("\":\"");jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"").Trim()); //对于特殊字符，还应该进行特别的处理。 jsonBuilder.Append("\",");}jsonBuilder.Remove(jsonBuilder.Length - 1, 1);jsonBuilder.Append("},");}jsonBuilder.Remove(jsonBuilder.Length - 1, 1);return jsonBuilder.ToString();} public bool IsReusable{get{return false;}}

思路：加载好网页元素后异步请求一组图片数据操作显示，后每需要加载新的一组图片再异步请求数据库获取新的图片地址（和分页差不多，可以减小数据库压力），

再动态加载到页面上。主要是图片变换的逻辑JS代码和Json数据的处理。

转载于:https://www.cnblogs.com/lideyang/archive/2012/10/30/2746784.html

Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）相关推荐

php pjax数据返回,如何将Pjax整合进网站，实现全站无刷新加载？
摘要: pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入HTML网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后退 ...
jquery完成界面无刷新加载登陆注册
昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击! ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
前言需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析这里面牵扯到两 ...
python requests 动态加载_Python获取网页中动态加载的数据
Python获取网页中动态加载的数据 0.XHR 是什么? XHR是 XMLHttpRequest 对象.既Ajax功能实现所依赖的对象,在JQuery中的Ajax是对 XHR的封装. 1.查看异步加 ...
linux程序卸载动态库,Intel平台下linux中ELF文件动态链接的加载、解析及实例分析（二）: 函数解析与卸载...
在 IBM Bluemix 云平台上开发并部署您的下一个应用. 相信读者已经看过了 Intel平台下Linux中ELF文件动态链接的加载.解析及实例分析(一): 加载的内容了,了解了ELF文件被加载的 ...
Vue iView Admin 动态路由菜单加载前后端分离（springboot 2.x iview admin vue 前后端分离模型设计器动态数据权限...
宣传官网 xb.exrick.cn 在线Demo xboot.exrick.cn 开源版Github地址 github.com/Exrick/x-bo- 开发文档 www.kancloud.cn/ex ...

Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）

Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）相关推荐

最新文章

热门文章