<!DOCTYPE html>
<html class="flex-layout">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="formatdetection" content="telephone=no">
<title>-首页</title>
<link rel="icon" type="image/png" href="img/v2.0/fav.png">
<link rel="stylesheet" href="http://cdn.bootcss.com/Swiper/3.0.8/css/swiper.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- loading切场动画 -->
<div class="loading-page">
<div class="logo"></div>
<div class="loading-lbs">
定位中<span class="ani_dot">...</span>
</div>
<div class="slogan"></div>
<div class="pt"></div>
</div>
<div class="main flex">
<!-- 头部区域 begin -->
<div class="header lbs">
送至：<a href="#" class="lbs-btn">华庭名居</a>
</div>
<!-- 头部区域 end -->
<!-- 搜索 -->
<form class="search">
<input type="search" class="search-input" placeholder="搜索商品">
<a class="cancel"><!-- 取消 --></a>
<a class="clear"><!-- 清空输入框 --></a>
</form>
<!-- 中间滚动区域 begin -->
<div class="body">
<!-- BANNER -->
<div class="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#"><img data-src="img/v2.0/banner1.png" class="swiper-lazy"></a>
</div>
<div class="swiper-slide">
<a href="#"><img data-src="img/banner1.jpg" class="swiper-lazy"></a>
</div>
<div class="swiper-slide">
<a href="#"><img data-src="img/v2.0/banner1c.png" class="swiper-lazy"></a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="link">
<!-- 分类 -->
<section class="link-cate">
<a href="商品列表.html" class="cate cate1 lazy" data-original="img/v2.0/ic_sy_lsxc.png">零食小吃</a>
<a href="商品列表.html" class="cate cate2 lazy" data-original="img/v2.0/ic_sy_xxsg.png">新鲜水果</a>
<a href="商品列表.html" class="cate cate3 lazy" data-original="img/v2.0/ic_sy_jsyl.png">酒水饮料</a>
<a href="商品列表.html" class="cate cate4 lazy" data-original="img/v2.0/ic_sy_sxsp.png">生鲜肉类</a>
<a href="商品列表.html" class="cate cate5 lazy" data-original="img/v2.0/ic_sy_yxsc.png">优选蔬菜</a>
<a href="商品列表.html" class="cate cate6 lazy" data-original="img/v2.0/ic_sy_lyfs.png">粮油副食</a>
<a href="商品列表.html" class="cate cate7 lazy" data-original="img/v2.0/ic_sy_jjry.png">家居日用</a>
<a href="javascript:void(0)" class="cate cate8 cate-all lazy" data-original="img/v2.0/ic_sy_qblm.png">全部类目</a>
</section>
<!-- 平台促销活动 -->
<section class="link-sale">
<a href="goodsDetail.html" class="link-sale-a"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/banner2.png" alt="促销活动"></a>
<a href="goodsDetail.html" class="link-sale-a"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/banner3.png" alt="促销活动"></a>
</section>
<!-- 距离最近的一家店铺 -->
<section class="link-shop">
<div class="shop-name shop-name-a">
<h4>海韵之友-旗舰店</h4>
</div>
<div class="shop-goods">
<div class="wrap onsale norest">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap onsale">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-fav">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<span class="txt-fav-icon">海韵优选</span>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap onsale">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-fav">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<span class="txt-fav-icon">海韵优选</span>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/good-demo.png" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="#" class="good gotoshop">
<div class="img"><strong>进入店铺</strong></div>
<p class="txt-normal"><small>查看更多商品</small></p>
<p class="txt-normal transparent">占位标签</p>
<p class="price transparent">占位标签</p>
</a>
</div>
</div>
</section>
<!-- end of距离最近的一家店铺 -->
<!-- 曾经买过 -->
<section class="link-shop link-ever">
<div class="shop-name">
<h4>曾经买过</h4>
</div>
<div class="shop-goods">
<div class="wrap onsale">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/goods-demo.jpg" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap onsale">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/goods-demo.jpg" alt=""></div>
<p class="txt-fav">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<span class="txt-fav-icon">海韵优选</span>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap onsale">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/goods-demo.jpg" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/goods-demo.jpg" alt=""></div>
<p class="txt-fav">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<span class="txt-fav-icon">海韵优选</span>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/goods-demo.jpg" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
<div class="wrap">
<a href="goodsDetail.html" class="good">
<div class="img"><img class="lazy" src="img/v2.0/pic_gg_mrr.png" data-original="img/v2.0/goods-demo.jpg" alt=""></div>
<p class="txt-normal">惊爆新鲜大橙子,新鲜采摘冷冻运输冷冻运输冷冻运输</p>
<p class="price">￥12.99</p>
</a>
</div>
</div>
</section>
<!-- end of曾经买过 -->
</div>
</div>
<!-- 中间滚动区域 end -->
<!-- 底部tab菜单 begin-->
<footer class="footer">
<ul class="menus">
<li class="menu active">
<a href="home.html"><span class="menu-icon menu-icon1"></span><div>首页</div></a>
</li>
<li class="menu">
<a href="nearbyShop.html"><span class="menu-icon menu-icon2"></span><div>附近小店</div></a>
</li>
<li class="menu gwc">
<a href="caret.html">
<span class="menu-icon menu-icon3"></span>
<div>购物车</div><span class="count">1</span>
</a>
</li>
<li class="menu">
<a href="myCenter.html"><span class="menu-icon menu-icon4"></span><div>我的</div></a>
</li>
</ul>
</footer>
<!-- 底部tab菜单 end-->
</div>
<!-- end of main -->
<!-- 全部类目弹出层 -->
<div class="modal-popup modal-popup-menu">
<h1>全部类目</h1>
<h4>便利购物</h4>
<ul>
<li><a href="商品列表.html" class="cateA cateA1" data-original="img/v2.0/ic_sy_lsxc.png">零食小吃</a></li>
<li><a href="商品列表.html" class="cateA cateA2" data-original="img/v2.0/ic_sy_xxsg.png">新鲜水果</a></li>
<li><a href="商品列表.html" class="cateA cateA3" data-original="img/v2.0/ic_sy_jsyl.png">酒水饮料</a></li>
<li><a href="商品列表.html" class="cateA cateA4" data-original="img/v2.0/ic_sy_sxsp.png">生鲜肉类</a></li>
<li><a href="商品列表.html" class="cateA cateA5" data-original="img/v2.0/ic_sy_yxsc.png">优选蔬菜</a></li>
<li><a href="商品列表.html" class="cateA cateA6" data-original="img/v2.0/ic_sy_lyfs.png">粮油副食</a></li>
<li><a href="商品列表.html" class="cateA cateA7" data-original="img/v2.0/ic_sy_jjry.png">家居日用</a></li>
<li><a href="商品列表.html" class="cateA cateA11" data-original="img/v2.0/ic_sy_nbgh.png">南北干货</a></li>
<li><a href="商品列表.html" class="cateA cateA12" data-original="img/v2.0/ic_sy_cjdq.png">厨具电器</a></li>
<li><a href="商品列表.html" class="cateA cateA13" data-original="img/v2.0/ic_sy_myyp.png">母婴用品</a></li>
</ul>
<h4>生活服务</h4>
<ul>
<li><a href="商品列表.html" class="cateA cateA8" data-original="img/v2.0/ic_sy_jzfw.png">家政服务</a></li>
<li><a href="商品列表.html" class="cateA cateA9" data-original="img/v2.0/ic_sy_hczl.png">豪车租赁</a></li>
<li><a href="商品列表.html" class="cateA cateA10" data-original="img/v2.0/ic_sy_zzfw.png">增值服务</a></li>
</ul>
<a href="#" class="modal-popup-close">关闭</a>
</div>
<!-- 切换地址弹出层 -->
<div class="modal-popup modal-popup-lbs modal-popup-tip" οnclick="this.classList.remove('modal-popup-tip')"> <!-- 蒙版提示modal-popup-tip -->
<div class="header">
<a href="#" class="header-left-btn"></a>
<h1 class="header-title">切换地址</h1>
</div>
<form class="search">
<input type="search" class="search-input search-lbs" id="searchLoc" placeholder="小区、写字楼、学校、街道">
<a class="cancel"><!-- 取消 --></a>
<a class="clear"><!-- 清空输入框 --></a>
</form><div id="allmap" style="display:none;"></div>
<!-- 搜索结果容器 -->
<div class="search-result">
<!-- 展示搜索結果 -->
<ul class='has-result'>
<!-- <li>
<span class='keyname'>皇龙新城小区</span>
<span class='dizhi'>南五路2号皇龙新城小区</span>
</li>
<li>
<span class='keyname'>皇龙新城小区</span>
<span class='dizhi'>南五路2号皇龙新城小区</span>
</li>
<li>
<span class='keyname'>皇龙新城小区</span>
<span class='dizhi'>南五路2号皇龙新城小区</span>
</li> -->
</ul>
<!-- 无搜索结果时 -->
<p class="no-result"><!-- 输入关键词开始搜索 ╭(╯3╰)╮ --></p>
</div>
<div class="localtion">
<a href="#" class="localtion-btn">
定位到当前位置
<!-- <span class="red">定位失败，请打开手机GPS定位服务</span> --><!-- 定位失败时使用这个span -->
</a>
</div>
<div class="address-wrap">
<ul class="address">
<li class="empty">
<span>无常用收货地址</span>
</li>
<li class="list active">
<div class="item">
<p><span class="name">张起灵</span><span class="tel">18612270333</span></p>
<p class="ellipsis">兴宁区南五路2号皇龙新城3栋 1004室</p>
<a href="#" class="edit-btn"></a>
</div>
</li>
<li class="list">
<div class="item">
<p><span class="name">张起灵</span><span class="tel">18612270333</span></p>
<p class="ellipsis">兴宁区南五路2号皇龙新城3栋皇龙新城3栋皇龙新城3栋 1018室</p>
<a href="#" class="edit-btn"></a>
</div>
</li>
<li class="list">
<div class="item">
<p><span class="name">张起灵</span><span class="tel">18612270333</span></p>
<p class="ellipsis">兴宁区南五路2号皇龙新城3栋皇龙新城3栋皇龙新城3栋 1018室</p>
<a href="#" class="edit-btn"></a>
</div>
</li>
<li class="list">
<div class="item">
<p><span class="name">张起灵</span><span class="tel">18612270333</span></p>
<p class="ellipsis">兴宁区南五路2号皇龙新城3栋皇龙新城3栋皇龙新城3栋 1018室</p>
<a href="#" class="edit-btn"></a>
</div>
</li>
<li class="list">
<div class="item">
<p><span class="name">张起灵</span><span class="tel">18612270333</span></p>
<p class="ellipsis">兴宁区南五路2号皇龙新城3栋皇龙新城3栋皇龙新城3栋 1018室</p>
<a href="#" class="edit-btn"></a>
</div>
</li>
<li class="list">
<div class="item">
<p><span class="name">张起灵</span><span class="tel">18612270333</span></p>
<p class="ellipsis">兴宁区南五路2号皇龙新城3栋皇龙新城3栋皇龙新城3栋 1018室</p>
<a href="#" class="edit-btn"></a>
</div>
</li>
<li class="list">
<div class="item">
<p><span class="name">张起灵</span><span class="tel">18612270333</span></p>
<p class="ellipsis">兴宁区南五路2号皇龙新城3栋皇龙新城3栋皇龙新城3栋 1018室</p>
<a href="#" class="edit-btn"></a>
</div>
</li>
</ul>
<div class="address-add">
<a href="#"><span>新增收货地址</span></a>
</div>
</div>
</div>
<!-- 热门搜索和历史搜索弹出层 -->
<div class="modal-search">
<!-- 热门搜索 -->
<div class="search-hot">
<h4>热门搜索</h4>
<ul class="hotwords">
<li>越南榴莲饼</li>
<li>新西兰苹果</li>
<li>炭烧腰果</li>
<li>家政</li>
<li>法拉利</li>
<li>进口食品</li>
<li>芒果</li>
</ul>
</div>
<!-- 搜索历史 -->
<div class="search-history">
<h4>搜索历史 <a id="clearHistory">清除历史</a></h4>
<ul class="historywords">
<li>榛果巧克力</li>
<li>进口牛油果</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
<li>新鲜大橙子</li>
</ul>
</div>
</div>
</div>
<!-- 服务未覆盖提示弹出层 -->
<div class="modal-popup modal-popup-alert">
<div class="alert">
<p>抱歉 ~ 海韵之友还未覆盖到此区域，<br>切换到其它区域试试看</p>
<a href="#" class="alert-close">我知道了</a>
</div>
</div>
<!-- 系统定位不到地址弹出层 -->
<div class="modal-window">
<div class="modal-confirm">
<div class="modal-content">
系统定位不到此地址，请完善具体地址信息
</div>
<div class="modal-footer">
<a href="#" class="modal-close">取消</a>
<a href="#" class="modal-go">去完善</a>
</div>
</div>
</div>
<audio id="sound" src="img/v2.0/radar_pop.mp3" preload></audio>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 图片轮播组件 -->
<script src="http://cdn.bootcss.com/Swiper/3.0.8/js/swiper.jquery.min.js"></script>
<!-- 消除手机端（IOS）click事件300ms延迟 -->
<script src="http://apps.bdimg.com/libs/fastclick/1.0.0/fastclick.min.js"></script>
<!-- jquery图片延迟加载 -->
<script src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script>
<script src="js/footer.js"></script>
<script>
$(function() {
FastClick.attach(document.body);
//轮播焦点图
var mySwiper = new Swiper('.swiper-container', {
loop: true,
autoplay: 5000, //自动滑动时间间隔
pagination: '.swiper-pagination',
autoplayDisableOnInteraction: false, //手指滑动后依然能自动切换
lazyLoading : true, //图片延迟加载
onInit: function(swiper){
setTimeout(function(){
var demoImg = $('.swiper-slide-active').find('img').get(0);
var radio = demoImg.naturalHeight/demoImg.naturalWidth;
$('.banner .swiper-container a').css({
'height' : $(window).innerWidth()*radio +'px'
});
},500)
}
})
//打开弹出层：全部类目
$('.cate-all').on('click', function() {
$('.cateA').each(function(index, el) {
var imgSrc = $(el).attr('data-original');
$(el).css("background-image","url("+imgSrc+")");
});
$('.modal-popup-menu').addClass('modal-popup-active');
document.getElementById('sound').play();
});
//关闭弹出层：全部类目
$('.modal-popup-close').on('click', function() {
$('.modal-popup-menu').removeClass('modal-popup-active');
document.getElementById('sound').play();
});
//打开弹出层：切换地址
$('.lbs-btn').on('click', function() {
$('.modal-popup-lbs').addClass('modal-popup-active');
// document.getElementById('sound').play();
});
//关闭弹出层：切换地址
$('.modal-popup-lbs .header-left-btn').on('click', function() {
$('.modal-popup-lbs').removeClass('modal-popup-active');
// document.getElementById('sound').play();
});
//收货地址高亮切换
$(document).on('click', '.address .list', function() {
$(this).addClass('active').siblings('.list').removeClass('active');
//打开弹出层：系统定位不到地址
var canLBS = false; //如果无法定位，打开弹出层
if(!canLBS){
openConfirm();
}
});
//定位到当前位置按钮事件
$('.localtion-btn').on('click', function() {
var self = $(this);
self.parent().addClass('loading');
self.text('正在定位中...');
//模拟定位，定位成功后关闭弹出层
setTimeout(function(){
$('.modal-popup-lbs').removeClass('modal-popup-active');
self.parent().removeClass('loading');
self.text('定位到当前位置');
},2000)
});
$('.search-lbs').focus(function(){
$('.search-result').show();
})
//切换地址搜索框
$('.search-lbs').bind('input propertychange',function(){
if(this.value !== ""){
$('.modal-search').fadeOut('fast');
}else{
$('.modal-search').slideDown('fast');
}
var noResult = "无搜索结果，换个地址再试试╮(╯_╰)╭"
$('.no-result').html(noResult);
var hasResult = "<ul class='has-result'><li><span class='keyname'>皇龙新城小区</span> <span class='dizhi'>南五路2号皇龙新城小区</span></li><li><span class='keyname'>皇龙小区</span> <span class='dizhi'>明秀东路145号</span></li><li><span class='keyname'>皇龙超市</span> <span class='dizhi'>北湖北路37号</span></li><li><span class='keyname'>皇龙超市</span> <span class='dizhi'>北湖北路37号</span></li><li><span class='keyname'>皇龙超市</span> <span class='dizhi'>北湖北路37号</span></li><li><span class='keyname'>皇龙超市</span> <span class='dizhi'>北湖北路37号</span></li><li><span class='keyname'>皇龙超市</span> <span class='dizhi'>北湖北路37号</span></li><li><span class='keyname'>皇龙超市</span> <span class='dizhi'>北湖北路37号</span></li><li><span class='keyname'>皇龙超市</span> <span class='dizhi'>北湖北路37号</span></li><li><span class='keyname'>皇龙超市</span> <span class='dizhi'>北湖北路37号</span></li></ul>"
if(this.value == "皇龙"){
$('.no-result').html("");
$('.has-result').html(hasResult);
}
});
//搜索框清空按钮显示隐藏
$('.search .search-input').bind('input propertychange', function() {
if(this.value !== ""){
$(this).siblings('.clear').show();
}else{
$(this).siblings('.clear').hide();
}
});
//搜索框呼出热门搜索和历史搜索弹出层
$('.search .search-input').on('focus', function() {
if(this.value !== ""){
$(this).siblings('.clear').show();
}else{
$(this).siblings('.clear').hide();
}
$(this).siblings('.cancel').addClass('show');
$('.modal-search').slideDown('fast');
})
//清空输入框内容
$('.search .clear').on('click', function() {
$(this).siblings('input').focus().val('');
$(this).hide();
});
//热词 | 历史词点击效果
$('.hotwords li, .historywords li').on('click', function() {
var word = $(this).text().trim();
$('.search-input').val(word).focus();
});
//取消搜索
$('.search .cancel').on('click', function() {
$(this).removeClass('show');
$(this).siblings('.clear').hide();
$(this).parents('.modal-popup').removeClass('modal-popup-active');
$('.modal-search').fadeOut('fast');
});
//打开弹出层：未覆盖此区域提示
$(document).on('click', '.has-result li', function() {
var hasService = false; //修改hasService模拟交互效果
if(hasService){
//如果已覆盖，关闭切换地址弹出层
$('.modal-popup-lbs').removeClass('modal-popup-active');
}else{
// 未覆盖此区域提示
$('.modal-popup-alert').fadeIn();
}
});
//关闭弹出层：未覆盖此区域提示
$('.alert-close').on('click', function() {
$('.modal-popup-alert').fadeOut();
});
//打开弹出层：系统定位不到地址
// $('.modal-window').fadeIn('fast', function() {
// $(this).find('.modal-confirm').addClass('show');
// });
//关闭弹出层：系统定位不到地址
$('.modal-close').on('click', function() {
$('.modal-window').fadeOut(300).find('.modal-confirm').removeClass('show');
//取消弹窗后焦点到搜索输入框
//$('.search-lbs').focus();
})
});
//打开弹出层：系统定位不到地址
function openConfirm(){
$('.modal-window').fadeIn('fast', function() {
$(this).find('.modal-confirm').addClass('show');
}).css('z-index','9999');
}
//性能优化
$(window).load(function() {
$('.loading-page').hide();
setTimeout(function(){
//图片延迟加载
$(".lazy").lazyload({
container: $(".body"), //懒加载滚动容器
placeholder : "img/v2.0/pic_gg_mrr.png", //默认占位图片
effect: "fadeIn" //渐入效果
});
}, 100)
});
</script>
<style type="text/css">
.tangram-suggestion-main{z-index:9999;}
</style>
<!-- <script defer type='text/javascript' src="http://api.map.baidu.com/api?v=2.0&ak=AZjIFbaWl9lEFG2Ebrgq01Bz"></script>
<script defer type="text/javascript">
// 百度地图API功能
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "searchLoc"
,"location" : map
});
//local.search("景点");
</script> -->
</body>
</html>
扫一扫
4937
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
