|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>商旅服务</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_2is4wniwevg.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/slfw_2.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/dropload.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/13/bmap.css">
|
|
|
|
|
|
|
|
<script src="js/base.js"></script>
|
|
|
|
<script src="js/jquery.min.js"></script>
|
|
|
|
<style>
|
|
|
|
.icon-zuo{
|
|
|
|
color: #959595;
|
|
|
|
font-size: 0.38rem;
|
|
|
|
}
|
|
|
|
.icon-iconfont-edu12{
|
|
|
|
color: #959595;
|
|
|
|
font-size: 0.5rem;
|
|
|
|
}
|
|
|
|
table{
|
|
|
|
margin-top: 0.1rem;
|
|
|
|
border: 1px solid #ffffff;
|
|
|
|
}
|
|
|
|
th{
|
|
|
|
width: 2rem;
|
|
|
|
height: 1rem;
|
|
|
|
font-size: 0.2rem;
|
|
|
|
background-color: #4C79B2;
|
|
|
|
list-style: none;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
td{
|
|
|
|
width: 1.6rem;
|
|
|
|
height: 1rem;
|
|
|
|
font-size: 0.2rem;
|
|
|
|
background-color: #CED5D5;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.icon-fangdajing{
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
.addr{
|
|
|
|
font-size: 0.2rem;
|
|
|
|
}
|
|
|
|
.phone{
|
|
|
|
font-size: 0.2rem;
|
|
|
|
}
|
|
|
|
/*引入百度地图*/
|
|
|
|
#allmap,.BMap_mask {
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<!--头部信息-->
|
|
|
|
<div class="head">
|
|
|
|
<!--左图标-->
|
|
|
|
<div class="iconfont icon-zuo">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!--内容详情-->
|
|
|
|
<div class="head_new">
|
|
|
|
商旅服务
|
|
|
|
</div>
|
|
|
|
<!--右菜单-->
|
|
|
|
<div class="iconfont icon-iconfont-edu12">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!--顶部菜单-->
|
|
|
|
<div class="top">
|
|
|
|
<div class="top_item top_color">
|
|
|
|
交通信息
|
|
|
|
</div>
|
|
|
|
<div class="top_item ">
|
|
|
|
酒店住宿
|
|
|
|
</div>
|
|
|
|
<div class="top_item ">
|
|
|
|
周边美食
|
|
|
|
</div>
|
|
|
|
<div class="top_item ">
|
|
|
|
天津旅游
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="box">
|
|
|
|
<!------------ 交通信息 ------------->
|
|
|
|
<div class="item_a traffic" style="display: block;">
|
|
|
|
<!--限号查询-->
|
|
|
|
<div class="traffic_limit">
|
|
|
|
【限号查询】
|
|
|
|
</div>
|
|
|
|
<!--标题-->
|
|
|
|
<div class="traffic_title">
|
|
|
|
天津市本地车辆限号
|
|
|
|
</div>
|
|
|
|
<!--表单-->
|
|
|
|
<table >
|
|
|
|
<tr>
|
|
|
|
<th>日期</th>
|
|
|
|
<th>3月5日
|
|
|
|
(周二)
|
|
|
|
</th>
|
|
|
|
<th>3月5日(周二)</th>
|
|
|
|
<th>3月5日(周二)</th>
|
|
|
|
<th>3月5日(周二)</th>
|
|
|
|
<th>3月5日(周二)</th>
|
|
|
|
<th>3月5日(周二)</th>
|
|
|
|
<th>3月5日(周二)</th>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>限尾号</td>
|
|
|
|
<td>限号2/7</td>
|
|
|
|
<td>限号2/7</td>
|
|
|
|
<td>限号2/7</td>
|
|
|
|
<td>限号2/7</td>
|
|
|
|
<td>限号2/7</td>
|
|
|
|
<td>限号2/7</td>
|
|
|
|
<td>限号2/7</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
<!--百度地图-->
|
|
|
|
<div class="traffic_limit">
|
|
|
|
【百度地图】
|
|
|
|
</div>
|
|
|
|
<!--搜索框-->
|
|
|
|
<div class="search_box">
|
|
|
|
<div class="traffic_search">
|
|
|
|
<input type="text" placeholder="梅江会展中心">
|
|
|
|
<div class="traffic_search_bottom">
|
|
|
|
<div class="iconfont icon-fangdajing"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="traffic_map">
|
|
|
|
<div id="allmap"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!--地图大小-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!------------ 酒店住宿 ------------->
|
|
|
|
<div class="item_a hotel" style="display: none;">
|
|
|
|
<div class="items_box" >
|
|
|
|
<div class="item">
|
|
|
|
<!--左边-->
|
|
|
|
<div class="item_left">
|
|
|
|
<img src="images/10.png">
|
|
|
|
</div>
|
|
|
|
<!--中部-->
|
|
|
|
<div class="item_mid">
|
|
|
|
<p class="item_mid_big">
|
|
|
|
|
|
|
|
住宿
|
|
|
|
|
|
|
|
</p>
|
|
|
|
<div class="item_mid_small">
|
|
|
|
<!--地址-->
|
|
|
|
<div class="item_mid_small_item">
|
|
|
|
<div class="iconfont icon-user-address addr"></div>
|
|
|
|
<div class="item_mid_small_item_s">
|
|
|
|
天津市西青区友谊南路团结大厦2号
|
|
|
|
天津市西青区友谊南路团结大厦2号
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--电话-->
|
|
|
|
<div class="item_mid_small_item">
|
|
|
|
<div class="iconfont icon-dianhua-copy phone"></div>
|
|
|
|
<div class="item_mid_small_item_s">
|
|
|
|
022-12345678
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--右边-->
|
|
|
|
<div class="item_right ">
|
|
|
|
|
|
|
|
<p>12月</p>
|
|
|
|
<p>25日</p>
|
|
|
|
<p>星期二</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item">
|
|
|
|
<!--左边-->
|
|
|
|
<div class="item_left">
|
|
|
|
<img src="images/10.png">
|
|
|
|
</div>
|
|
|
|
<!--中部-->
|
|
|
|
<div class="item_mid">
|
|
|
|
<p class="item_mid_big">
|
|
|
|
|
|
|
|
住宿
|
|
|
|
|
|
|
|
</p>
|
|
|
|
<div class="item_mid_small">
|
|
|
|
<!--地址-->
|
|
|
|
<div class="item_mid_small_item">
|
|
|
|
<div class="iconfont icon-user-address addr"></div>
|
|
|
|
<div class="item_mid_small_item_s">
|
|
|
|
天津市西青区友谊南路团结大厦2号
|
|
|
|
天津市西青区友谊南路团结大厦2号
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--电话-->
|
|
|
|
<div class="item_mid_small_item">
|
|
|
|
<div class="iconfont icon-dianhua-copy phone"></div>
|
|
|
|
<div class="item_mid_small_item_s">
|
|
|
|
022-12345678
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--右边-->
|
|
|
|
<div class="item_right color_gray">
|
|
|
|
|
|
|
|
<p>12月</p>
|
|
|
|
<p>25日</p>
|
|
|
|
<p>星期二</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!------------ 周边美食 ------------->
|
|
|
|
<div class="item_a cate" style="display: none;">
|
|
|
|
<div class="items_box2">
|
|
|
|
<div class="item">
|
|
|
|
<!--左边-->
|
|
|
|
<div class="item_left">
|
|
|
|
<img src="images/10.png">
|
|
|
|
</div>
|
|
|
|
<!--中部-->
|
|
|
|
<div class="item_mid">
|
|
|
|
<p class="item_mid_big">
|
|
|
|
|
|
|
|
美食美食
|
|
|
|
|
|
|
|
</p>
|
|
|
|
<p class="item_mid_small">
|
|
|
|
前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!--右边-->
|
|
|
|
<div class="item_right ">
|
|
|
|
|
|
|
|
<p>12月</p>
|
|
|
|
<p>25日</p>
|
|
|
|
<p>星期二</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item">
|
|
|
|
<!--左边-->
|
|
|
|
<div class="item_left">
|
|
|
|
<img src="images/10.png">
|
|
|
|
</div>
|
|
|
|
<!--中部-->
|
|
|
|
<div class="item_mid">
|
|
|
|
<p class="item_mid_big">
|
|
|
|
|
|
|
|
美食
|
|
|
|
|
|
|
|
</p>
|
|
|
|
<p class="item_mid_small">
|
|
|
|
前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!--右边-->
|
|
|
|
<div class="item_right color_gray">
|
|
|
|
|
|
|
|
<p>12月</p>
|
|
|
|
<p>25日</p>
|
|
|
|
<p>星期二</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!------------ 天津旅游 ------------->
|
|
|
|
<div class="item_a travel" style="display: none;">
|
|
|
|
<div class="items_box3">
|
|
|
|
<div class="item">
|
|
|
|
<!--左边-->
|
|
|
|
<div class="item_left">
|
|
|
|
<img src="images/10.png">
|
|
|
|
</div>
|
|
|
|
<!--中部-->
|
|
|
|
<div class="item_mid">
|
|
|
|
<p class="item_mid_big">
|
|
|
|
|
|
|
|
旅游
|
|
|
|
|
|
|
|
</p>
|
|
|
|
<p class="item_mid_small">
|
|
|
|
前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!--右边-->
|
|
|
|
<div class="item_right ">
|
|
|
|
|
|
|
|
<p>12月</p>
|
|
|
|
<p>25日</p>
|
|
|
|
<p>星期二</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item">
|
|
|
|
<!--左边-->
|
|
|
|
<div class="item_left">
|
|
|
|
<img src="images/10.png">
|
|
|
|
</div>
|
|
|
|
<!--中部-->
|
|
|
|
<div class="item_mid">
|
|
|
|
<p class="item_mid_big">
|
|
|
|
|
|
|
|
旅游
|
|
|
|
|
|
|
|
</p>
|
|
|
|
<p class="item_mid_small">
|
|
|
|
前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!--右边-->
|
|
|
|
<div class="item_right color_gray">
|
|
|
|
|
|
|
|
<p>12月</p>
|
|
|
|
<p>25日</p>
|
|
|
|
<p>星期二</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--底部菜单-->
|
|
|
|
<div class="bottom_menu">
|
|
|
|
<div class="bottom_menu_index">
|
|
|
|
<!--上图标-->
|
|
|
|
<div class="iconfont icon-zhuye2"></div>
|
|
|
|
<!--下文字-->
|
|
|
|
<div class="bottom_menu_index_text">
|
|
|
|
首页
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bottom_menu_index">
|
|
|
|
<!--上图标-->
|
|
|
|
<div class="iconfont icon-dianhua-copy"></div>
|
|
|
|
<!--下文字-->
|
|
|
|
<div class="bottom_menu_index_text">
|
|
|
|
电话咨询
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bottom_menu_index">
|
|
|
|
<!--上图标-->
|
|
|
|
<div class="iconfont icon-user-address"></div>
|
|
|
|
<!--下文字-->
|
|
|
|
<div class="bottom_menu_index_text">
|
|
|
|
网上展厅
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bottom_menu_index">
|
|
|
|
<!--上图标-->
|
|
|
|
<div class="iconfont icon-gerenzhongxin"></div>
|
|
|
|
<!--下文字-->
|
|
|
|
<div class="bottom_menu_index_text">
|
|
|
|
个人中心
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=trLEKMVBCc6MKGemHlUXdyy2&s=1"></script>
|
|
|
|
<script src="js/dropload.min.js"></script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
//调用百度地图
|
|
|
|
// 在指定容器创建地图实例并设置最大最小缩放级别
|
|
|
|
var map = new BMap.Map("allmap", {
|
|
|
|
minZoom: 3,
|
|
|
|
maxZoom: 25
|
|
|
|
});
|
|
|
|
|
|
|
|
// 初始化地图，设置中心点和显示级别
|
|
|
|
map.centerAndZoom(new BMap.Point(121.36564, 31.22611), 19);
|
|
|
|
|
|
|
|
// 开启鼠标滚轮缩放功能，仅对PC上有效
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
|
|
|
|
// 将控件（平移缩放控件）添加到地图上
|
|
|
|
map.addControl(new BMap.NavigationControl());
|
|
|
|
|
|
|
|
// 为地图增加点击事件，为input赋值
|
|
|
|
map.addEventListener("click", function(e) {
|
|
|
|
document.getElementById('lat').value = e.point.lat;
|
|
|
|
document.getElementById('lng').value = e.point.lng;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// 创建位置检索、周边检索和范围检索
|
|
|
|
var local = new BMap.LocalSearch(map, {
|
|
|
|
renderOptions: {
|
|
|
|
map: map
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//颜色切换
|
|
|
|
$('.top_item').click(function () {
|
|
|
|
var index = $(this).index()
|
|
|
|
$(this).addClass("top_color").siblings(".top_item").removeClass("top_color")
|
|
|
|
|
|
|
|
})
|
|
|
|
//内容切换
|
|
|
|
$(".top_item").click(function () {
|
|
|
|
$(".top_item").eq($(".box>.item_a").index()).addClass("on").siblings().removeClass("on");
|
|
|
|
$(".box>.item_a").hide().eq($(this).index()).show();
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//下拉菜单
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
|
|
|
|
|
|
|
//-------------酒店循环---------------
|
|
|
|
var page = 0;
|
|
|
|
// 每次循环展示10个
|
|
|
|
var size = 6 ;
|
|
|
|
$('.hotel').dropload({
|
|
|
|
scrollArea : window,
|
|
|
|
domUp : {
|
|
|
|
domClass : 'dropload-up',
|
|
|
|
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
|
|
|
|
domUpdate : '<div class="dropload-update">↑释放更新</div>',
|
|
|
|
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
|
|
|
|
},
|
|
|
|
domDown : {
|
|
|
|
domClass : 'dropload-down',
|
|
|
|
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
|
|
|
|
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
|
|
|
|
domNoData : '<div class="dropload-noData">暂无数据</div>'
|
|
|
|
},
|
|
|
|
loadDownFn : function(me){
|
|
|
|
page++;
|
|
|
|
// 拼接HTML
|
|
|
|
var result = '';
|
|
|
|
var s = "";
|
|
|
|
var show="";
|
|
|
|
var list_compressor="";
|
|
|
|
var list_answer="";
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
|
|
|
|
dataType: 'json',
|
|
|
|
success: function(data){
|
|
|
|
console.log(data);
|
|
|
|
var arrLen = data.length;
|
|
|
|
if(arrLen > 0){
|
|
|
|
for(var i=0; i<arrLen; i++){
|
|
|
|
result +='<div class="item">\n' +
|
|
|
|
' <!--左边-->\n' +
|
|
|
|
' <div class="item_left">\n' +
|
|
|
|
' <img src="images/10.png">\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' <!--中部-->\n' +
|
|
|
|
' <div class="item_mid">\n' +
|
|
|
|
' <p class="item_mid_big">\n' +
|
|
|
|
'\n' +
|
|
|
|
' 住宿\n' +
|
|
|
|
'\n' +
|
|
|
|
' </p>\n' +
|
|
|
|
' <div class="item_mid_small">\n' +
|
|
|
|
' <!--地址-->\n' +
|
|
|
|
' <div class="item_mid_small_item">\n' +
|
|
|
|
' <div class="iconfont icon-user-address addr"></div>\n' +
|
|
|
|
' <div class="item_mid_small_item_s">\n' +
|
|
|
|
' 天津市西青区友谊南路团结大厦2号\n' +
|
|
|
|
' 天津市西青区友谊南路团结大厦2号\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' <!--电话-->\n' +
|
|
|
|
' <div class="item_mid_small_item">\n' +
|
|
|
|
' <div class="iconfont icon-dianhua-copy phone"></div>\n' +
|
|
|
|
' <div class="item_mid_small_item_s">\n' +
|
|
|
|
' 022-12345678\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' <!--右边-->\n' +
|
|
|
|
' <div class="item_right color_gray">\n' +
|
|
|
|
'\n' +
|
|
|
|
' <p>12月</p>\n' +
|
|
|
|
' <p>25日</p>\n' +
|
|
|
|
' <p>星期二</p>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' </div>'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// 如果没有数据
|
|
|
|
}else{
|
|
|
|
// 锁定
|
|
|
|
me.lock();
|
|
|
|
// 无数据
|
|
|
|
me.noData();
|
|
|
|
}
|
|
|
|
// 为了测试，延迟1秒加载
|
|
|
|
setTimeout(function(){
|
|
|
|
// 插入数据到页面，放到最后面
|
|
|
|
$('.items_box').append(result);
|
|
|
|
// 每次数据插入，必须重置
|
|
|
|
me.resetload();
|
|
|
|
},500);
|
|
|
|
},
|
|
|
|
error: function(xhr, type){
|
|
|
|
alert('Ajax error!');
|
|
|
|
// 即使加载出错，也得重置
|
|
|
|
me.resetload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
threshold : 50
|
|
|
|
});
|
|
|
|
|
|
|
|
//--------------美食循环---------------
|
|
|
|
var page2 = 0;
|
|
|
|
// 每次循环展示10个
|
|
|
|
var size2 = 1 ;
|
|
|
|
$('.cate').dropload({
|
|
|
|
scrollArea : window,
|
|
|
|
domUp : {
|
|
|
|
domClass : 'dropload-up',
|
|
|
|
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
|
|
|
|
domUpdate : '<div class="dropload-update">↑释放更新</div>',
|
|
|
|
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
|
|
|
|
},
|
|
|
|
domDown : {
|
|
|
|
domClass : 'dropload-down',
|
|
|
|
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
|
|
|
|
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
|
|
|
|
domNoData : '<div class="dropload-noData">暂无数据</div>'
|
|
|
|
},
|
|
|
|
loadDownFn : function(me){
|
|
|
|
page2++;
|
|
|
|
// 拼接HTML
|
|
|
|
var result = '';
|
|
|
|
var s = "";
|
|
|
|
var show="";
|
|
|
|
var list_compressor="";
|
|
|
|
var list_answer="";
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: 'http://ons.me/tools/dropload/json.php?page='+page2+'&size='+size2,
|
|
|
|
dataType: 'json',
|
|
|
|
success: function(data){
|
|
|
|
console.log(data);
|
|
|
|
var arrLen = data.length;
|
|
|
|
if(arrLen > 0){
|
|
|
|
for(var i=0; i<arrLen; i++){
|
|
|
|
result +='<div class="item">\n' +
|
|
|
|
' <!--左边-->\n' +
|
|
|
|
' <div class="item_left">\n' +
|
|
|
|
' <img src="images/10.png">\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' <!--中部-->\n' +
|
|
|
|
' <div class="item_mid">\n' +
|
|
|
|
' <p class="item_mid_big">\n' +
|
|
|
|
'\n' +
|
|
|
|
' 美食\n' +
|
|
|
|
'\n' +
|
|
|
|
' </p>\n' +
|
|
|
|
' <p class="item_mid_small">\n' +
|
|
|
|
' 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' +
|
|
|
|
' </p>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' <!--右边-->\n' +
|
|
|
|
' <div class="item_right color_gray">\n' +
|
|
|
|
'\n' +
|
|
|
|
' <p>12月</p>\n' +
|
|
|
|
' <p>25日</p>\n' +
|
|
|
|
' <p>星期二</p>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' </div>'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// 如果没有数据
|
|
|
|
}else{
|
|
|
|
// 锁定
|
|
|
|
me.lock();
|
|
|
|
// 无数据
|
|
|
|
me.noData();
|
|
|
|
}
|
|
|
|
// 为了测试，延迟1秒加载
|
|
|
|
setTimeout(function(){
|
|
|
|
// 插入数据到页面，放到最后面
|
|
|
|
$('.items_box2').append(result);
|
|
|
|
// 每次数据插入，必须重置
|
|
|
|
me.resetload();
|
|
|
|
},500);
|
|
|
|
},
|
|
|
|
error: function(xhr, type){
|
|
|
|
alert('Ajax error!');
|
|
|
|
// 即使加载出错，也得重置
|
|
|
|
me.resetload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
threshold : 50
|
|
|
|
});
|
|
|
|
|
|
|
|
//--------------天津旅游---------------
|
|
|
|
var page3 = 0;
|
|
|
|
// 每次循环展示10个
|
|
|
|
var size3 = 6;
|
|
|
|
$('.travel').dropload({
|
|
|
|
scrollArea : window,
|
|
|
|
domUp : {
|
|
|
|
domClass : 'dropload-up',
|
|
|
|
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
|
|
|
|
domUpdate : '<div class="dropload-update">↑释放更新</div>',
|
|
|
|
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
|
|
|
|
},
|
|
|
|
domDown : {
|
|
|
|
domClass : 'dropload-down',
|
|
|
|
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
|
|
|
|
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
|
|
|
|
domNoData : '<div class="dropload-noData">暂无数据</div>'
|
|
|
|
},
|
|
|
|
loadDownFn : function(me){
|
|
|
|
page3++;
|
|
|
|
// 拼接HTML
|
|
|
|
var result = '';
|
|
|
|
var s = "";
|
|
|
|
var show="";
|
|
|
|
var list_compressor="";
|
|
|
|
var list_answer="";
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: 'http://ons.me/tools/dropload/json.php?page='+page3+'&size='+size3,
|
|
|
|
dataType: 'json',
|
|
|
|
success: function(data){
|
|
|
|
console.log(data);
|
|
|
|
var arrLen = data.length;
|
|
|
|
if(arrLen > 0){
|
|
|
|
for(var i=0; i<arrLen; i++){
|
|
|
|
result +='<div class="item">\n' +
|
|
|
|
' <!--左边-->\n' +
|
|
|
|
' <div class="item_left">\n' +
|
|
|
|
' <img src="images/10.png">\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' <!--中部-->\n' +
|
|
|
|
' <div class="item_mid">\n' +
|
|
|
|
' <p class="item_mid_big">\n' +
|
|
|
|
'\n' +
|
|
|
|
' 旅游\n' +
|
|
|
|
'\n' +
|
|
|
|
' </p>\n' +
|
|
|
|
' <p class="item_mid_small">\n' +
|
|
|
|
' 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' +
|
|
|
|
' </p>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' <!--右边-->\n' +
|
|
|
|
' <div class="item_right color_gray">\n' +
|
|
|
|
'\n' +
|
|
|
|
' <p>12月</p>\n' +
|
|
|
|
' <p>25日</p>\n' +
|
|
|
|
' <p>星期二</p>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' </div>'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// 如果没有数据
|
|
|
|
}else{
|
|
|
|
// 锁定
|
|
|
|
me.lock();
|
|
|
|
// 无数据
|
|
|
|
me.noData();
|
|
|
|
}
|
|
|
|
// 为了测试，延迟1秒加载
|
|
|
|
setTimeout(function(){
|
|
|
|
// 插入数据到页面，放到最后面
|
|
|
|
$('.items_box3').append(result);
|
|
|
|
// 每次数据插入，必须重置
|
|
|
|
me.resetload();
|
|
|
|
},500);
|
|
|
|
},
|
|
|
|
error: function(xhr, type){
|
|
|
|
alert('Ajax error!');
|
|
|
|
// 即使加载出错，也得重置
|
|
|
|
me.resetload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
threshold : 50
|
|
|
|
});
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |
...
|
...
|
|
