京东分页

最新推荐文章于 2023-02-23 10:35:30 发布
最新推荐文章于 2023-02-23 10:35:30 发布
阅读量338 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44380707/article/details/90755628
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>catagory</title>
	<link rel="stylesheet" href="css/bass.css">
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		html,body{
			width: 100%;
			height: 100%;
		
		}
		.ct_layout{
			width: 100%;
			height: 100%;
		}
		/* 头部搜索块样式 */
		.ct_header {
			width: 100%;
			height: 50px;
			border-bottom: 1px solid #ccc;
			background-color: #eee;
			position: absolute;
		}
		.ct_back,.ct_menu {
			width: 49px;
			height: 49px;
			position: absolute;
			top: 0;
			background: url("img/jd-sprites.png");
			background-size: 200px 200px;
			padding: 14px;
			background-origin: content-box;
			background-clip: content-box;	
		}
		.ct_back {
			left: 0;
			background-position: -20px 0;
		}
		.ct_menu {
			right: 0;
			background-position: -60px 0;
		}
		.ct_search {
			width: 100%;
			height: 100%;
			padding: 0 60px;
		}
		.ct_search > input {
			width: 100%;
			height: 40px;
			border-radius: 5px;
			margin-top: 5px;
			font-size: 16px;
			color: #666;
			padding-left: 5px;

		}
		.ct_content {
			width: 100%;
			height: 100%;
			padding-top: 50px;
		}
		.ct_cLeft {
			width: 100px;
			height: 100%;
			float: left;
			overflow: hidden;
			position: relative;
		}
		.ct_cLeft > ul {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	   .ct_cLeft li {
		height: 50px;
		width: 100%;

	   }
	  .ct_cLeft li > a {
		width: 100%;
		height: 100%;
		display: block;
		background-color: #eee;
		text-decoration: none;
		color: #333;
		line-height: 50px;
		text-align: center;
		border-bottom: 1px solid #ccc;
		border-right: 1px solid #ccc;
	} 
	 .ct_cLeft .active > a{
	 	background-color: #fff;
	 	border-right: none;
	 	border-bottom: none;
	 	color: #e92322;
	 }
	.ct_cRight {
			height: 100%;
			margin-left: 100px;
			display: flex;
            flex-direction: column;
            overflow: hidden;

		}
	.ct_rImg {
		width: 100%;
		display: block;
	}
	.ct_rImg > img {
		width: 100%;
		display: block;
	}
	.ct_cRight > h3 {
		height: 30px; 
		line-height: 30px;
		padding-left: 10px;
		border-bottom: 1px solid #ccc;
		margin: 1em 0px;
	}
	.ct_hotCategory{
		width: 100%;
		flex: 1;
		position: relative;
		overflow: hidden;
	}
	
    .ct_hotCategory li {
    	width: 33.33%;
    	text-align: center;
    	float: left;

    	

    }	
  </style>
	
	
</head>
<body>
	<div class="ct_layout">
		<div class="ct_header">
			<a href="javascript:;" class="ct_back"></a>
			<form action="" class="ct_search">
				<input type="text" placeholder="请输入搜索内容">
			</form>
			<a href="javascript:;" class="ct_menu"></a>
		</div>
		<div class="ct_content">
			
			<div class="ct_cLeft">
				<ul>
                <li class=""><a href="javascript:;">热门推荐</a></li>
                <li class="active"><a href="javascript:;">潮流女装</a></li>
                <li class=""><a href="javascript:;">品牌男装</a></li>
                <li class=""><a href="javascript:;">内衣配饰</a></li>
                <li class=""><a href="javascript:;">家用电器</a></li>
                <li class=""><a href="javascript:;">电脑办公</a></li>
                <li class=""><a href="javascript:;">手机数码</a></li>
                <li class=""><a href="javascript:;">母婴频道</a></li>
                <li class=""><a href="javascript:;">图书</a></li>
                <li class=""><a href="javascript:;">家居家纺</a></li>
                <li class=""><a href="javascript:;">居家生活</a></li>
                <li class=""><a href="javascript:;">家具建材</a></li>
                <li class=""><a href="javascript:;">热门推荐</a></li>
                <li class=""><a href="javascript:;">潮流女装</a></li>
                <li class=""><a href="javascript:;">品牌男装</a></li>
                <li class=""><a href="javascript:;">内衣配饰</a></li>
                <li class=""><a href="javascript:;">家用电器</a></li>
                <li class=""><a href="javascript:;">电脑办公</a></li>
                <li class=""><a href="javascript:;">手机数码</a></li>
                <li class=""><a href="javascript:;">母婴频道</a></li>
                <li class=""><a href="javascript:;">图书</a></li>
                <li class=""><a href="javascript:;">家居家纺</a></li>
                <li class=""><a href="javascript:;">居家生活</a></li>
                <li class=""><a href="javascript:;">家具建材</a></li>
            </ul>
			</div>
			<div class="ct_cRight">
				<a href="javascript:;" class="ct_rImg">
					<img src="img/banner_1.jpg" alt="">
				</a>
				<h3>热门分类</h3>
				<div class="ct_hotCategory" id="warapper">
					<ul style="overflow: hidden;">
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
						<li><a href=""><img src="img/nv-fy.jpg" alt=""><p>毛衣</p></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<script src="js/fastclick.js"></script>
	<script src="js/zepto.min.js"></script>
	<script src="js/iscroll.js"></script>
	<script>
		/*var myScroll = new IScroll('#warapper',{mouseWheel:true});*/
		

    var myScroll = new IScroll('#warapper',{
        mouseWheel: true,
        scrollbars: true
    });
	</script>
	<script>
		window.onload = function(){
			
			var ct_cLeft = document.querySelector(".ct_cLeft");
			var leftHeight = ct_cLeft.offsetHeight;
			var ulBox = ct_cLeft.querySelector("ul:first-of-type");
			var ulBoxHeight = ulBox.offsetHeight;
			var lis = ulBox.querySelectorAll("li");
			for (var i=0;i<lis.length;i++){
				lis[i].index = i;
			}
			

			var startY = 0;
			var moveY = 0;
			var currentY = 0;
			var distanceY = 0;

			var maxTop = 0;
			var minTop = leftHeight - ulBoxHeight;
			var maxBounceTop = maxTop + 100;
			var minBounceTop = minTop - 100;

			ulBox.addEventListener("touchstart",function(e){
				startY = e.targetTouches[0].clientY;
			});
			ulBox.addEventListener("touchmove",function(e){
				moveY = e.targetTouches[0].clientY;
				distanceY = moveY - startY;
				if(currentY+distanceY>maxBounceTop||currentY+distanceY<minBounceTop){
					return;

				}
				ulBox.style.top = (currentY+distanceY)+"px";

			});
			ulBox.addEventListener("touchend",function(e){
				if(currentY + distanceY < minTop) {
					ulBox.style.transition = "top 0.5s";
					ulBox.style.top = minTop + "px";
					currentY = minTop;
				}
				else if(currentY + distanceY > maxTop){
					ulBox.style.transition = "top 0.5s";
					ulBox.style.top = maxTop + "px";
					currentY = maxTop;

				}
				else{
					currentY += distanceY;
				}
				
			});
			$(function(){
				FastClick.attach(document.body);
			});

			ulBox.addEventListener("click",function(e){
					for(var i=0 ;i<lis.length;i++){
					lis[i].classList.remove("active");
				}
				var li = e.target.parentNode;
				var liHeight = li.offsetHeight;
				li.classList.add("active");
				var index = li.index;
				ulBox.style.transition = "top 0.5s";
				if(-index*liHeight<minTop){
					ulBox.style.top = minTop+"px";
					currentY = minTop;
				}
				else {
					ulBox.style.top = -index*liHeight + "px";
					currentY = -index*liHeight; 
				}
			});

			/*var itcast = {
				tap:function(dom,callback) {
				if(dom && typeof dom!="object"){
					return;
				}
               var startTime, startX, startY;
			   dom.addEventListener("touchstart",function(e){
                 if(e.targetTouches.length > 1){
                 	return;
                 }
                 startTime = Date.now();
                 startX = e.targetTouches[0].clientX;
                 startY = e.targetTouches[0].clientY;

			});

                 
			dom.addEventListener("touchend",function(e){
                if(e.changedTouches.length > 1){
                	return;
                }
                if(Date.now() - startTime > 150){
                	return;
                }
                var endX = e.changedTouches[0].clientX;
                var endY = e.changedTouches[0].clientY;
                if(Math.abs(endX - startX)<6&&Math.abs(endY -startY)<6){
                	console.log("Tap事件");
                	callback&&callback(e);
                }
			});
		    }
			};
			itcast.tap(ulBox,function(e){
				for(var i=0 ;i<lis.length;i++){
					lis[i].classList.remove("active");
				}
				var li = e.target.parentNode;
				var liHeight = li.offsetHeight;
				li.classList.add("active");
				var index = li.index;
				ulBox.style.transition = "top 0.5s";
				if(-index*liHeight<minTop){
					ulBox.style.top = minTop+"px";
					currentY = minTop;
				}
				else {
					ulBox.style.top = -index*liHeight + "px";
					currentY = -index*liHeight; 
				}
			});*/
			

			
		};
	</script>
</body>
</html>
duanyuehuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿京东ajax js分页效果
05-17
仿京东ajax js 分页效果，自己修改读取数据即可完成无刷新分页
仿京东商品展示分页插件
03-17
仿京东商品展示分页插件，纯JS编写，在实际应用过程中修复了各种BUG，使用起来非常简单，内有简单的demo。
HBase在京东的完善与创新
844604778
10-18 232
随着大数据处理时代的到来，NoSQL风生水起。京东作为国内最大的综合网络零售商，随着业务数据量爆发式增长，传统的关系数据库在海量数据面前开始显得捉襟见肘，于是京东云平台在Hadoop生态集群经验积累的基础上，引入了HBase作为海量数据存储的基础设施。虽然引入时间不长，但京东数十个业务系统已经使用了HBase，包括实时在线业务、离线批量计算业务、批量导入兼在线访问等业务类型。为了提高资源利用率...
mysql 分页_京东分页优化之Mysql优化实践
weixin_39638859的博客
12-05 98
当你和别人都能实现一个某个功能，这时候区分你们能力的不是谁干活多少，而是谁能写出效率更高的代码。比如显示一个订单列表它不仅仅是写一条SELECT SQL那么简单，我们还需要很清楚的知道这条SQL他大概扫描了多少行数据，返回了多少行数据，是否需要创建索引，创建什么样的索引，索引是否生效，等等。这里以订单列表显示和订单导出为例来谈谈Mysql分页优化。发现问题下边是一个订单表的简单表结构。里边有大概2...
PageMenuLayout:【Android分页菜单控件】快速实现美团、饿了么、京东、淘宝首页分页菜单效果
05-01
PageMenuLayoutAndroid分页菜单控件，帮助你快速实现美团、饿了么、京东等分页菜单效果。基本使用1.添加 Gradle 依赖JitpackAdd it in your root build.gradle at the end of repositories:allprojects { ...
js分页效果
09-22
在前端开发中，分页是一种常见的用户界面设计，用于处理大量数据时的浏览和导航。本示例聚焦于使用原生JavaScript实现一个分页效果，同时结合图片的运动效果，以提升用户体验。以下是对这个话题的详细阐述： 1. **...
高仿京东、淘宝分页代码
06-09
"高仿京东、淘宝分页代码"是一个JavaScript插件，它实现了与京东和淘宝网站相似的分页功能，允许用户轻松地浏览和导航大量的网页内容。这个插件的设计目的是为开发者提供一个易于集成和定制的解决方案，以便在自己的...
京东主页html模板
01-17
在描述中提到的“分页”是指在大量数据展示时，为了提高用户体验和页面加载速度，将内容分为多个页面进行浏览。在HTML中，可以使用链接、按钮或JavaScript实现分页功能。通常，我们会用`<a>`标签创建链接，或者使用`...
js + jquery 实现无限加载页面的分页（类似京东手机版）
Simael的专栏
09-17 1979
js + jquery 实现无限加载页面的分页 参考京东手机版产品列表页
android 仿淘宝京东 详情页可嵌套viewpager和listview
10-12
android 仿淘宝京东 详情页 上下滑动的部分 下界面可以嵌套listview和viewpager 不会冲突
Android自定义布局仿京东详情页，上下翻页
04-16
最近项目中，用到了一个功能就是仿京东的商品详情页中的上下翻页，我在网上找了一个例子修改了一下，现在传到这里和大家交流学习
仿京东的商品展示详情页面
11-16
仿照京东商品展示详情页做的demo,解压到Hbuilder或者其他IDE中即可使用,商城项目中可以直接拿过来修改使用。
jQuery仿京东商城手机端商品分类滑动切换特效.zip
08-22
demo地址：http://demo.lanrenzhijia.com/demo/41/4133/demo/ 项目中用到的分类界面要的效果类似于京东移动端的分类页面：两侧都可滑动，且左侧选择后右侧自动定位
js分页代码分享
weixin_30482181的博客
04-28 431
js代码 var home_page=1;//首页 var curr_page=1;//当前页 var last_page=10;//尾页 var yema_num = 6;//页码数 var page_row=1;//每页的条数 var count_page=0;//总页数 var count_row=0;//总条数 var left_page=1;//最左端...
js实现分页功能代码
zybijiso666的博客
02-23 488
分页代码
JS+CSS实现分页的两个方法（完整代码）
willwe的博客
06-11 2645
几个分页的方法（转载） 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js分页效果</title> <style> * { margin:0; padding:0; } img { border:0; } ol,ul,li { list-style:none; } .box { width:10
java三大框架实现仿京东分页效果
雷雷的博客
07-10 4141
Java三大框架实现仿京东分页效果实现，直接把代码复制到项目中即可使用，注意jsp中用了bootstrap框架，
selenium京东爬虫
最新发布
11-11
selenium京东爬虫是使用selenium这个Python库来模拟用户在京东网站上的操作，从而获取商品信息的爬虫。下面我将简要介绍实现这个爬虫所需要的步骤。 首先，我们需要安装selenium库，并配合一个合适的WebDriver，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值