前言
小米官网原生代码的开发花了我一个多星期的时间,首页基本布局花费三天时间,js代码书写两天,登录、注册页面,布局花费了一天时间,js书写花费了两天时间,接下来我就给大家展示一下我的制作过程,因为总体的代码篇幅过长,就不做过多展示,该篇我就展示总体的布局及部分带有js的模块。
一、总体布局
首页的模块主要分为五大块,头部导航、主导航栏、商品展示、底部导航、底部声明、右侧导航栏
布局中多次使用浮动、定位及flex布局。注意清除浮动,及定位时的子绝父相的问题,还有一点值得注意的是,使用flex布局后使用js进行显示隐藏时,显示要用display:flex;不然显示出来布局会乱。
二、部分js模块展示
1.头部导航栏的下拉模块
值得注意的是将code盒子高度设置为0时,要给其一个overflow:hidden;才能将其内容完全隐藏,还有盒子三角应该在code盒子内,用一个透明盒子将三角装着并给code一个#fff的背景颜色,造成一个三角在盒子外的既视感。剩余的js部分就十分简单了。
HTML:
<li><a href="javascript:;" class="cod">
下载app
<!-- js二维码 -->
<div class="code">
<span class="iconfont">
<div></div>
</span>
<div class="cod_bd">
<img src="img/xiaomi-android.png">
<p>小米商城APP</p>
</div>
</div>
</a>
</li>
css:
/* js二维码 */
.code {
overflow: hidden;
position: absolute;
z-index: 1;
transform: translateX(-35px);
height: 0px;
top: 15px;
transition: height .3s;
}
.cod_bd {
background-color: #fff;
border: 1px solid #e0e0e0;
}
.code img {
width: 90px;
height: 90px;
margin: 15px 15px 0 15px;
}
.code p {
color: #757575;
margin: 0 15px;
font-size: 15px;
}
.code span {
display: block;
color: #fff;
height: 25px;
background-color: transparent;
text-align: center;
}
.code span div {
display: inline-block;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #fff transparent;
z-index: 2;
}
js:
// js二维码 通过过渡实现缓动效果
var code = document.querySelector('.code');
var cod = document.querySelector('.cod');
var cod_img = cod.querySelector('img');
cod.addEventListener('mouseenter', function() {
code.style.height = 172 + 'px';
});
cod.addEventListener('mouseleave', function() {
code.style.height = 0 + 'px';
});
效果图:
2.轮播图和左侧导航栏的布局
轮播图和左侧导航栏都是用的绝对定位,所以在html结构中轮播图代码段应在左侧导航的上方,不然左侧导航栏会被轮播图覆盖。左侧导航的js就是用tab切换的方法(用自定义属性去绑定相应的模块)去对相应的模块进行显示隐藏,轮播图也是常见的布局和方法。最值得注意的还是布局结构。
3.右侧导航栏
右侧导航栏就是用固定定位定于右侧,该模块核心是利用scroll来进行判断对返回按钮的显示与隐藏,及其点击缓动返回顶部。
html:
<!-- 右侧边导航栏 -->
<div class="navtimes">
<ul>
<li><a href="javascript:;" class="iconfont icon-weibiaoti1">手机APP</a>
<div class="code code_r">
<span>
<div></div>
</span>
<div class="cod_bd">
<img src="img/xiaomi-android.png">
<p>扫码领取新<br> 人百元福利
</p>
</div>
</div>
</li>
<li><a href="javascript:;" class="iconfont icon-geren">个人中心</a></li>
<li><a href="javascript:;" class="iconfont icon-weixiubanshou">售后服务</a></li>
<li><a href="javascript:;" class="iconfont icon-wodekefu">人工客服</a></li>
<li><a href="javascript:;" class="iconfont icon-gouwuche">购物车</a></li>
</ul>
<div class="backTop">
<a href="javascript:;" class="iconfont icon-huidaodingbu">回顶部</a>
</div>
</div>
css:
/* 右侧导航栏 */
.navtimes {
text-align: center;
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.navtimes ul {
border: 1px solid #cfccca;
}
.navtimes li,
.navtimes .backTop {
width: 84px;
height: 84px;
line-height: 120px;
background-color: #fff;
position: relative;
}
.navtimes a {
color: #333;
}
.navtimes li a:hover,
.navtimes .backTop a:hover {
color: #ff6700;
}
.navtimes li:nth-of-type(-n+4) {
border-bottom: 1px solid #cfccca;
}
.navtimes .backTop {
margin-top: 20px;
border: 1px solid #cfccca;
display: none;
}
.navtimes a:before {
position: absolute;
top: -30px;
left: 30%;
font-size: 30px;
height: 0px;
}
js:
// 返回顶部
var backTop = document.querySelector('.backTop');
var advertising = document.querySelector('.advertising');
document.addEventListener('scroll', function() {
if (window.pageYOffset >= advertising.offsetTop) {
backTop.style.display = 'block';
} else {
backTop.style.display = 'none';
}
});
backTop.addEventListener('click', function() {
animater(window, 0);
});
function animater(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - window.pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (window.pageYOffset == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
// obj.style.left = obj.offsetLeft + step + 'px';
window.scroll(0, window.pageYOffset + step);
}, 15);
}
效果图:
4.小技巧
对于盒子样式布局差不多的都用同一类名,要对其中之一进行修改时可以用选择器或者多类名进行设置。
总结
根据js来修改css、html是真的麻烦!!