html5 商品分类页面效果zepto
点击左边容器条目,右边列表对应的内容置顶显示,滑动右边的列表,左边容器的对应的标题高亮显示。
效果图如下：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta http-equiv="x-dns-prefetch-control" content="on"/>
<title>分类</title> <script type="text/javascript" src="http://cdn01.weipaitang.com/res/js/zepto.js?v=0.9.1.58"></script>
<script type="text/javascript">
!function () {
function a() {
var clientWidth = document.documentElement.clientWidth > 640 ? 640 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = clientWidth / 7.5 + "px"; //适应字体调整
var div = document.createElement("div");
div.style.width = "7.5rem";
document.documentElement.appendChild(div);
document.documentElement.style.fontSize = document.documentElement.style.fontSize.replace("px", "") * clientWidth / div.clientWidth + "px";
document.documentElement.removeChild(div);
}
var b = null;
window.addEventListener("resize", function () {
clearTimeout(b), b = setTimeout(a, 300)
}, !1), a()
}(window);
</script>
<script type="text/javascript" src="http://cdn01.weipaitang.com/res/js/zepto.picLazyLoad.min.js?v=0.9.1.58"></script>
</head> <style type="text/css">
html {
height: 100%;
} body,
#contentbox {
height: 100%;
background-color: #FFF;
}
.menu {
position: fixed;
top: 50px;
bottom: 0;
width: 2.25rem;
text-align: center;
background-color: #F8F8F8;
} .menu .menuItem {
height: 45px;
width: 100%;
font-size: 15px;
line-height: 45px;
box-sizing: border-box;
cursor: pointer;
} .menu .menuItem.selected {
color: #169ADA;
background-color: #FFF;
} .categoryBox {
margin-left: 2.25rem;
width: 5.25rem;
height: 99.9%;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
} .categoryBox .categoryContent .categoryList {
clear: both;
overflow: hidden;
text-align: center;
padding-bottom: 20px;
} .categoryBox .categoryContent .categoryList:last-child {
padding-bottom: 300px;
} .categoryBox .categoryContent .categoryList.first {
padding-top: 50px;
} .categoryBox .categoryContent .categoryList .title {
position: relative;
width: 90%;
margin: 0 5%;
font-size: 14px;
color: #424242;
line-height: 40px;
text-align: left;
text-indent: 7px;
} .categoryBox .categoryContent .categoryList .title:before {
position: absolute;
content: '';
left: 0;
top: 13px;
width: 3px;
height: 14px;
background-color: #169ADA;
} .categoryBox .categoryContent .categoryList .title .all {
float: right;
position: relative;
color: #b4b4b4;
padding-right: 12px;
font-size: 12px;
} .categoryBox .categoryContent .categoryList .title .all:after {
position: absolute;
content: "\E629";
font-family: "wptFont";
width: 10px;
right: 0;
font-size: 10px;
} .categoryBox .categoryContent .categoryList .categoryBox {
position: relative;
width: 100%;
overflow: hidden;
} .categoryBox .categoryContent .categoryList .categoryBox .categoryItem {
float: left;
height: 30px;
line-height: 30px;
width: 23.33%;
padding: 70px 5% 5px;
background-size: 63px;
background-repeat: no-repeat;
background-position: center 5px;
} .categoryBox .categoryContent .categoryList .categoryBox .categoryItem .itemIcon {
position: absolute;
top: 5px;
left: 50%;
width: 64px;
height: 64px;
color: #F56300;
font-size: 14px;
cursor: pointer;
line-height: 45px;
margin-left: -32px;
text-align: center;
background-color: #F4F4F4;
} .categoryBox .categoryContent .categoryList .categoryBox .categoryItem:nth-child(3) .itemIcon {
color: #169ADA;
} .categoryBox .categoryContent .categoryList .categoryBox .categoryItem:nth-child(4) .itemIcon {
color: #F4CE14;
font-size: 28px;
} .categoryBox .categoryContent .categoryList .categoryBox .categoryItem .text {
position: absolute;
left: 50%;
width: 64px;
cursor: pointer;
margin-left: -32px;
} .categoryBox .categoryContent .categoryList .categoryBox:before {
position: absolute;
left: 5%;
bottom: 0;
content: '';
width: 90%;
height: 1px;
background-color: #EEE;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
} .categoryBox .categoryContent .categoryList .categoryItem {
position: relative;
float: left;
height: 100px;
line-height: 100px;
width: 33.33%;
padding: 0 0 5px;
} .categoryBox .categoryContent .categoryList .categoryItem .categoryIcon {
position: relative;
background-size: 63px;
background-repeat: no-repeat;
background-position: center 5px;
width: 100%;
height: 70px;
} .categoryBox .categoryContent .categoryList .categoryItem .cursorArea {
position: absolute;
top: 5px;
left: 50%;
width: 64px;
height: 64px;
cursor: pointer;
overflow: hidden;
margin-left: -32px;
} .categoryBox .categoryContent .categoryList .categoryItem .cursorArea .new {
position: absolute;
top: 0;
left: 50%;
width: 74px;
color: #FFF;
height: 18px;
font-size: 20px;
line-height: 14px;
margin-left: -60px;
background-color: #E01F0B;
transform: rotate(-45deg) scale(0.5);
-webkit-transform: rotate(-45deg) scale(0.5);
} .categoryBox .categoryContent .categoryList .categoryItem.clicked {
opacity: 0.7;
} .categoryBox .categoryContent .categoryList .categoryBox .categoryItem {
padding: 38px 5% 18px;
} .categoryBox .categoryContent .categoryList .categoryItem .text {
height: 20px;
line-height: 20px;
margin: 5px 0;
overflow: hidden;
font-size: 14px;
display: block;
} .categoryBox .categoryContent .categoryList .categoryItem.official {
clear: left;
width: 90%;
margin: 5px 5%;
height: auto;
padding: 37.6% 0 0;
background-size: cover;
background-position: center;
} .wptAbMask {
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
z-index: 99995;
background-color: #FFF;
}
</style> <script type="text/javascript">
var doing = true;
var category = -1; //滚动触发菜单栏
function pageScroll() {
var _scrollTop = $(".categoryBox").scrollTop();
var _height = -(document.documentElement.clientHeight || $(window).height()) / 2 + 25;
var index = 1;
$(".categoryList").each(function() {
_height += $(this).height();
if(_height > _scrollTop) {
return;
}
index++;
});
$(".menu .menuItem").removeClass("selected");
$(".menu .menuItem:nth-child(" + index + ")").addClass("selected");
} $(function () {
var _category = window.location.search.match(/[\?&]category=(\d+)&?/);
if (null != _category) {
category = _category[1];
} //点击菜单定位
$(".menu").on("click", ".menuItem", function () {
doing = false;
var self = $(this);
if (!self.hasClass("selected")) {
category = self.attr("category");
$(".menu .menuItem").removeClass("selected");
self.addClass("selected");
$(".categoryBox").scrollTop(self.attr("scroll"));
}
setTimeout(function() {
doing = true;
}, 100)
}); //回退定位高度
if (!$.os.android || ignorePhoneModel.indexOf(getPhoneModel()) == -1) {
window.onpopstate = function (event) {
if (null != event.state && 'undefined' != typeof event.state.scrollTop) {
$("body").scrollTop(event.state.scrollTop);
}
};
} // 初始化左边栏选项
$(".menu .menuItem[category='" + category + "']").addClass('selected');
$(".categoryList[category='" + category + "']").show(); //计算各分类高度
var _dataHeight = -50;
$(".categoryList").each(function(i, item) {
if(i == 0) {
$(".menu .menuItem:nth-child(" + (1) + ")").attr("scroll", 0);
} else {
$(".menu .menuItem:nth-child(" + (i + 1) + ")").attr("scroll", _dataHeight);
}
_dataHeight += $(item).height();
}); //页面滚动
$(".categoryBox").on('scroll', function (e) {
e.stopPropagation();
e.preventDefault();
if(doing) {
pageScroll();
}
}); //加载lazy图片
$.picLazyLoad({
seletctor: ".lazyLoad",
threshold: $(window).height() * 1.5,
scrollArea: $(".categoryBox")
}); });
</script> <body>
<div id="contentbox">
<div class="menu">
<div class="menuItem" category="-1" statisticEvent="click" statistic='{"data":{"uu":"","uc":"-1"},"route":"click"}'>推荐分类</div>
<div class="menuItem" category="0" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0"},"route":"click"}'>文玩杂项</div>
<div class="menuItem" category="1" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1"},"route":"click"}'>玉翠珠宝</div>
<div class="menuItem" category="2" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2"},"route":"click"}'>书画篆刻</div>
<div class="menuItem" category="3" statisticEvent="click" statistic='{"data":{"uu":"","uc":"3"},"route":"click"}'>茶酒滋补</div>
<div class="menuItem" category="4" statisticEvent="click" statistic='{"data":{"uu":"","uc":"4"},"route":"click"}'>紫砂陶瓷</div>
<div class="menuItem" category="5" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5"},"route":"click"}'>工艺作品</div>
<div class="menuItem" category="7" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7"},"route":"click"}'>花鸟文娱</div>
</div> <div class="categoryBox">
<div class="categoryContent">
<div class="categoryList first" category="-1">
<div class="title">推荐分类</div>
<div class="categoryItem" data-url="/category/detail/1/1004" data-seccategory="1004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1004.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">琥珀/蜜蜡</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1015" data-seccategory="1015" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1015"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1015.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">松石</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5001" data-seccategory="5001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5001.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">木质珠串</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/2" data-seccategory="2" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"2"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_2.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">核雕/核桃</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1001" data-seccategory="1001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1001.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">和田玉</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1002" data-seccategory="1002" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1002"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1002.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">翡翠</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1005" data-seccategory="1005" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1005"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1005.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">玛瑙</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1019" data-seccategory="1019" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1019"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1019.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">原石</span>
</div>
<div class="categoryItem" data-url="/category/detail/4/4001" data-seccategory="4001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"4","usc":"4001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/4_4001.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">紫砂</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5003" data-seccategory="5003" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5003"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5003.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">树根</span>
</div>
<div class="categoryItem" data-url="/category/detail/4/4002" data-seccategory="4002" statisticEvent="click" statistic='{"data":{"uu":"","uc":"4","usc":"4002"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/4_4002.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">瓷器</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1021" data-seccategory="1021" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1021"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1021.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">奢侈品</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2001" data-seccategory="2001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2001.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">国画</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1014" data-seccategory="1014" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1014"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1014.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">天珠</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2003" data-seccategory="2003" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2003"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2003.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">书法</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2004" data-seccategory="2004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2004.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">印章篆刻</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5005" data-seccategory="5005" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5005"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5005.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">菩提珠串</span>
</div>
<div class="categoryItem" data-url="/category/detail/3/3004" data-seccategory="3004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"3","usc":"3004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/3_3004.jpg?t=10"></div>
<div class="cursorArea"></div>
<span class="text">普洱茶</span>
</div>
</div>
<div class="categoryList" category="0">
<div class="title">
文玩杂项 <a class="all" href="/category/detail/0">查看全部</a>
</div>
<div class="categoryItem" data-url="/category/detail/0" data-seccategory="-1">
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_all.jpg"></div>
<div class="cursorArea"></div>
<span class="text">全部</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/1" data-seccategory="1" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"1"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_1.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">文房器</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/10" data-seccategory="10" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"10"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_10.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">砚台</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/2" data-seccategory="2" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"2"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_2.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">核雕/核桃</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/3" data-seccategory="3" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"3"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_3.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">烟具</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/7" data-seccategory="7" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"7"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_7.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">图书</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/4" data-seccategory="4" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"4"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_4.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">邮票</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/5" data-seccategory="5" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"5"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_5.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">钱币</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/8" data-seccategory="8" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"8"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_8.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">化石</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/9" data-seccategory="9" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"9"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_9.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">陨石</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/11" data-seccategory="11" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"11"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_11.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">香料/香炉</span>
</div>
<div class="categoryItem" data-url="/category/detail/0/0" data-seccategory="0" statisticEvent="click" statistic='{"data":{"uu":"","uc":"0","usc":"0"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/0_0.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">其他</span>
</div>
</div>
<div class="categoryList" category="1">
<div class="title">
玉翠珠宝 <a class="all" href="/category/detail/1">查看全部</a>
</div>
<div class="categoryItem" data-url="/category/detail/1" data-seccategory="-1">
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_all.jpg"></div>
<div class="cursorArea"></div>
<span class="text">全部</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1001" data-seccategory="1001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1001.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">和田玉</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1002" data-seccategory="1002" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1002"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1002.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">翡翠</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1015" data-seccategory="1015" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1015"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1015.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">松石</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1004" data-seccategory="1004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1004.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">琥珀/蜜蜡</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1005" data-seccategory="1005" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1005"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1005.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">玛瑙</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1003" data-seccategory="1003" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1003"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1003.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">南红</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1019" data-seccategory="1019" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1019"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1019.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">原石</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1021" data-seccategory="1021" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1021"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1021.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">奢侈品</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1014" data-seccategory="1014" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1014"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1014.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">天珠</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1017" data-seccategory="1017" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1017"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1017.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">珊瑚</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1020" data-seccategory="1020" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1020"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1020.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">贵重宝石</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1006" data-seccategory="1006" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1006"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1006.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">水晶</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1007" data-seccategory="1007" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1007"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1007.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">碧玺</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1013" data-seccategory="1013" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1013"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1013.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">金银饰品</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1009" data-seccategory="1009" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1009"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1009.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">黄龙玉</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1018" data-seccategory="1018" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1018"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1018.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">玉髓</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1011" data-seccategory="1011" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1011"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1011.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">青金石</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1016" data-seccategory="1016" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1016"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1016.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">砗磲</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1012" data-seccategory="1012" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1012"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1012.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">石榴石</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1010" data-seccategory="1010" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1010"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1010.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">珍珠</span>
</div>
<div class="categoryItem" data-url="/category/detail/1/1000" data-seccategory="1000" statisticEvent="click" statistic='{"data":{"uu":"","uc":"1","usc":"1000"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/1_1000.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">其他</span>
</div>
</div>
<div class="categoryList" category="2">
<div class="title">
书画篆刻 <a class="all" href="/category/detail/2">查看全部</a>
</div>
<div class="categoryItem" data-url="/category/detail/2" data-seccategory="-1">
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_all.jpg"></div>
<div class="cursorArea"></div>
<span class="text">全部</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2001" data-seccategory="2001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2001.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">国画</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2002" data-seccategory="2002" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2002"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2002.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">西画</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2004" data-seccategory="2004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2004.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">印章篆刻</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2005" data-seccategory="2005" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2005"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2005.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">印石章料</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2003" data-seccategory="2003" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2003"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2003.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">书法</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2006" data-seccategory="2006" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2006"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2006.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">信札/手记</span>
</div>
<div class="categoryItem" data-url="/category/detail/2/2000" data-seccategory="2000" statisticEvent="click" statistic='{"data":{"uu":"","uc":"2","usc":"2000"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/2_2000.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">其他</span>
</div>
</div>
<div class="categoryList" category="3">
<div class="title">
茶酒滋补 <a class="all" href="/category/detail/3">查看全部</a>
</div>
<div class="categoryItem" data-url="/category/detail/3" data-seccategory="-1">
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/3_all.jpg"></div>
<div class="cursorArea"></div>
<span class="text">全部</span>
</div>
<div class="categoryItem" data-url="/category/detail/3/3004" data-seccategory="3004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"3","usc":"3004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/3_3004.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">普洱茶</span>
</div>
<div class="categoryItem" data-url="/category/detail/3/3002" data-seccategory="3002" statisticEvent="click" statistic='{"data":{"uu":"","uc":"3","usc":"3002"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/3_3002.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">其他茶叶</span>
</div>
<div class="categoryItem" data-url="/category/detail/3/3001" data-seccategory="3001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"3","usc":"3001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/3_3001.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">酒</span>
</div>
<div class="categoryItem" data-url="/category/detail/3/3003" data-seccategory="3003" statisticEvent="click" statistic='{"data":{"uu":"","uc":"3","usc":"3003"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/3_3003.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">滋补营养品</span>
</div>
<div class="categoryItem" data-url="/category/detail/3/3000" data-seccategory="3000" statisticEvent="click" statistic='{"data":{"uu":"","uc":"3","usc":"3000"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/3_3000.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">其他</span>
</div>
</div>
<div class="categoryList" category="4">
<div class="title">
紫砂陶瓷 <a class="all" href="/category/detail/4">查看全部</a>
</div>
<div class="categoryItem" data-url="/category/detail/4" data-seccategory="-1">
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/4_all.jpg"></div>
<div class="cursorArea"></div>
<span class="text">全部</span>
</div>
<div class="categoryItem" data-url="/category/detail/4/4001" data-seccategory="4001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"4","usc":"4001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/4_4001.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">紫砂</span>
</div>
<div class="categoryItem" data-url="/category/detail/4/4003" data-seccategory="4003" statisticEvent="click" statistic='{"data":{"uu":"","uc":"4","usc":"4003"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/4_4003.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">陶器</span>
</div>
<div class="categoryItem" data-url="/category/detail/4/4002" data-seccategory="4002" statisticEvent="click" statistic='{"data":{"uu":"","uc":"4","usc":"4002"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/4_4002.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">瓷器</span>
</div>
<div class="categoryItem" data-url="/category/detail/4/4004" data-seccategory="4004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"4","usc":"4004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/4_4004.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">瓷片标本</span>
</div>
<div class="categoryItem" data-url="/category/detail/4/4000" data-seccategory="4000" statisticEvent="click" statistic='{"data":{"uu":"","uc":"4","usc":"4000"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/4_4000.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">其他</span>
</div>
</div>
<div class="categoryList" category="5">
<div class="title">
工艺作品 <a class="all" href="/category/detail/5">查看全部</a>
</div>
<div class="categoryItem" data-url="/category/detail/5" data-seccategory="-1">
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_all.jpg"></div>
<div class="cursorArea"></div>
<span class="text">全部</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5001" data-seccategory="5001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5001.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">木质珠串</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5005" data-seccategory="5005" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5005"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5005.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">菩提珠串</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5002" data-seccategory="5002" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5002"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5002.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">木雕</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5003" data-seccategory="5003" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5003"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5003.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">树根</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5018" data-seccategory="5018" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5018"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5018.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">崖柏</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5014" data-seccategory="5014" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5014"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5014.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">木质把件</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5012" data-seccategory="5012" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5012"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5012.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">小叶紫檀</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5013" data-seccategory="5013" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5013"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5013.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">黄花梨</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5020" data-seccategory="5020" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5020"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5020.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">沉香</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5016" data-seccategory="5016" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5016"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5016.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">家具</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5019" data-seccategory="5019" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5019"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5019.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">宗教文化</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5006" data-seccategory="5006" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5006"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5006.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">石雕</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5017" data-seccategory="5017" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5017"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5017.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">矿石摆件</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5015" data-seccategory="5015" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5015"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5015.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">兵器</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5004" data-seccategory="5004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5004.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">铜/铁/锡器</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5007" data-seccategory="5007" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5007"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5007.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">金/银器</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5011" data-seccategory="5011" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5011"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5011.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">竹雕</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5010" data-seccategory="5010" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5010"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5010.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">扇子</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5008" data-seccategory="5008" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5008"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5008.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">琉璃</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5009" data-seccategory="5009" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5009"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5009.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">漆器/雕漆</span>
</div>
<div class="categoryItem" data-url="/category/detail/5/5000" data-seccategory="5000" statisticEvent="click" statistic='{"data":{"uu":"","uc":"5","usc":"5000"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/5_5000.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">其他</span>
</div>
</div>
<div class="categoryList" category="7">
<div class="title">
花鸟文娱 <a class="all" href="/category/detail/7">查看全部</a>
</div>
<div class="categoryItem" data-url="/category/detail/7" data-seccategory="-1">
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_all.jpg"></div>
<div class="cursorArea"></div>
<span class="text">全部</span>
</div>
<div class="categoryItem" data-url="/category/detail/7/7001" data-seccategory="7001" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7","usc":"7001"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_7001.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">盆景/盆栽</span>
</div>
<div class="categoryItem" data-url="/category/detail/7/7002" data-seccategory="7002" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7","usc":"7002"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_7002.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">花卉</span>
</div>
<div class="categoryItem" data-url="/category/detail/7/7003" data-seccategory="7003" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7","usc":"7003"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_7003.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">观赏鱼</span>
</div>
<div class="categoryItem" data-url="/category/detail/7/7004" data-seccategory="7004" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7","usc":"7004"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_7004.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">宠物</span>
</div>
<div class="categoryItem" data-url="/category/detail/7/7005" data-seccategory="7005" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7","usc":"7005"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_7005.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">游戏动漫</span>
</div>
<div class="categoryItem" data-url="/category/detail/7/7006" data-seccategory="7006" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7","usc":"7006"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_7006.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">明星周边</span>
</div>
<div class="categoryItem" data-url="/category/detail/7/7007" data-seccategory="7007" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7","usc":"7007"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_7007.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">武术健身</span>
</div>
<div class="categoryItem" data-url="/category/detail/7/7000" data-seccategory="7000" statisticEvent="click" statistic='{"data":{"uu":"","uc":"7","usc":"7000"},"route":"click"}'>
<div class="categoryIcon lazyLoad" data-original="http://w.weipaitang.com/res/img/category/7_7000.jpg?t=10"></div>
<div class="cursorArea">
</div>
<span class="text">其他</span>
</div>
</div>
</div>
</div>
</div> </body>
</html>
html5 商品分类页面效果zepto的更多相关文章
- 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
原文:关于html5与jsp页面同样的html代码展示的页面效果不一样的问题 html5默认的声明为 <!DOCTYPE html> jsp默认的声明头部为 <%@ page con ...
- 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- 玩转HTML5移动页面(动效篇)
原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...
- 使用 video.js 开发 HTML5 视频页面
时间 2015-05-13 17:11:58 The GIS Guy 原文 http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- 玩转HTML5移动页面
(1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gul ...
- 玩转HTML5移动页面(动效篇)(转载)
本文转载自: 玩转HTML5移动页面(动效篇)
- 精美的HTML5 Loadding页面
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
随机推荐
- Object类实现的方法
---恢复内容开始--- 1.Clone 对象浅复制,实现Clonable接口可调用,否则CloneNotSupportedException异常 2.getClass final方法,获得方法运行的 ...
- redis 订阅&发布（转载）
https://segmentfault.com/a/1190000016898228?utm_source=coffeephp.com 方法一: redis_helper.py: 封装发布订阅方法 ...
- 第107题：二叉树的层次遍历II
一． 问题描述 给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 例如: 给定二叉树 [3,9,20,null,null,15,7], 3 ...
- 基于SSM框架的通用权限框架设计
1. 整体解决方案概述 1.1 权限整体解决方案概述 权限设计主要有一下几大部分组成: PassPort: 针对现在系统的分析,系统之间有部分信息是共享的,这部分信息将由 ...
- BZOJ 4864: [BeiJing 2017 Wc]神秘物质 (块状链表/平衡树 )
这就是一道数据结构裸题啊,最大极差就是区间最大值减最小值,最小极差就是相邻两个数差的最小值.然后平衡树splay/treap或者块状链表维护就行了. 第一次自己写块状链表,蛮好写,就是长..然后就BZ ...
- JavaScript里的递增"++"和递减"--"
递增"++",表示在原来的数值上+1 tips:比如a=1,那么++a或者a++都等于2. 递减"--",表示再原来的数值上-1,前置/后置递减计算过程同递增 ...
- 003_linux之点灯（C语言版）
linux点灯在汇编版中说明了硬件中点灯的原理,C语言中不再陈述,说白了就是控制GPXCON和GPXDTA寄存器就行了,芯片是S3C2440A芯片,查看芯片手册就能懂了,其他芯片也是一样的.C语言版就 ...
- mac 安装软件 显示信任任何来源
“通用”里有时没有“任何来源”这个选项: 显示"任何来源"选项在控制台中执行: sudo spctl --master-disable 不显示"任何来源"选项( ...
- error while loading shared libraries: libmysqlclient.so.20 问题小结
问题:安装完成sysbench之后,查看sysbench版本号时出现下面问题.这种报错很常见, [root@zero01 sysbench]# /usr/local/sysbench/bin/sysb ...
- iOS Jenkins 自动化打包构建
前言 在测试app项目过程中,通常都是需要开发打测试包给到测试,但是无论是iOS还是Android的打包过程都是相当漫长的,频繁的回归测试需要频繁的打包,对于开发同学影响还是蛮大的.因此在这种情况下, ...