移动端京东案例

最新推荐文章于 2022-08-27 10:04:01 发布

Ron韦斯莱

最新推荐文章于 2022-08-27 10:04:01 发布

阅读量567

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/90576767

版权

效果展示：
在这里插入图片描述
index.html

<!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>Document</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="jd_container">
		<!-- 顶部搜索 -->
		<header class="jd_search">
			<div class="jd_container_box">
				<a href="javascript:;" class="icon_logo"></a>
				<form action="#">
					<span class="icon_search"></span>
					<input type="search" placeholder="输入想搜索的商品"/>
				</form>
				<a href="#" class="login">登录</a>
			</div>
		</header>
		<!-- 轮播图 -->
		<div class="jd_banner">
			<ul class="clearFix">
				<li><a href=""><img src="images/l8.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l1.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l2.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l3.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l4.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l5.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l6.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l7.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l8.jpg" alt=""></a></li>
				<li><a href=""><img src="images/l1.jpg" alt=""></a></li>
			</ul>
			<ul>
				<li class="now"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!-- 分类部分 -->
		<nav class="jd_nav">
			<ul class="clearFix">
				<li><a href=""><img src="images/nav0.png" alt=""><p>分类</p></a></li>
				<li><a href=""><img src="images/nav1.png" alt=""><p>分类</p></a></li>
				<li><a href=""><img src="images/nav2.png" alt=""><p>分类</p></a></li>
				<li><a href=""><img src="images/nav3.png" alt=""><p>分类</p></a></li>
				<li><a href=""><img src="images/nav4.png" alt=""><p>分类</p></a></li>
				<li><a href=""><img src="images/nav5.png" alt=""><p>分类</p></a></li>
				<li><a href=""><img src="images/nav6.png" alt=""><p>分类</p></a></li>
				<li><a href=""><img src="images/nav7.png" alt=""><p>分类</p></a></li>
			</ul>
		</nav>
		<div class="jd_product">
			<section class="jd_product_box">
				<div class="title no_bottom">
					<span class="icon_clock"></span>
					<span class="product_decoration">掌上描述</span>
					<div class="time">
						<span>0</span>
						<span>0</span>
						<span>:</span>
						<span>0</span>
						<span>0</span>
						<span>:</span>
						<span>0</span>
						<span>0</span>
					</div>
					<span class="more f_right">更多&gt;</span>
				</div>
				<div class="con">
					<ul class="clearFix">
						<li>
							<a href="#"><img src="images/detail01.jpg" alt=""></a>
							<p class="new-price">&yen;10.00</p>
							<p class="old-price">&yen;100.00</p>
						</li>
						<li>
							<a href="#"><img src="images/detail01.jpg" alt=""></a>
							<p class="new-price">&yen;10.00</p>
							<p class="old-price">&yen;100.00</p>
						</li>
						<li>
							<a href="#"><img src="images/detail01.jpg" alt=""></a>
							<p class="new-price">&yen;10.00</p>
							<p class="old-price">&yen;100.00</p>
						</li>
					</ul>
				</div>
			</section>
			<section class="jd_product_box">
				<div class="title"><h3>京东超市</h3></div>
				<div class="con clearFix">
					<a href="#" class="w50 br f_left"><img src="images/cp1.jpg" alt=""></a>
					<a href="#" class="w50 bb f_right"><img src="images/cp2.jpg" alt=""></a>
					<a href="#" class="w50 f_right"><img src="images/cp3.jpg" alt=""></a>
				</div>
			</section>
			<section class="jd_product_box">
				<div class="title"><h3>京东超市</h3></div>	
				<div class="con clearFix">
					<a href="#" class="w50 f_left br"><img src="images/cp4.jpg" alt=""></a>
					<a href="#" class="w50 f_right bb"><img src="images/cp5.jpg" alt=""></a>
					<a href="#" class="w50 f_right bb"><img src="images/cp6.jpg" alt=""></a>
				</div>
			</section>
			<section class="jd_product_box">
				<div class="title"><h3>京东超市</h3></div>
				<div class="con clearFix">
					<a href="#" class="w50 br f_left"><img src="images/cp1.jpg" alt=""></a>
					<a href="#" class="w50 bb f_right"><img src="images/cp2.jpg" alt=""></a>
					<a href="#" class="w50 f_right"><img src="images/cp3.jpg" alt=""></a>
				</div>
			</section>
		</div>
	</div>
	<script src="js/common.js"></script>
	<script src="js/index.js"></script>
