码迷,mamicode.com
首页 > Web开发 > 详细

ajax的项目实操(只用于记录部分文件未引入)

时间:2015-01-26 11:36:23      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

<!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">&lt;返回</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文网游备字[2011]C-RPG057号<br>粤网文[2013]0832-232号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;增值电信业务经营许可证粤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("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>

 

ajax的项目实操(只用于记录部分文件未引入)

标签:

原文地址:http://www.cnblogs.com/lichuntian/p/ajax.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!