jquery图片动态加载示例 -

htj1231825

浏览: 40159 次
性别:
来自: 北京

最近访客更多访客>>

hanyeyiyu

jadechenfei

loven_11

goonhl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery图片动态加载示例

博客分类：

学习笔记

jQuery Ajax json HTML PHP

<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片动态加载示例</title>
<style type="text/css">
img{border:0;}
a{cursor:pointer;color:#014ccc;text-decoration:underline;}
a:hover{text-decoration:none;}
.clear{clear:both;height:0px;overflow:hidden;}
.img_list{margin:0 auto;}
.img_list li{list-style:none}
.img_list .items{width:300px;margin:0 auto;}
.img_list .item{float:left;margin-bottom:5px;font-size:14px;}
.img_list .item .order{display:inline-block;*display:inline;*zoom:1;width:28px;color:#f30;}
.img_list .item .i_thumb{width:300px;height:280px;}
.img_list .item .i_title{width:100%;height:20px;}
.showmore{height:35px;background:#f8f8f8;border-bottom:1px solid #cccccc;cursor:pointer;tetx-align:center;margin-bottom:25px;}
.showmore .handle{display:block;height:35px;text-align:center;color:#909090;font-size:14px;text-decoration:none;line-height:35px;}
.showmore .handle:hover{text-decoration:none;background:#e6e6e6;}
</style>
<script type="text/javascript" src="images_test/jquery-1.4.4.min.js"></script>
</head>

<body>
<center><h1>图片动态加载示例</h1></center>
<div class="img_list" id="img_list">
  <div class="items" id="items">
    <ul class="item">
      <li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="初 私房"><img src="images_test/1.jpg" alt="初 私房" /></a></li>
      <li class="i_title"><span class="order">1</span><a href="http://www.xuekaifa.com" target="_blank" title="初 私房">初 私房</a></li>
    </ul>

    <ul class="item">
      <li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="初 私房"><img src="images_test/2.jpg" alt="初 私房" /></a></li>
      <li class="i_title"><span class="order">2</span><a href="http://www.xuekaifa.com" target="_blank" title="初 私房">初 私房</a></li>
    </ul>
					
    <ul class="item">
      <li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="初 私房"><img src="images_test/3.jpg" alt="初 私房" /></a></li>
      <li class="i_title"><span class="order">3</span><a href="http://www.xuekaifa.com" target="_blank" title="初 私房">初 私房</a></li>
    </ul>
					
    <ul class="item">
      <li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="初 私房"><img src="images_test/4.jpg" alt="初 私房" /></a></li>
      <li class="i_title"><span class="order">4</span><a href="http://www.xuekaifa.com" target="_blank" title="初 私房">初 私房</a></li>
    </ul>
					
    <div class="clear"></div>
  </div>
					
  <div class="showmore" id="showmore" ><a class="handle" href="javascript:show()">显示更多结果</a></div>
	
</div>

<script type="text/javascript">
var iHeight = 0;
var iTop = 0;
var clientHeight = 0;
var iIntervalId = null;
var itemsSize = 0;
var pageNo = 1;   // 当前页数，默认设为第 1 页
var pageSize = 4; // 每页显示的数量

getPageHeight();

// 添加定时检测事件，每2秒检测一次
iIntervalId = setInterval("_onScroll();", 2000);

// 取得当前页面显示所占用的高度
function getPageHeight() {
  if(document.body.clientHeight && document.documentElement.clientHeight) {  
    clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;          
  } else {  
    clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;      
  }

  iHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}

// 调用ajax取服务端数据
function show() {
  pageNo++;

  $.ajax({
    url: 'img.php?p='+pageNo+'&r='+Math.random(),
    type: 'GET',
    dataType: 'text',
    timeout: 4000,
	beforeSend: showLoadingImg,
    error: showFailure,
    success: showResponse
  });
}

function showLoadingImg() {
  $('#showmore').html('<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />显示更多结果</a>');
}

function showFailure() {
  $('#showmore').html('<font color=red> 获取查询数据出错 </font>');
}

// 根据ajax取出来的json数据转换成html
function showResponse(responseData) {
  var returnjson = eval("("+responseData+")");
  itemsSize = returnjson.items.length;

  var nextpagehtml = '';
  var pageOffset = (pageNo-1)*pageSize + 1;
  for(i=0; i<itemsSize; i++) {
    nextpagehtml +=	'<ul class="item">';
    nextpagehtml +=	'<li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'"><img src="'+ returnjson.items[i].pic +'" alt="'+ returnjson.items[i].name +'" /></a></li>';
    nextpagehtml +=	'<li class="i_title"><span class="order">'+ (pageOffset + i) +'</span><a href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'">'+ returnjson.items[i].name +'</a></li>';			
						
    nextpagehtml +=	'</ul>';
  }
  nextpagehtml += '<div class="clear"></div>';
  $('#items').html($('#items').html() + nextpagehtml);

  // 当前页码数小于3页时继续显示更多提示框
  if(pageNo < 3) {
    $('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');
  } else {
    clearInterval(iIntervalId);
    $('#showmore').hide();
  }
}

// 判断滚动条是否到达底部
function reachBottom() {
  var scrollTop = 0;
  if(document.documentElement && document.documentElement.scrollTop) {  
    scrollTop = document.documentElement.scrollTop;  
  } else if (document.body) {  
    scrollTop = document.body.scrollTop;  
  }
  if((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) {
    return true;  
  } else {  
    return false; 
  }
}

// 检测事件，检测滚动条是否接近或到达页面的底部区域，0.99是为了更接近底部时
function _onScroll() {
  iTop = document.documentElement.scrollTop + document.body.scrollTop;
  getPageHeight();
  if(((iTop+clientHeight)>parseInt(iHeight*0.99))||reachBottom()) {
    if(pageNo >= 3) {
      clearInterval(iIntervalId);
      $('#showmore').hide();
      return;
    }
    show();
  }
};
</script>

</body>
</html>

img_load.rar (227.8 KB)
下载次数: 37

分享到：

flex 饼图缓动 | Flex各种类弹出窗口，设置焦点，日期，自 ...

2011-01-25 09:39
浏览 2207
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery图片动态加载示例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery图片动态加载示例

评论

发表评论

相关推荐

阿里巴巴JAVA开发手册

druid 数据库密码加密

基于DWR的点对点聊天实现 server---client

spring mvc 表单提交controller中文乱码

Hibernate hql left join

ajax 提交表单数据 到action

easyui

Jquery ImageMapste Map area

Flex Repeater

Flex Struts2 fileupload上传文件

Myeclipse提示Jquery

java获取土豆视频

flex鱼眼菜单

datagrid 套combobox

Web开发人员必备的20款超赞的jQuery插件

Oracle修改默认数据库，及启动关闭命令，查询连接的当前数据库

JQuery的thickbox插件，弹出窗

JQuery的jqzoom插件的两种使用方法

jQuery的appendto()移动

flex 饼图缓动

最近访客更多访客>>

ajax 提交表单数据到action