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>
转载于:https://www.cnblogs.com/joe235/p/11533878.html
html5 商品分类页面效果zepto相关推荐

html对话框跳转页面,html5各种页面切换效果和模态对话框用法总结
这篇文章主要为大家介绍了html5各种页面切换效果和模态对话框用法总结,较为详细的介绍了HTML5的各种页面元素的使用技巧,非常具有实用价值,需要的朋友可以参考下本文详细总结了html5各种页面切换 ...
单页活动页面html,优秀HTML5活动页面
一个好的手机活动宣传更能让人分享传播是爆炸性的下面是我平时看到一些好的微信活动宣传页面分享给大家其中用到的技术常做微信活动专题页面的人可以看看大神们是怎么做的这样到自己做的时候 ...
移动端 html5领奖页面,HTML5移动端交互
在移动设备中,几乎所有的操作都和触摸有关,而基于这一特性,近年来在移动端中也兴起了一些较为特别的交互方式.用手指在屏幕上"刮奖"就是其中的一个非常典型的例子,它不仅需要前端设计师能 ...
html5页面的手势,HTML5单页面手势滑屏切换如何实现
这次给大家带来HTML5单页面手势滑屏切换如何实现,怎么实现HTML5单页面手势滑屏切换?HTML5单页面手势滑屏切换的注意事项有哪些,下面就是实战案例,一起来看一下. H5单页面手势滑屏切换是采用H ...
html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效
简单做出HTML5翻页效果文字特效之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的, ...
html5制作波浪,技能get:用HTML5实现波浪效果
rr Document .box{ width: 500px; height: 500px; margin:100px auto; background:hotpink; border-radius: ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
html拖拽垃圾桶,html5拖放-垃圾桶效果
html5拖放-垃圾桶效果什么事拖放(drag) drag&drop:拖放指的是html5提供专门的拖拽与投放的API 拖放api的用处/优势 1.提供专门的拖拽与投放的API 2.触发多个 ...
html5页面图片切换,HTML5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
html5 商品分类页面效果zepto

html5 商品分类页面效果zepto相关推荐

最新文章

热门文章
