前言
本次小米官网仿写复习了之前学到的知识点，运用HTML+CSS+JavaScript，通过这个项目，让我对使用这三者配合实现网页界面有了一个整体感知，此文记录项目完成过程中的几个功能的实现。
一、下载APP
需求
鼠标经过‘下载APP’时，从上往下慢慢显示二维码
做法
将二维码盒子及小三角定位到固定位置，起始高度设置为0，并添加过渡。鼠标经过时，显示小三角并更改二维码盒子高度。
效果如下:
#代码如下
HTML
<a href="" class="xiazai">下载app
<div class="download">
<img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
<div class="word">小米商城APP</div>
</div>
<div class="xsj"></div>
</a>
js
// 下载APP开始------------------------------------------------------------------------------
var xiazai = this.document.querySelector('.xiazai');
var download = xiazai.querySelector('.download');
var xsj = xiazai.querySelector('.xsj');
xiazai.addEventListener('mouseover',function(){
xsj.style.display = 'block';
download.style.height = '145px';
})
xiazai.addEventListener('mouseleave',function(){
xsj.style.display = 'none';
download.style.height = '0';
})
download.addEventListener('mouseover',function(){
xsj.style.display = 'block';
download.style.height = '145px';
})
download.addEventListener('mouseleave',function(){
xsj.style.display = 'none';
download.style.height = '0';
})
二、下拉菜单
需求
鼠标经过时，对应的内容板块下滑显示；鼠标离开菜单及对应板块时上滑隐藏；（服务、社区两个菜单没有对应板块）
做法
设置一个定位大盒子，包含每个小li对应的内容小盒子（这里有7个），大盒子初始高度为0
（笔者通过类名获取小li，当时未给最后两个li‘服务’和‘社区’设置类名，所以两个小li不参与鼠标经过事件）
-
循环遍历小li，给小li设置索引属性，给每个小li设置监听
---- 鼠标经过li ：
1、改变大盒子高度让其显示（大盒子添加过渡达到上下滑动动画效果）
2、获取当前小li索引值
3、遍历小盒子，显示小li索引值对应的小盒子
---- 鼠标离开li ：
1、隐藏对应小盒子
2、大盒子高度为0 -
鼠标经过大盒子：
改变大盒子高度让其显示
循环遍历小盒子，给小li设置索引属性，给每个小li设置监听
---- 鼠标经过小盒子：
1、获取当前小盒子索引值
2、遍历小li，更改小盒子对应小li的字体颜色
---- 鼠标离开小盒子：
1、获取当前小盒子索引值
2、遍历小li，还原小盒子对应小li的字体颜色
3、大盒子高度为0
#代码如下
<div class="sitenav-list">
<ul>
<li><a href="" class="ll">Xiaomi手机</a></li>
<li><a href="" class="ll">Redmi 红米</a></li>
<li><a href="" class="ll">电视</a></li>
<li><a href="" class="ll">笔记本</a></li>
<li><a href="" class="ll">平板</a></li>
<li><a href="" class="ll">家电</a></li>
<li><a href="" class="ll">路由器</a></li>
<li><a href="">服务</a></li>
<li><a href="">社区</a></li>
</ul>
</div>
<div class="sitetab">
<div class="tt">Xiaomi手机对应内容</div>
<div class="tt">Redmi 红米对应内容</div>
<div class="tt">电视对应内容</div>
<div class="tt">笔记本对应内容</div>
<div class="tt">平板对应内容</div>
<div class="tt">家电对应内容</div>
<div class="tt">路由器对应内容</div>
</div>
js
//获取元素
var sitenav_list = this.document.querySelector('.sitenav-list');
var ll = sitenav_list.querySelectorAll('.ll');
var sitetab = this.document.querySelector('.sitetab');
var tt = sitetab.querySelectorAll('.tt');
for (var i = 0 ; i < ll.length ; i++){ //循环遍历小li
ll[i].setAttribute('index',i); //设置索引属性
ll[i].addEventListener('mouseover',function(){ //设置监听 鼠标经过
var index = this.getAttribute('index'); //获取当前小li索引值
sitetab.style.height = '234px'; //设置大盒子高度让其显示
for (var i = 0; i < tt.length; i++){ //排他思想隐藏所有小盒子
tt[i].style.display = 'none';
}
tt[index].style.display = 'block'; //当前小li对应盒子显示
sitetab.style.borderBottom = '1px solid #e0e0e0';
sitetab.style.borderTop = '1px solid #e0e0e0';
})
ll[i].addEventListener('mouseleave',function(){ //监听鼠标离开
sitetab.style.height = '0'; //大盒子高度为0
sitetab.style.border = '0';
})
}
sitetab.addEventListener('mouseover',function(){ //大盒子设置监听 鼠标经过
sitetab.style.height = '234px';
sitetab.style.borderBottom = '1px solid #e0e0e0';
sitetab.style.borderTop = '1px solid #e0e0e0';
for (var i = 0; i < tt.length; i++){ //遍历小盒子
tt[i].setAttribute('index',i); //设置小盒子索引
tt[index].style.display = 'block';
tt[i].onmouseover = function() {
var index = this.getAttribute('index');
sitetab.style.height = '234px';
tt[index].style.height = '234px';
ll[index].style.color = '#ff6700'; //小盒子对应的小li字体颜色改变
}
tt[i].onmouseleave = function() {
var index = this.getAttribute('index');
sitetab.style.height = '0';
tt[index].style.height = '0';
ll[index].style.color = '#333';
}
}
})
sitetab.addEventListener('mouseleave',function(){
sitetab.style.border = '0';
sitetab.style.height = '0';
})
效果如下：
三、 小米侧边栏
需求
鼠标经过时，对应模块显示
做法
与下拉菜单类似，直接让模块显示，不需要过渡动画效果
效果如下：
四、登录注册界面
需求
登录注册页面切换时，需要左右滑动的效果，下划线也随之移动
做法
一个大盒子包含两个定位表单，添加overflow: hidden;
通过改变表单定位left值显示需要的页面；
下划线也是用一个小盒子做的，定位改变left值移动
#代码如下
// 登录注册切换开始---------------------------------------------------------------
//获取元素
var li_denglu = this.document.querySelector('.li-denglu'); //登录按钮
var li_zhuce = this.document.querySelector('.li-zhuce'); //注册按钮
var downline = this.document.querySelector('.downline'); //下划线盒子
var denglu = this.document.querySelector('.denglu'); //登录盒子
var zhuce = this.document.querySelector('.zhuce'); //注册盒子
li_denglu.addEventListener('click',function(){ //登录盒子添加监听 点击
li_denglu.className = 'tabli li-denglu black'; //登录字体变黑
li_zhuce.className = 'tabli li-zhuce'; //注册字体变灰
downline.style.left = '-2px'; //下划线
zhuce.style.display = 'none'; //隐藏注册界面
denglu.style.display = 'block'; //显示登录界面
denglu.style.animation = 'mover-l .3s linear 0s 1 forwards'; //为登录界面添加从右到左的动画
})
li_zhuce.addEventListener('click',function(){ //注册盒子添加监听 点击
li_zhuce.className = 'tabli li-zhuce black'; //注册字体变黑
li_denglu.className = 'tabli li-denglu'; //登录字体变灰
downline.style.left = '70px'; //下划线
denglu.style.display = 'none'; //隐藏登录界面
zhuce.style.display = 'block'; //注册登录界面
zhuce.style.animation = 'movel-r.3s linear 0s 1 forwards'; //为注册界面添加从左到右的动画
})
效果如下：
五、lation实现界面切换
需求
主页点击登录切换到登录页面，点击注册切换到注册页面
做法
主页设置两个表单按钮，便于提交参数到第二页面
第二页面接受判断传递过来的参数
如果是注册的参数，则添加一个手动点击注册事件
# 代码如下
主页HTML界面
<form action="denglu.html"> <!-- 将表单数据提交到第二页面denglu.html -->
<input type="submit" name="denglu" value="登录">
<span class="sep">|</span>
<input type="submit" name="zhuce" value="注册">
</form>
第二页面js
// 页面跳转
//console.log(this.location.search);
var parms = this.location.search.substring(1); //获取页面地址及参数
var arr = parms.split('='); //利用split方法将参数用=隔开
//因为用了手动点击事件，所以需要写到注册监听事件之后
if(arr[0] == 'zhuce') { //判断参数是否是‘zhuce’ （input的name属性）
// console.log('000');
li_zhuce.click(); //如果是，则手动点击当前页面注册按钮切换到注册页面
zhuce.style.animation = ''; //取消注册页面显示时的动画
}
总结
HTML+CSS+JavaScript 三者互相搭配才能将页面效果完美展示出来，先将结构梳理清楚，合理利用类名和id等标识，在书写js的时候才不会混乱。
以上便是笔者在项目中实现功能的方法，这些方法并不是最优，希望各位前辈和伙伴能指正不足，如有更优写法欢迎在评论区分享！
谢谢观看！ヾ(≧∇≦*)ゝ
1738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