</body>
</html>

base.css:

/*-------------------reset css---------------*/
*,
*::before,
*::after {
	margin: 0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	/*	点击高亮效果->移动端，<a>*/
	tap-highlight-color:transparent;
	-webkit-tap-highlight-color:transparent;
}
body{
	font-size: 14px;
	font-family: "Microsoft YaHei",sans-serif;
	color: #333;
}
ul,
ol {
	list-style: none;
}
a {
	text-decoration: none;
	color: #333;
}
input,textarea {
	border:none;
	outline:none;
	resize:none;
	/*元素的外观，none->设置成所有没有任何样式*/
	appearance:none;
	-webkit-appearance:none;
	/*-webkit-appearance:button;*/
}
/*--------------common css------------------*/
.f_left {
	float: left;
}
.f_right {
	float: right;
}
.clearFix::before,
.clearFix::after {
	content: "";
	display: block;
	visibility: hidden;
	height: 0;
	line-height: 0;
	clear: both;
}
.ml_10 {
	margin-left:10px; 
}
.mr_10 {
	margin-right:10px; 
}
.mt_10 {
	margin-top:10px; 
}
.mb_10 {
	margin-bottom:10px; 
}
/*精灵图公共样式*/
[class^="icon_"],
[class*=" icon_"] {
	background-image: url("../images/sprites.png");
	background-size: 200px 200px;
	background-repeat: no-repeat;
}
.w50{
	width: 50%;
	display: block;
}
.w50 img {
	width: 100%;
	display: block;
}
.bl {
	border-left:2px solid #ccc;
}
.bb {
	border-bottom:2px solid #ccc;
}
.br {
	border-right:2px solid #ccc;
}

index.css

body {
	background: #f5f5f5;
}
/*版心*/
.jd_container {
	width: 100%;
	min-width: 320px;
    max-width: 640px;
    /*background: pink;*/
    margin:0 auto;
    height: 1000px;
}
/*顶部搜索*/
.jd_search{
    width: 100%;
    height: 40px;    
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}
.jd_search > .jd_container_box {
	min-width: 320px;
    max-width: 640px;
	width: 100%;
	height: 40px;
	margin: 0 auto;
	background: rgba(201,21,35,0);
	position: relative;
}
.jd_search > .jd_container_box .icon_logo {
	position: absolute;
	top:0;
	left: 10px;
	height: 40px;
	width: 60px;
	background-position: 0 -103px;
}
.jd_search > .jd_container_box .login {
	position: absolute;
	top:0;
	right: 0;
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	width: 50px;
	color:#fff;
}
.jd_search > .jd_container_box form {
	width: 100%;
	padding-left: 80px;
	padding-right: 60px;
	position: relative;
}
.jd_search > .jd_container_box form input {
	width: 100%;
	height: 30px;
	background: #fff;
	margin-top:5px;
	border-radius: 15px;
	text-indent: 40px;
}
.jd_search > .jd_container_box form .icon_search {
	position: absolute;
	width: 20px;
	height: 20px;
	background-position: -60px -109px;
	top:10px;
	left:90px;
}
/*轮播图*/
  .jd_banner {
 	width: 100%;
 	overflow: hidden;
 	position: relative;
 }
 .jd_banner ul:first-child {
 	width: 1000%;
 	transform: translateX(-10%);
    -webkit-transform: translateX(-10%);
 }
 .jd_banner ul:first-child li {
 	width: 10%;
 	float: left;
 }
 .jd_banner ul:first-child li a{
 	display: block;
 	width: 100%;
 }
 .jd_banner ul:first-child li a img{
 	display: block;
 	width: 100%;
 } 
