web前端（手机） - 求推荐
求推荐手机web前端，类似酒仙网的
http://m.jiuxian.com/?ref=weixin-gzh&utm_medium=Promotion&utm_source=weixin-gzh&utm_campaign=btnHome
另：想让用户无法查看网页本身的代码，要怎么样才能做到？酒仙网的，就看不到多少网页的源代码
<html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript" async="" charset="utf-8" src="http://shu.jiuxian.com/pushData.htm?Callback=_JX_VisitTrack.viewcb&url=http%3A%2F%2Fm.jiuxian.com%2F%3Fref%3Dweixin-gzh%26utm_medium%3DPromotion%26utm_source%3Dweixin-gzh%26utm_campaign%3DbtnHome&pt=home&sid=16026efe-639e-143b-bb3c-1e1c62db0f59&tid=477c1423-2ad1-199a-b2dd-7fc58d80d64b&uid=undefined&ns=true&nu=true&ref=&bif=Chrome: 31.0.1650.59&ce=1&se=&seq=&cookies={"sequeryCookie":"","queryCookie":"","sourceCookie":"","abCookie":""}&ua=Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Safari/537.36&AB=&clientId=10001&async=false&t=1478226611595"></script>
<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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<title> 酒仙网-白酒、红酒、洋酒、保健酒、黄酒、酒具官方旗舰店 </title>
<link href="http://m.jiuxian.com/mjava_statics/css/base.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="" src="http://misc.jiuxian.com/js/visittrack.min.js"></script><script src="http://m.jiuxian.com/mjava_statics/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://m.jiuxian.com/mjava_statics/js/commons/mjava.js?20151207" type="text/javascript"></script>
<script type="text/javascript" async="" charset="utf-8" src="http://static1.bfdcdn.com/service/jiuxianwang/jiuxian_m.js"></script></head>
<body>
<script type="text/javascript" src="http://m.jiuxian.com/mjava_statics/js/m_code.js"></script>
<script type="text/javascript" src="http://m.jiuxian.com/mjava_statics/js/commons/jztj.js"></script>
<script type="text/javascript">
window["_BFD"] = window["_BFD"] || {};
_BFD.client_id = "Cjiuxian";
_BFD.script = document.createElement("script");
_BFD.script.type = "text/javascript";
_BFD.script.async = true;
_BFD.script.charset = "utf-8";
_BFD.script.src = (('https:' == document.location.protocol?'https://ssl-static1':'http://static1')+'.bfdcdn.com/service/jiuxianwang/jiuxian_m.js');
document.getElementsByTagName("head")[0].appendChild(_BFD.script);
</script><link href="http://m.jiuxian.com/mjava_statics/css/index.css?v2.8" rel="stylesheet" type="text/css">
<script type="text/javascript">
//九章统计代码
window._JX_INFO = window._JX_INFO || [];
_JX_INFO.push(["home"]);
</script>
<div class="mainBody clearfix">
<div class="header fl" id="header" style="width: 620px;">
<div class="logo"><img src="/mjava_statics/images/home/logo.png"></div>
<div class="citys" style="display:none;"><span>北京</span><i class="pubIcon"></i></div>
<div class="search"><i class="pubIcon" onclick="searchKey();"></i><input id="search_goods" name="" type="text" class="searchForm" style="width: 485px;"></div>
<input name="" type="submit" value="搜索" class="searBtn" onclick="searchKey();">
</div>
<div class="floor fl">
<div id="slideBox" class="slideBox">
<div class="bd">
<div class="tempWrap" style="overflow:hidden; position:relative;"><ul style="width: 4480px; position: relative; overflow: hidden; padding: 0px; margin: 0px; transition: 200ms; -webkit-transition: 200ms; -webkit-transform: translate(-1920px, 0px) translateZ(0px);">
<li style="display: table-cell; vertical-align: top; width: 640px;"><a class="pic" href="http://m.jiuxian.com/mobile/2016/ZXHC/index.html?from=indexBoard_05"><img class="picpath" src="http://img10.jiuxian.com/bill/2016/1024/4a174c98aa474117b1db910c3f875b9b.jpg"></a></li><li style="display: table-cell; vertical-align: top; width: 640px;"><a class="pic" href="http://m.jiuxian.com/mobile/2016/bandaojing/index.html?from=indexBoard_01"><img class="picpath" src="http://img08.jiuxian.com/bill/2016/1103/fd2ea68df543486999be8787b50bb988.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a class="pic" href="http://m.jiuxian.com/mobile/jxw1111/index.html?from=indexBoard_02"><img class="picpath" src="http://img08.jiuxian.com/bill/2016/1024/1ff94d37b44c442c89755776a88245e1.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a class="pic" href="http://m.jiuxian.com/m_v1/dynamic/mob01/150698?from=indexBoard_03"><img class="picpath" src="http://img06.jiuxian.com/bill/2016/1101/d7ffdaa9b6274fe797066adae163ba79.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a class="pic" href="http://m.jiuxian.com/m_v1/dynamic/mob01/151086?from=indexBoard_04"><img class="picpath" src="http://img09.jiuxian.com/bill/2016/1101/adc31e2dd04b40358539bf97b2932abd.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a class="pic" href="http://m.jiuxian.com/mobile/2016/ZXHC/index.html?from=indexBoard_05"><img class="picpath" src="http://img10.jiuxian.com/bill/2016/1024/4a174c98aa474117b1db910c3f875b9b.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a class="pic" href="http://m.jiuxian.com/mobile/2016/bandaojing/index.html?from=indexBoard_01"><img class="picpath" src="http://img08.jiuxian.com/bill/2016/1103/fd2ea68df543486999be8787b50bb988.jpg"></a></li></ul></div>
</div>
<div class="hd">
<ul><li class="">1</li><li class="">2</li><li class="on">3</li><li class="">4</li><li class="">5</li></ul>
</div>
</div>
</div>
<div class="categoryList fl">
<ul class="clearfix">
<li><a href="http://m.jiuxian.com/m_v1/home/baijiu_new/660/150053"><i class="cateIcon" style="background:url(http://img06.jiuxian.com/bill/2016/1020/c916932b04de48a98f606313bbcea1bc.png) no-repeat; background-size:34px 34px;"></i><span>白酒</span></a></li>
<li><a href="http://m.jiuxian.com/m_v1/home/putaojiu_new/661/150054"><i class="cateIcon" style="background:url(http://img09.jiuxian.com/bill/2016/1020/5bab5d476d71449497c06a296f1c434a.png) no-repeat; background-size:34px 34px;"></i><span>葡萄酒</span></a></li>
<li><a href="http://m.jiuxian.com/m_v1/home/yangjiu_new/662/150055"><i class="cateIcon" style="background:url(http://img09.jiuxian.com/bill/2016/1020/6f66e67c5afa4683a3bd9615940f8dbb.png) no-repeat; background-size:34px 34px;"></i><span>洋酒</span></a></li>
<li><a href="http://m.jiuxian.com/mobile/2016/bandaojing/index.html"><i class="cateIcon" style="background:url(http://img06.jiuxian.com/bill/2016/1020/794e438bb9c348bebc156b21cdf71810.png) no-repeat; background-size:34px 34px;"></i><span>品牌日</span></a></li>
<li><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150289"><i class="cateIcon" style="background:url(http://img07.jiuxian.com/bill/2016/1020/a6dc668bbc6f48ce8abb9b1eaed9686a.png) no-repeat; background-size:34px 34px;"></i><span>整箱团购</span></a></li>
<li><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150919"><i class="cateIcon" style="background:url(http://img10.jiuxian.com/bill/2016/1020/c9cbf7963f80437f88c2ce89015ef8ba.png) no-repeat; background-size:34px 34px;"></i><span>酒仙独家</span></a></li>
<li><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150450"><i class="cateIcon" style="background:url(http://img10.jiuxian.com/bill/2016/1020/7a2df0cca0c641fc8537bfe0dfee0a20.png) no-repeat; background-size:34px 34px;"></i><span>名品清仓</span></a></li>
<li><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150291"><i class="cateIcon" style="background:url(http://img06.jiuxian.com/bill/2016/1025/58210a06f66243c280ddb1c4811e1960.png) no-repeat; background-size:34px 34px;"></i><span>新品发布汇</span></a></li>
</ul>
</div>
<div class="phoneExc fl">
<div class="title">
<h3>掌上秒拍</h3>
<div class="lastTimeTit">距结束</div>
<div class="lastTime" remaintime="16109"><i class="hours">04</i><em>:</em><i class="minutes">28</i><em>:</em><i class="seconds">29</i></div>
<a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_03"><span>更多商品等你来</span><i class="pubIcon"></i></a>
</div>
<div class="phoneExcList">
<ul class="list clearfix" id="mp" style="width: 1950px;">
<li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img10.jiuxian.com/2015/0811/da763365be744f53a6df4d05ae148b6f2.jpg" style="height: 174px;"></div><div class="name">【酒仙独家】52°泸州老窖三人炫100ml</div><div class="price"><strong class="nowPrice_21624" goodid="21624">￥9.9</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img07.jiuxian.com/2015/0318/a9b29f4132024b51bdb658589575ac302.jpg" style="height: 174px;"></div><div class="name">【超级单品日】52°泸州老窖一品坊时代经典500ml</div><div class="price"><strong class="nowPrice_9761" goodid="9761">￥13.9</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img10.jiuxian.com/2015/1210/e82fe76d21d64447b12b028d43ca12a52.jpg" style="height: 174px;"></div><div class="name">52°五粮液股份新概念500ml（双瓶装）</div><div class="price"><strong class="nowPrice_25333" goodid="25333">￥89</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img06.jiuxian.com/2016/0525/2658c1b26459418e9d228cd51c72a1092.jpg" style="height: 174px;"></div><div class="name">法国维克特干红葡萄酒750ml</div><div class="price"><strong class="nowPrice_19296" goodid="19296">￥29</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img07.jiuxian.com/2016/0530/139972bdd4ec406fa439b689b6152f3b2.jpg" style="height: 174px;"></div><div class="name">52°五粮液圣酒（五星）500ml</div><div class="price"><strong class="nowPrice_25441" goodid="25441">￥109</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img10.jiuxian.com/2015/1103/d25dc178b269408b91513cec2a110ed42.jpg" style="height: 174px;"></div><div class="name">法国瑞雅花园2014干红葡萄酒750ml</div><div class="price"><strong class="nowPrice_24533" goodid="24533">￥59</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img06.jiuxian.com/2016/0901/2ae8584d5a6d4159be2ddc4b9ef1097f2.jpg" style="height: 174px;"></div><div class="name">50°汾酒集团盛世帝王黄金版1500ml</div><div class="price"><strong class="nowPrice_29754" goodid="29754">￥99</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img10.jiuxian.com/2016/0510/961348e50fa14ca3b0c249212ca7074d2.jpg" style="height: 174px;"></div><div class="name">【老酒特卖】46°红星二锅头珍品100ml（6瓶装）（2011-2013年）</div><div class="price"><strong class="nowPrice_28694" goodid="28694">￥119</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img10.jiuxian.com/2013/1002/ef3b251dbb714559b21a3161813f92a22.jpg" style="height: 174px;"></div><div class="name">【清仓】西班牙蒙特丹魄干红葡萄酒750ml</div><div class="price"><strong class="nowPrice_9492" goodid="9492">￥39</strong></div></li><li style="width: 174px;"><a href="http://m.jiuxian.com/m_v1/promote/qg?from=ad_01"></a><div class="pic picHeight"><img src="http://img06.jiuxian.com/2016/0606/1762959bf7c84a98be314658cc7575882.jpg" style="height: 174px;"></div><div class="name">【老酒特卖】45°五粮液黄金国宾酒480ml（2010年）</div><div class="price"><strong class="nowPrice_29145" goodid="29145">￥99</strong></div></li></ul>
</div>
</div>
<div class="advert fl"><a href="http://m.jiuxian.com/mobile/2016/ZNQ/index.html"><img src="http://img09.jiuxian.com/bill/2016/1103/61018e6e00d246b3ad442d57749ea69f.jpg"></a></div>
<div class="spikeBox fl clearfix">
<span class="vert"></span>
<span class="fori"></span>
<div class="item01">
<a href="http://m.jiuxian.com/m_v1/statics/phoneExclusive.htm"><img src="http://img10.jiuxian.com/bill/2016/1104/bfe3d38e5f4a44fbaa3328647b07f446.jpg"></a>
</div>
<div class="right">
</div>
<div class="right">
<div class="item02"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150291"><img src="http://img10.jiuxian.com/bill/2016/1101/cc64513fe96f46e1addda3e7e19cd064.jpg"></a></div>
</div>
<div class="right">
<div class="item03"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150919"><img src="http://img08.jiuxian.com/bill/2016/1031/b51da693e9dd4eba93a3e9be342928c5.jpg"></a></div>
</div>
</div>
<div class="hotSale fl clearfix">
<div class="left1"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150445"><img src="http://img09.jiuxian.com/bill/2016/1019/0bfcc36c9397422793f798c6f1f6b2a3.jpg"></a></div>
<div class="left2"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150446"><img src="http://img08.jiuxian.com/bill/2016/1019/8e42f014076b49da8eb010c70df73276.jpg"></a></div>
<div class="left3"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150674"><img src="http://img09.jiuxian.com/bill/2016/0930/6bea94ef5ed142668230ac353cf018a5.jpg"></a></div>
</div>
<div class="advert fl"><a href="http://m.jiuxian.com/mobile/jxw1111/index.html"><img src="http://img06.jiuxian.com/bill/2016/1028/505b7674b9024782a9d942461ca2162a.jpg"></a></div>
<div class="advert fl"><a href="http://m.jiuxian.com/mobile/2016/ZXHC/index.html"><img src="http://img08.jiuxian.com/bill/2016/1028/1da020add7fa45d88b3a8c91974fb776.jpg"></a></div>
<div class="advert fl"><a href="http://m.jiuxian.com/mobile//2016/LiHe1111/index.html"><img src="http://img09.jiuxian.com/bill/2016/1028/41d076d1a0cd422b919ca028331dfb69.jpg"></a></div>
<div class="advert fl"><a href="http://m.jiuxian.com/mobile/2016/199-111HC/index.html"><img src="http://img10.jiuxian.com/bill/2016/1024/215fd939fd734bc7bdda70cffd9c9f2c.jpg"></a></div>
<div class="advert fl"><a href="http://m.jiuxian.com/mobile/2016/XYHC/index.html"><img src="http://img08.jiuxian.com/bill/2016/1103/d9078bde6c154a2688d79a3260983bb1.jpg"></a></div>
<div class="advert fl"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/151066"><img src="http://img08.jiuxian.com/bill/2016/1024/7e37dc8a27d54dc6b6f7a7cf3ab6c340.jpg"></a></div>
<div class="advert fl"><a href="http://m.jiuxian.com/mobile/2016/bandaojing/index.html"><img src="http://img09.jiuxian.com/bill/2016/1103/b184fd8cb7da4a8093ea527fe2b232e2.jpg"></a></div>
<div class="phoneExc fl">
<div class="title">
<h3>主题街</h3>
</div>
<div class="themeList fl clearfix">
<span class="lineOne"></span>
<span class="lineTwo"></span>
<span class="lineThree"></span>
<span class="lineFour"></span>
<div class="item itemOne clearfix">
<a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150393" class="left"><img src="http://img07.jiuxian.com/bill/2016/1026/59c7c6c0238f4a879de2eb3db5797a13.jpg"></a>
<a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150578" class="right"><img src="http://img06.jiuxian.com/bill/2016/1026/730dbe0345444125bff28abd021d182d.jpg"></a>
</div>
<div class="item"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150779"><img src="http://img09.jiuxian.com/bill/2016/1026/13e798e1b30346898d339cf516d25c89.jpg"></a></div>
<div class="item"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150377"><img src="http://img09.jiuxian.com/bill/2016/1026/11e46a97e5df4691b4b0ac3c74c4a758.jpg"></a></div>
<div class="item"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150587"><img src="http://img10.jiuxian.com/bill/2016/1026/b48dcc9746b74bfd8c6a4781bb3ea3ea.jpg"></a></div>
<div class="item"><a href="http://m.jiuxian.com/mobile/2016/XYHC/index.html"><img src="http://img06.jiuxian.com/bill/2016/1103/3c4a03e7f1a8418095e8585eae3d5bca.jpg"></a></div>
<div class="item"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150378"><img src="http://img07.jiuxian.com/bill/2016/1026/2b2c7e9ff90b4bc08cb34c7927ea02e0.jpg"></a></div>
<div class="item"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150979"><img src="http://img07.jiuxian.com/bill/2016/1026/29a6429655a545b9ae7b8e1b587554b1.jpg"></a></div>
</div>
</div>
<div class="phoneExc fl">
<div class="title">
<h3>精选频道</h3>
</div>
<div class="choice fl clearfix">
<span class="lineOne"></span>
<span class="lineTwo"></span>
<span class="lineThree"></span>
<div class="item01">
<a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150289"><img src="http://img08.jiuxian.com/bill/2016/1026/d5eed2ca04cc40199a3c07f39bcf361f.jpg"></a>
</div>
<div class="right">
</div>
<div class="right">
<div class="item02"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150389"><img src="http://img09.jiuxian.com/bill/2016/1026/bf75a07fee5a4e2895daf22b8dc5115e.jpg"></a></div>
</div>
<div class="right">
</div>
<div class="right">
<div class="item03 clearfix">
<div class="item03Left fl"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150392"><img src="http://img06.jiuxian.com/bill/2016/1026/b58e60464af04f4aadac79dce811c6e1.jpg"></a></div>
<div class="item03Left fl"><a href="http://m.jiuxian.com/m_v1/dynamic/mob01/150381"><img src="http://img09.jiuxian.com/bill/2016/1027/899803202f7a4bd4a0b1a261c9fcdb73.jpg"></a></div>
</div>
</div>
</div>
</div>
<div class="recoTitle fl"></div>
<div class="recoBox fl clearfix">
<ul id="zxList" class="recoList fl clearfix">
<li> <a href="http://m.jiuxian.com/m_v1/goods/view/30212"></a><div class="pic picHeight"><img src="http://img10.jiuxian.com/2016/0817/f69b70c42b3d496c99a1b3b3a73d6f532.jpg" style="height: 267px;"></div><div class="name">【酒仙独家】42°优级杏花村1000ml</div><div class="price"><strong class="nowPrice_30212" goodid="30212">￥138</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/16536"></a><div class="pic picHeight"><img src="http://img09.jiuxian.com/2015/0810/779225b476fc4337a554289d16deff942.jpg" style="height: 267px;"></div><div class="name">【酒仙独家】52°泸州老窖三人炫1000ml（双瓶装）</div><div class="price"><strong class="nowPrice_16536" goodid="16536">￥199</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/31466"></a><div class="pic picHeight"><img src="http://img08.jiuxian.com/2016/1028/8959f513c77f4a81b454ef60633f00b72.jpg" style="height: 267px;"></div><div class="name">54°鸭溪窖酒500ml（双瓶装）</div><div class="price"><strong class="nowPrice_31466" goodid="31466">￥168</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/30871"></a><div class="pic picHeight"><img src="http://img08.jiuxian.com/2016/1011/5d1ba7f86015457fbd3dfa247b8573302.jpg" style="height: 267px;"></div><div class="name">52°泸州老窖龙香醇·福装500ml（6瓶装）</div><div class="price"><strong class="nowPrice_30871" goodid="30871">￥99</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/24700"></a><div class="pic picHeight"><img src="http://img10.jiuxian.com/2015/1102/aa74061d3b12465b8f1ad50587e935f72.jpg" style="height: 267px;"></div><div class="name">【超级单品日】52°汾酒集团1989典藏原浆475ml</div><div class="price"><strong class="nowPrice_24700" goodid="24700">￥59</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/27114"></a><div class="pic picHeight"><img src="http://img09.jiuxian.com/2016/0418/828dd66f1dc246a8bf16728c0f05036b2.jpg" style="height: 267px;"></div><div class="name">德国瓦伦丁黑啤酒5L</div><div class="price"><strong class="nowPrice_27114" goodid="27114">￥69</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/740"></a><div class="pic picHeight"><img src="http://img07.jiuxian.com/2015/0709/cc0a282ecd8f47e28a237bc1d96a71842.jpg" style="height: 267px;"></div><div class="name">68°五粮液500ml</div><div class="price"><strong class="nowPrice_740" goodid="740">￥618</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/30809"></a><div class="pic picHeight"><img src="http://img07.jiuxian.com/2016/0920/af9252c6529a48ba8b51bc0bb34ee0da2.jpg" style="height: 267px;"></div><div class="name">53°金沙陶坛原浆酒2500ml</div><div class="price"><strong class="nowPrice_30809" goodid="30809">￥159</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/10473"></a><div class="pic picHeight"><img src="http://img10.jiuxian.com/2015/0318/eaa96cc0a3ad4b7581e465101e1fdce12.jpg" style="height: 267px;"></div><div class="name">【超级单品日】52°泸州老窖一品坊时代经典500ml（4瓶装）</div><div class="price"><strong class="nowPrice_10473" goodid="10473">￥79</strong></div></li><li> <a href="http://m.jiuxian.com/m_v1/goods/view/11344"></a><div class="pic picHeight"><img src="http://img08.jiuxian.com/2016/0804/0fd5727df2b0424cb2d8d270bb6d23882.jpg" style="height: 267px;"></div><div class="name">【超级单品日】53°习酒红习酱500ml</div><div class="price"><strong class="nowPrice_11344" goodid="11344">￥69</strong></div></li></ul>
</div>
<div class="refresh fl">
<i class="refresh-w refresh-360">
<span class="refresh-n"></span>
</i>
<p>玩命加载中...</p>
</div>
<div class="noMore fl">亲，看完了</div>
<div class="copyright fl" style="height:80px; width:100%; text-align:center; line-height:20px; color:#999; font-size:12px; display:none; padding:10px 0 5px;"><p>酒仙网电子商务股份有限公司版权所有</p><p>北京市经济开发区经海五路科创11街数字工场</p><p><span>400-617-9999</span></p><p><a href="http://m.jiuxian.com/mobile/2016/about/index.html" style="color:#0088ff;">关于我们</a></p></div>
</div>
<!--吸底导航-->
<div class="navFix">
<ul>
<li>
<a href="http://m.jiuxian.com">
<i style="background: url(http://img08.jiuxian.com/bill/2016/0224/cccd8df26a754c139de800406af82178.png) no-repeat; background-size:48px 40px;"></i>
</a>
</li>
<li>
<a href="http://m.jiuxian.com/m_v1/search">
<i style="background: url(http://img08.jiuxian.com/bill/2016/0224/36a49b28ec5e4cdf9dbe37988199487d.png) no-repeat; background-size:48px 40px;"></i>
</a>
</li>
<li>
<a href="http://m.jiuxian.com/mobile/jxw1111/index.html">
<i style="background: url(http://img06.jiuxian.com/bill/2016/1027/1bba393fe95046b69af443696b50c6b1.png) no-repeat; background-size:48px 40px;"></i>
</a>
</li>
<li>
<a href="http://m.jiuxian.com/m_v1/cart/info">
<i style="background: url(http://img07.jiuxian.com/bill/2016/0224/42baf46987b6460bb43b3396e9941653.png) no-repeat; background-size:48px 40px;"></i>
</a>
</li>
<li>
<a href="https://login.jiuxian.com/m_v1/user">
<i style="background: url(http://img10.jiuxian.com/bill/2016/0224/cba9029a8f4444a989a2ab5aa84c6538.png) no-repeat; background-size:48px 40px;"></i>
</a>
</li>
</ul>
</div>
<!--吸底导航 结束-->
<!--返回顶部-->
<div class="goTop" onclick="myScroll()">
<i class="pubIcon"></i>
</div>
<!--返回顶部 结束-->
<script type="text/javascript" src="http://m.jiuxian.com/mjava_statics/js/public2015.js?v4.0"></script>
<script type="text/javascript" src="http://m.jiuxian.com/mjava_statics/js/splitscreenload.js"></script>
<script type="text/javascript" src="http://m.jiuxian.com/mjava_statics/js/home/home.js?v4.2"></script>
<script type="text/javascript" src="http://m.jiuxian.com/mjava_statics/js/TouchSlide.1.11.js?v3.0"></script>
<script type="text/javascript" src="http://m.jiuxian.com/mjava_statics/js/goods/goodsPrice.js?v4.0"></script>
<script type="text/javascript">
var temp = 1;
var curIndex = 0;
var total = 0;
$(function($){
TouchSlide({
slideCell:"#slideBox",
titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
mainCell:".bd ul",
effect:"leftLoop",
autoPage:true,//自动分页
autoPlay:true //自动播放
});
if(getCookie("ABTest")!=null && getCookie("ABTest")!=""){
changePic("804,805",getCookie("ABTest"));
}else{
var isPerRandom=Math.round(Math.random());
setCookie("ABTest",isPerRandom,1);
changePic("804,805",isPerRandom);
}
var topAd=getCookie("topAd");
if(topAd=="" || topAd == undefined){
$(".topAd").show();
}else{
$(".topAd").hide();
}
//顶部banner
$(".topAd i").bind('click',function(){
$(".topAd").animate({height:0},1000);
setCookie("topAd","1", 7);
});
//var titleWidh = $(window).width();
//$('.recoTitle').css("width",titleWidh);
//搜索框
var headW = $(".mainBody").width();
var searW = headW-155;
var adTopH = $(".topAd").height();
seachIpt = $('.searBtn');
gotoBack = $('.gotoBack');
$('#header').css("width",headW-20);
$('.searchForm').css("width",searW);
$(".topAd").css("height",adTopH);
//掌上秒拍
getms(1,1);
//专属推荐
getzxs(1);
//掌上秒杀倒计时
timeChange();
var countPage=1;
//滚动到底部加载
window.onscroll = function(){
var sw = getScrollTop() + getWindowHeight();
var sh = getScrollHeight();
// if(Math.ceil(sw) == sh || Math.floor(sw) == sh){
if((sh >= (Math.floor(sw)-30)) && (sh <= (Math.ceil(sw)+30))){
//加载区域
if(total==0){
return;
}
if(total > curIndex){
if((total-curIndex)<=10){
$('.refresh').hide();
}
temp++;
getzxs(temp);
}else{
$('.refresh').hide();
$(".noMore").show();
var time =2;
var i=null;
$(".copyright").show();
function getTimer(){
time--;
if(time==0){
clearInterval(i);
$(".noMore").addClass("noMoreHover");
time=2;
}
}
i=setInterval(getTimer,1000);
}
}
};
$(".picHeight").each(function(){
var picWidth = $(this).width();
$(this).find("img").css("height",picWidth);
});
});
var getzxs=function(index){
if((index-1)*10 != parseInt(curIndex)){
return;
}
$.ajax({
type : "GET",
url : "/m_v1/statics/getzx.htm",
dataType : "json",
async: false,
success : function(data) {
var lihtml="";
result = data.result;
var resultVal = result.list[0].list;
total=resultVal.length;
if(total <= 10 && total > 0){
for(var i=0;i < total;i++){
lihtml = lihtml + "<li> <a href="+window.mjava.dynUrl+"/goods/view/"+resultVal[i].goods_id+"></a>" +
"<div class='pic picHeight'><img src="+resultVal[i].goods_thumb+"></div><div class='name'>"+resultVal[i].goods_name+"</div>" +
"<div class='price'><strong class='nowPrice_"+resultVal[i].goods_id+"' goodid="+resultVal[i].goods_id+"></strong></div></li>";
}
curIndex=total;
}
else if(index*10 >total){
for(var i=(index - 1)*10;i < total;i++){
lihtml = lihtml + "<li> <a href="+window.mjava.dynUrl+"/goods/view/"+resultVal[i].goods_id+"></a>" +
"<div class='pic picHeight'><img src="+resultVal[i].goods_thumb+"></div><div class='name'>"+resultVal[i].goods_name+"</div>" +
"<div class='price'><strong class='nowPrice_"+resultVal[i].goods_id+"' goodid="+resultVal[i].goods_id+"></strong></div></li>";
}
curIndex=total;
}
else{
for(var i=(index - 1)*10 ; i < index * 10;i++){
lihtml = lihtml + "<li> <a href="+window.mjava.dynUrl+"/goods/view/"+resultVal[i].goods_id+"></a>" +
"<div class='pic picHeight'><img src="+resultVal[i].goods_thumb+"></div><div class='name'>"+resultVal[i].goods_name+"</div>" +
"<div class='price'><strong class='nowPrice_"+resultVal[i].goods_id+"' goodid="+resultVal[i].goods_id+"></strong></div></li>";
}
curIndex=index * 10;
}
$("#zxList").append(lihtml);
var goodIds = getGoodIds($("#zxList"));
getProductActPrice(goodIds.join(','),handlePrice);
//$('.refresh').hide();
$(".picHeight").each(function(){
var picWidth = $(this).width();
$(this).find("img").css("height",picWidth);
});
},
error : function() {
}
});
}
function timeChange(){
setInterval(function(){
var time = parseInt($('.lastTime').attr('remainTime'));
time--;
if(time<0||isNaN(time))
{
$(".lastTime").hide();
$(".lastTime").find("i").text("00");
}
else{
$('.lastTime').attr("remaintime",time);
var handerResult = handerTime(time);
$('.lastTime').find(".hours").text(handerResult["h"]);
$('.lastTime').find(".minutes").text(handerResult["m"]);
$('.lastTime').find(".seconds").text(handerResult["s"]);
}
},1000);
}
function handerTime(time){
var h=parseInt(time/3600);
h=h<10?'0'+h:h;
var m=parseInt((time%3600)/60);
m=m<10?'0'+m:m;
var s=parseInt(time%60);
s=s<10?'0'+s:s;
return {
'h':h,
'm':m,
's':s
}
}
var getms=function(pagenum,tabnum){
$.ajax({
type : "GET",
url : window.mjava.dynUrl+"/promote/qgajax",
data : {pagenum:pagenum,tabnum:tabnum},
dataType : "json",
async: false,
success : function(data) {
var resultVal="";
var lihtml="";
if(data.tuan!='' && data.tuan!=null){
resultVal=data.tuan.productList;
var length = data.tuan.productList.length;
if(length > 10){
length = 10;
}
for(var i=0;i<length;i++){
lihtml = lihtml +"<li><a href='"+window.mjava.dynUrl+"/promote/qg?from=ad_01'></a>"+
"<div class='pic picHeight'><img src='"+resultVal[i].goods_thumb+"'></div><div class='name'>"+resultVal[i].goods_name+
"</div><div class='price'><strong class='nowPrice_"+resultVal[i].goods_id+"' goodid="+resultVal[i].goods_id+
"></strong></div></li>";
}
}
$("#mp").append(lihtml);
var goodIds = getGoodIds($("#mp"));
getProductActPrice(goodIds.join(','),handlePrice);
}
});
//图片列表
var phoneExcList = $('.phoneExcList'),
ulW = phoneExcList.find('ul'),
listLi = phoneExcList.find('li'),
winW = phoneExcList.width(),
len = listLi.length,
liWs = Math.ceil((winW/3)-40);
listLi.css({width:liWs});
ulW.css({width:(liWs*len)+(len*21)});
}
function changePic(resourceIdTemp,isPersonalTemp){
var provinceTemp=2;
var pro=getCookie("user_province");
if(pro != '' && pro >= 2 && pro <= 35){
provinceTemp=Math.round(pro);
}else{
provinceTemp=2;
}
if($('.bd li').length>=5){
jQuery.ajax({
type:'post',
url : window.mjava.dynUrl+"/statics/changePicajax",
data:{resourceId:resourceIdTemp,province:provinceTemp,isPersonal:isPersonalTemp},
dataType:'json',
success:function(data){
console.log(data);
if(data!=null && data.success){
var advList=data.result.advList;
if(advList!='' && advList.length>0){
var sourceTemp="";
var tidTemp="";
for(var i=0;i<advList.length;i++){
var urlTemp=advList[i].url;
$('.bd li').eq(i+2).find('.pic').attr("href",urlTemp);
$('.bd li').eq(i+2).find('.picpath').attr("src",advList[i].pictureUrl);
if(urlTemp.indexOf('isPersonal=1')!=-1 && urlTemp.indexOf('source')!=-1){
var urlArray=urlTemp.split("?")[1].split("&");
//获取url中source参数的值
for(var j=0; j<urlArray.length;j++){
if(urlArray[j].indexOf('source')!=-1){
var paramArray=urlArray[j].split('=');
sourceTemp = sourceTemp + paramArray[1]+",";
}
}
//获取tid
if(getCookie("JX_TID")!=''){
tidTemp=getCookie("JX_TID");
}else{
tidTemp=generateUuid();
setCookie("JX_TID",tidTemp,1000 * 60*60*24*730);
}
}
}
if(sourceTemp.indexOf(',')!=-1){
sourceTemp=sourceTemp.substring(0,sourceTemp.lastIndexOf(','));
jQuery.ajax({
type:'post',
url:window.mjava.dynUrl+"/statics/pushAdvajax",
data:{clientId:10001,tid:tidTemp,source:sourceTemp},
dataType:'json',
success:function(data){
}
});
}
}
}
}
});
}
}
</script>
</body></html>
界面上的一切都能看到源代码
这界面也就是一些css和js的布局、切换、滚动特效，它们的“分解动作”都可以在源代码和脚本中看到。网上也都有相关的案例。
最近做了个 Android APP就是模仿酒仙网的。 也是卖酒的。