<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="index.css" type="text/css" rel="stylesheet">
<title>桃花官网移动端首页
</title>
</head>
<body>
<div class="wrap">
<!--头部-->
<div id="header">
<div class="top_bar">
<a class="register" href="/index.html"><返回
</a>
<img src="public/images/news/news_tit.png" class="news_tit">
<div class="nav">
<img src="public/images/index/nav_icon.png">
</div>
<!--导航展开-->
<div class="child_nav">
<a href="#" class="bt_no">新闻
</a>
<a href="#">特色
</a>
<a href="#">职业
</a>
<a href="#">攻略
</a>
<a href="#" class="bb_no">论坛
</a>
</div>
</div>
</div>
<!--新闻公告-->
<div class="news_info">
<ul class="list">
<li>
<a href="#">
<img src="public/images/index/z_x.png" border="0">
<div>至尊争霸赛决战圣诞夜 登陆送豪礼
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/x_w.png" border="0">
<div>新服"天涯初雪"今日12:00温馨开启
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/g_g.png" border="0">
<div>2014年12月19日Ver0.7.500-Ver0.7.501版本...
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/z_t.png" border="0">
<div>圣诞大作战 大礼享不停！
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/m_t.png" border="0">
<div>【CBI游戏天地】桃花鬼马万圣节
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/z_x.png" border="0">
<div>至尊争霸赛决战圣诞夜 登陆送豪礼
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/x_w.png" border="0">
<div>新服"天涯初雪"今日12:00温馨开启
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/g_g.png" border="0">
<div>2014年12月19日Ver0.7.500-Ver0.7.501版本...
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/z_t.png" border="0">
<div>圣诞大作战 大礼享不停！
</div>
</a>
</li>
<li>
<a href="#">
<img src="public/images/index/m_t.png" border="0">
<div>【CBI游戏天地】桃花鬼马万圣节
</div>
</a>
</li>
</ul>
<!--<a href="#" class="more">查看更多></a>-->
</div>
<a href="#" id="more">下拉加载！
</a><!--分享到-->
<div id="share_box">
<h2 class="share_tit">分享到
</h2>
<a href="#"><img src="public/images/index/w_x.jpg" border="0"></a>
<a href="#"><img src="public/images/index/t_x.jpg" border="0"></a>
<a href="#"><img src="public/images/index/x_l.jpg" border="0"></a>
<a href="#"><img src="public/images/index/k_j.jpg" border="0"></a>
<a href="#"><img src="public/images/index/p_y.jpg" border="0"></a>
</div>
<!--联系方式-->
<div id="contact">
<p><img src="public/images/index/pc.jpg" border="0" class="pc"><a href="http://www.leyoo.com/" target="_blank" class="pc_web">查看PC版本官网
</a> <img src="public/images/index/telephone.jpg" border="0" class="telephone">客服电话：0755—86671177
</p>
</div>
<!--版权信息-->
<div id="footer">
<p>出版号：ISBN 978-7-900267-12-2
文网游备字[2011]C-RPG057号
<br>粤网文［2013］0832-232号
增值电信业务经营许可证粤B2-20100197号
<br>粤ICP备10046641号
</p>
</div>
<!--返回顶部-->
<a class="return_top" href="javascript:void(0);"><img src="public/images/index/return_top.png" border="0"></a>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var timer;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
go_scroll(scrollTop,scrollHeight,windowHeight);
});
function go_scroll(scrollTop,scrollHeight,windowHeight){
//下拉事件触发
window.clearInterval(timer);
timer=setTimeout(function(){
if(scrollTop + windowHeight >= scrollHeight-60){
$("#more").html("加载中~") //$.get和$.post没有请求失败处理，如要其他请求状态处理用$.ajax
$.get("aa.xml",function(data,status){
$("#more").html("下拉加载~");
//模拟数据json
var employees ='{ "employees" : [' +
'{ "a_href":"Bill" , "img_src":"Gates" , "content":"11111" },' + '{ "a_href":"Bill" , "img_src":"Gates" , "content":"222222" },' + '{ "a_href":"Bill" , "img_src":"Gates" , "content":"33333" },' +
'{ "a_href":"George" , "img_src":"Bush" , "content":"44444" },' +
'{ "a_href":"Thomas" , "img_src":"Carter" , "content":"55555" } ]}';
var obj = eval ("(" + employees + ")");
write_ajax(obj);
}
)
}},500);
}
function write_ajax(obj){
if(jQuery.isEmptyObject( obj )){$("#more").html("没有内容了~"); return false};
var li_list = [],
a_list = [],
img_list = [],
div_list = [],
ajax_list=[];
$(obj.employees).each(function(i){//如果需要只进行一次页面重构就要拼写成字符串一次性append进去
li_list[i] = document.createElement("li"),
a_list[i] = document.createElement("a"),
img_list[i] = document.createElement("img"),
div_list[i] = document.createElement("div"),
a_list[i].setAttribute("href",obj.employees[i].a_href);
div_list[i].innerHTML=obj.employees[i].content;
img_list[i].setAttribute("src",obj.employees[i].img_src);
a_list[i].appendChild(img_list[i]);
a_list[i].appendChild(div_list[i]);
li_list[i].appendChild(a_list[i]);
$(".list").append(li_list[i]);
})
};
})
</script>
</body>
</html>
转载于:https://www.cnblogs.com/lichuntian/p/ajax.html