.jd_banner ul:last-child {
	position: absolute;
	bottom: 8px;
	left:50%;
	transform:translateX(-50%);
}
.jd_banner ul:last-child li{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border:1px solid #fff;
	margin-left:10px; 
	float: left;
}
.jd_banner ul:last-child li:nth-of-type(1){
	margin-left:0; 
}
.jd_banner ul:last-child li.now{
	background: #fff;
}  
/*分类*/
.jd_nav {
	width: 100%;
	padding-bottom: 20px;
	background: #fff;
	border-bottom: 1px solid #ccc;
}
.jd_nav ul {
	width: 100%;
}
.jd_nav ul li{
	width: 25%;
	float: left;
}
.jd_nav ul li a{
	width: 100%;
	display: block;
}
.jd_nav ul li a img{
	width: 100%;
	display: block;
	height: 50px;
	width: 50px;
	margin: 15px auto;
}
.jd_nav ul li a p{
	text-align: center;
	color:#666;
}
/*产品部分*/
.jd_product {
	width: 100%;
	margin-top: 10px;

}
.jd_product .jd_product_box {
	margin-top: 10px;
	background: #fff;
	width: 100%;
	box-shadow: 0 0 2px #ccc; 
}
.jd_product .jd_product_box .title {
	height: 30px;
	border-bottom: 1px solid #ccc;
	position: relative;
 }
.jd_product .jd_product_box .title.no_bottom {
	border-bottom: 0;
}
.jd_product .jd_product_box .title h3 {
	font-weight: normal;
	line-height: 30px;
	position: relative;
	padding-left:20px;
	color: #666; 
}
.jd_product .jd_product_box .title h3::before {
	content: "";
	width: 3px;
	height: 15px;
	background: red;
	position: absolute;
	top:50%;
	transform:translateY(-50%);
	left: 10px;
}
/*产品部分第一栏*/
.jd_product .title .icon_clock {
	position: absolute;
	width: 20px;
	height: 23px;
	float: left;
	background: url("../images/seckill-icon.png") center/ 20px 23px no-repeat;
	top:7px;
	left:10px;

}
.jd_product .title .product_decoration {
	position: absolute;
	top:10px;
	left:35px;
	font-size: 16px;
	color: #d8505c;
}
.jd_product .title .time {
	position: absolute;
	top:10px;
	left:110px;
}
.jd_product .title .time span {
	display: block;
	float: left;
	width: 13px;
	height: 20px;
	background: #000;
	color: #fff;
	margin-left: 5px;
	line-height: 20px;
	text-align: center;
}
.jd_product .title .time span:nth-child(3n) {
	background: #fff;
	color: #000;
	width: 3px;
}
.jd_product .title .more {
	right: 10px;
	position: absolute;
	top:10px;
}
/*产品第一部分主体*/
.con {
	width: 100%;
}
.jd_product_box:first-child .con {
	padding: 16px 0;

}
.con ul {
	width: 100%;
}
.con ul li {
	float: left;
	width: 33.333333%;
}
.con ul li a {
	width: 100%;
	display: block;
	border-right:1px solid #ccc;
}
.con ul li:last-child a {
	border:0;
}
.con ul li a img {
	display: block;
	width: 64%;
	margin:0 auto;
}
.con ul li .new-price {
	text-align: center;
	color: #d8505c;
}
.con ul li .old-price {
	text-align: center;
	text-decoration: line-through;
}

index.js

