手机端zepto+AJAX跨域的css3+html5

利用AJAX跨域,实现调取腾讯的json数据;HTML+JavaScript代码如下(引入了zepto):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta charset="UTF-8">
    <title>AJAX跨域+移动端延迟下载</title>
    <link rel="stylesheet" href="css/new.css"/>
</head>
<body>
<div class="con">
    <ul>
        <!--最终的HTML结构;
        <li>
            <div class='imgAre' trueImg=''></div>
            <div class='textAre'>
                <p></p>
                <p></p>
            </div>
        </li>
        -->
    </ul>
    <!--跨域得到数据newsList结构如下-->
    <!--
        id: "SPO2015072602021500",
        uinnick: "腾讯新闻",
        uinname: "news_news_sports",
        title: "温情!恒大球迷第29分钟喊郜林",
        surl: "http://view.inews.qq.com/a/SPO2015072602021500",
        short_url: "",
        weiboid: "",
        commentid: "1175344346",
        url: "http://view.inews.qq.com/a/SPO2015072602021500",
        time: "2015-07-26 20:44:51",
        articletype: "0",
        hasVideo: 1,
        imagecount: 0,
        showType_video: "normal",
        thumbnails_big: [ ],
        thumbnails: [ ],
        thumbnails_qqnews: [
        "http://inews.gtimg.com/newsapp_ls/0/53866758_640330/0"
        ],
        source: "腾讯体育",
        abstract: "恒大球迷用手机点亮看台,高声呼喊力挺身披29号的郜林。"
        },
    -->
</div>
<div class="copyright" id="weixinShow"> <a href="#">点此查看本页面的实现原理</a> </div>
</body>
</html>
<script src="js/zepto.min.js"></script>
<script>
    function kbs_sports(data) {
        if (data[0] === 0) {
            var newsList = data[1].idlist[0].newslist;
            var frg = document.createDocumentFragment();
            newsList.forEach(function (item, index) {
                var oLi = document.createElement("li");
                var str = "<div class='imgAre' trueImg='" + item.thumbnails_qqnews[0] + "'></div>";
                str += "<div class='textAre'>";
                str += "<p>" + item.title + "</p>";
                str += "<p>" + item.abstract + "</p>";
                str += "</div>";
                oLi.innerHTML = str;
                frg.appendChild(oLi);
            });
            $(".con ul").append(frg);
            window.setTimeout(imgLoad, 500);
        }
    }


    function imgLoad() {
        var winT = getWin("clientHeight") + getWin("scrollTop");
        $(".imgAre").each(function () {
            if (!$(this).attr("isLoad")) {
                var $t = $(this).offset().top;
                var $that = $(this);
                if ($t <= winT) {
                    var oImg = new Image;
                    oImg.src = $(this).attr("trueImg");
                    oImg.onload = function () {
                        $that.append(oImg);
                        $that.attr("isLoad", true);
                    }
                }
            }
        });
    }

    function getWin(attr) {
        return document.documentElement[attr] || document.body[attr];
    }
    $.ajax({
        url: "http://sportswebapi.qq.com/newsApp/matchDetail?appOS=ios&mid=208_794844&width=568&height=320&callback=kbs_sports&ran=" + Math.random(),
        type: "get",
        dataType: "jsonp",
        success: kbs_sports
    });
    $(document).scroll(imgLoad);
</script>

`CSS代码如下:

/* 防止手机触摸事件出现区块阴影 */
* {  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
/* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */
html {-webkit-text-size-adjust: 100%;  -webkit-touch-callout: none;  -webkit-user-select: none;}
body, div, li, ul, p, img {margin: 0;padding: 0;font: 16px/1.5 "微软雅黑", Helvetica, sans-serif;background: #f0f0f0;}
ul, li {list-style: none;}
img {border: none;}
/*下面是延迟加载的样式表*/
.con {padding: 0 10px;}
.con li {position: relative;padding: 12px 0;border-bottom: 1px solid #ccc;}
.con li:last-child {border-bottom: none;}
.con li .imgAre {position: absolute;width: 75px;height: 60px;background: url("../img/videoPmap.png") no-repeat;background-size: 75px auto;}
.con li .imgAre img {width: 75px;height: 60px;}
.con li .textAre {margin-left: 85px;}
.con li .textAre p:nth-child(1) {height: 24px;line-height: 24px;font-weight: bold;color: #151515;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.con li .textAre p:nth-child(2) {line-height: 18px;font-size: 12px;color: #878a8d;}
/*底部的*/
.copyright{width: 100%;text-align: center;padding: 10px;background: #129f7e;}
.copyright a{color: #FFF;}

““

未经允许不得转载:朱邦邦的博客 » 手机端zepto+AJAX跨域的css3+html5

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址