1.浮动与定位结合使用
- 浮动与相对定位
// 1.两者均参与布局
// 2.主浮动布局, 相对布局辅助完成布局微调
// 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局
- 浮动与绝对定位
// 1.只保留绝对定位布局
// 2.脱离文档流的盒子宽可以交于内容撑开
2.小米更新数据案例
- 默认活跃状态
// 1.将初始的li设置一个active类名(拥有该类名就拥活跃状态表现的属性)
- 更改活跃状态
let active_index = 0; // 活跃状态的索引
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 清除之前活跃的
lis[active_index].className = "";
// 设置自身为活跃
this.className = "active";
// 更新活跃索引
active_index = i;
}
}
- 作用域(不同的js逻辑代码块)
// 不要去使用全局变量, 不同的js逻辑代码块如果重复命名, 要么报重命名错误, 要么数据覆盖出现变量污染
// 每一个js逻辑代码块可以通过匿名函数的自调用完成局部作用域
(function(){
let a = 10;
})()
(function(){
let a = 20;
})()
- 根据数据与页面结构,动态渲染数据
<ul class="main">
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
...
</ul>
let data = [
[
{
title: "热门1",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
...还有三个{}
],
...还有三个[]
];
let main_lis = document.querySelectorAll('.main li');
// 分析数据结构与页面结构,将指定数据渲染到指定位置
function updateData(index) {
let dataArr = data[index];
for (let i = 0; i < dataArr.length; i++) {
let h2 = main_lis[i].querySelector('h2');
h2.innerText = dataArr[i].title;
let img = main_lis[i].querySelector('img');
img.setAttribute('src', dataArr[i].img_url);
let p = main_lis[i].querySelector('p');
p.innerText = dataArr[i].info;
}
}
3.小米轮播图分析
// 下一张
right_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// active_index 记录了当前活跃状态的索引, 且所有逻辑共有
// 无限录播时考虑索引边界切换的问题