window.onload = function(){
	search();
	banner();
	download();
}
// 滑动滚动条使jdContainerBox颜色渐变深
var search = function() {
	var jdContainerBox = document.querySelector('.jd_container_box');
	var jdBanner = document.querySelector('.jd_banner');
	// 获取到轮播图的高度
	var jdBannerHeight = jdBanner.offsetHeight;
	window.onscroll = function(){
		// 获取滚动的高度
		var scrollTop = document.documentElement.scrollTop;
		// console.log(scrollTop);
		// 相比进行计算出透明度
		var optical = jdBannerHeight / scrollTop;
		if(scrollTop < jdBannerHeight) {
			jdContainerBox.style.background = 'rgba(201,21,35,'+ optical + ')';
		}else {
			jdContainerBox.style.background = 'rgba(201,21,35,'+ 0.85 + ')';
		}
	}
}
var banner = function() {
	// 获取元素
	var jdBanner = document.querySelector('.jd_banner');
	var screenWidth = jdBanner.offsetWidth;
	var imagesBox = jdBanner.querySelector('ul:nth-of-type(1)');
	var count = imagesBox.children.length;
	var pointBox = jdBanner.querySelector('ul:nth-of-type(2)');
	// 清除过渡和位移
	var clearTransition = function(){
		imagesBox.style.transition = 'none'; 
		imagesBox.style.webkitTransition = 'none'; 
		imagesBox.style.transform = 'translateX('+ (-index * screenWidth) + 'px)';
		imagesBox.style.wewbkitTransform = 'translateX('+ (-index * screenWidth) + 'px)';
	}
	//自动播放->index
	var index = 1;
	var bannerTimer = setInterval(function() {
		index++;	
		imagesBox.style.transform = 'translateX('+ -index * screenWidth + 'px)';
		imagesBox.style.wewbkitTransform = 'translateX('+ -index * screenWidth + 'px)';
		imagesBox.style.transition = 'all 0.5s';
		imagesBox.style.webkitTransition = 'all 0.5s';	
	},3000);
	imagesBox.addEventListener('transitionend',function(){
		if(index >= count-1) {
			index = 1;
			clearTransition();
		}
		if(index <= 0) {
			index = 8;
			clearTransition();
		}
		// 这里的索引是1-8
		setPoint();
	});
	// 轮播图下的小点
	var setPoint = function() {
		var liList = pointBox.children;
		for(var i = 0; i < liList.length; i++) {
			var obj = liList[i];
			obj.classList.remove("now");
		}
		liList[index-1].classList.add("now");
	}
	// 滑动事件
	var ismove = false;//防止用户不小心点了一下也当滑动处理
	var startX = 0;
	var distance = 0;
	imagesBox.addEventListener("touchstart",function(e){
		clearInterval(bannerTimer);
		startX = e.touches[0].clientX;
	});
	imagesBox.addEventListener("touchmove",function(e){
		var moveX = e.touches[0].clientX;
		distance = moveX-startX;
		// 一定要加上原有的定位
		imagesBox.style.transform = 'translateX('+ (-index * screenWidth + distance) + 'px)';
		ismove = true;
	});
	imagesBox.addEventListener("touchend",function(e){
		if(ismove) {
			if(Math.abs(distance) < screenWidth/5) {
				imagesBox.style.transform = 'translateX('+ (-index * screenWidth) + 'px)';
				imagesBox.style.transition = "all 0.5s";
				imagesBox.style.webkitTransition = "all 0.5s";
			}else {
				if(distance > 0) {
					index--;
					imagesBox.style.transform = 'translateX('+ (-index * screenWidth) + 'px)';
					imagesBox.style.transition = "all 0.5s";
					imagesBox.style.webkitTransition = "all 0.5s";
				}else {
					index++;
					imagesBox.style.transform = 'translateX('+ (-index * screenWidth) + 'px)';
					imagesBox.style.transition = "all 0.5s";
					imagesBox.style.webkitTransition = "all 0.5s";
				}
			}
		}	
		// 这里最好做一下重置
		distance = 0;
		startX = 0;
		ismove = false;
		bannerTimer = setInterval(function() {
		index++;	
		imagesBox.style.transform = 'translateX('+ -index * screenWidth + 'px)';
		imagesBox.style.wewbkitTransform = 'translateX('+ -index * screenWidth + 'px)';
		imagesBox.style.transition = 'all 0.5s';
		imagesBox.style.webkitTransition = 'all 0.5s';	
	},3000);
 	});
}
var download = function() {
	var time  = 2 * 3600;
	var spans = document.querySelector('.time').children;
	console.log(spans);
	var timer = setInterval(function(){
		time--;
		var h = Math.floor(time / 3600);
		var m = Math.floor(time % 3600 / 60);
		var s = Math.floor(time % 60);
		spans[0].innerHTML = Math.floor(h/10); 
		spans[1].innerHTML = Math.floor(h%10); 
		spans[3].innerHTML = Math.floor(m/10);
		spans[4].innerHTML = Math.floor(m%10);
		spans[6].innerHTML = Math.floor(s/10); 
		spans[7].innerHTML = Math.floor(s%10); 
	},1000)
}

Ron韦斯莱

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
移动端京东案例

效果展示：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, ma...
复制链接

扫一扫