本文目录：
一、浮动与定位复习
- 浮动与相对定位
```js
// 1.两者均参与布局
// 2.主浮动布局, 相对布局辅助完成布局微调
// 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局
```
// 1.两者均参与布局
// 2.主浮动布局, 相对布局辅助完成布局微调
// 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局
```
- 浮动与绝对定位
```js
// 1.只保留绝对定位布局
// 2.脱离文档流的盒子宽可以交于内容撑开
```
// 1.只保留绝对定位布局
// 2.脱离文档流的盒子宽可以交于内容撑开
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动与定位</title> <style> .box { /* 相对定位 */ position: relative; /* 绝对定位 */ position: absolute; /* 固定定位 */ position: fixed; } </style> <style> ul { margin: 0; padding: 0; list-style: none; } li { float: left; cursor: pointer; border-bottom: 2px solid orange; /*padding: 0 5px;*/ margin: 0 5px; } li:first-child { /*1.浮动与相对定位结合使用*/ /*盒子采用的是浮动布局为主, 相对定位可以辅助其子级绝对定位布局, 也可以在浮动布局基础上微调 */ /*position: relative;*/ /*采用相对定位布局, 在浮动布局基础上微调, 不影响兄弟盒子的布局*/ /*left: 10px;*/ /*采用盒模型布局, 在浮动布局基础上微调, 影响兄弟盒子的布局*/ /*margin-left: 10px;*/ } li { /*1.浮动与绝对定位结合使用*/ /*盒子采用绝对定位布局, 浮动布局失效 */ /*为什么: 因为两者都是脱离文档流, 绝对定位为完全脱离文档流*/ position: absolute; } li:last-child { left: 100px; } /*脱离文档流: 盒子的宽度可以由内容撑开*/ .ele { /* 100px;*/ height: 100px; background-color: pink; /*float: right;*/ position: absolute; right: 0; } </style> </head> <body> <!--布局: 1.盒模型布局 | 2.浮动布局 | 3.定位布局--> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <div class="ele">12345 67890</div> </body> </html>
二、小米菜单案例
- 默认活跃状态
```js
// 1.将初始的li设置一个active类名(拥有该类名就拥活跃状态表现的属性)
```
// 1.将初始的li设置一个active类名(拥有该类名就拥活跃状态表现的属性)
```
- 更改活跃状态
```js
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;
}
}
```
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逻辑代码块如果重复命名, 要么报重命名错误, 要么数据覆盖出现变量污染
// 每一个js逻辑代码块可以通过匿名函数的自调用完成局部作用域
(function(){
let a = 10;
})()
(function(){
let a = 20;
})()
```
// 不要去使用全局变量, 不同的js逻辑代码块如果重复命名, 要么报重命名错误, 要么数据覆盖出现变量污染
// 每一个js逻辑代码块可以通过匿名函数的自调用完成局部作用域
(function(){
let a = 10;
})()
(function(){
let a = 20;
})()
```
- 根据数据与页面结构,动态渲染数据
```html
<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>
```
<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>
```
```js
let data = [
[
{
title: "热门1",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
...还有三个{}
],
...还有三个[]
];
```
let data = [
[
{
title: "热门1",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
...还有三个{}
],
...还有三个[]
];
```
```js
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;
}
}
```
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;
}
}
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米菜单案例</title> <style> body, h2, ul { margin: 0; padding: 0; } ul { list-style: none; } a { color: black; text-decoration: none; } .title { background-color: #ddd; overflow: hidden; line-height: 60px; } .title h2 { float: left; } .title ul { float: right; } .title li { float: left; margin: 0 5px; line-height: 23px; margin-top: 20px; cursor: pointer; } .title li.active { color: #FF6700; border-bottom: 2px solid #FF6700; transition: .2s; } </style> <style> .main { overflow: hidden; } .main a { display: block; width: 300px; height: 400px; text-align: center; } .main li { float: left; width: 300px; height: 400px; background-color: orange; margin-right: 14px; } .main img { width: 260px; } </style> </head> <body> <div class="wrapper"> <div class="title"> <h2>搭配</h2> <ul> <li class="active">热门</li> <li>耳机音响</li> <li>电源</li> <li>电池与储蓄卡</li> </ul> </div> <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> <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> <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> <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> </div> </body> <!--设置导航--> <script> (function () { // 制造数据(模拟后台请求得到的) let data = [ [ { title: "热门1", img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg", info: "这是热门" }, { title: "热门2", img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg", info: "这是热门" }, { title: "热门3", img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg1e99a342", info: "这是热门" }, { title: "热门4", img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg", info: "这是热门" } ], [ { title: "耳机1", img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg", info: "这是耳机" }, { title: "耳机2", img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg", info: "这是耳机" }, { title: "耳机3", img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg", info: "这是耳机" }, { title: "耳机4", img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg", info: "这是耳机" } ], [], [] ]; let lis = document.querySelectorAll('.title li'); // 设置一个记录活跃li索引的状态变量 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; // 更新数据 updateData(i); } } // 更新数据 let main_lis = document.querySelectorAll('.main li'); // 分析数据结构与页面结构,将指定数据渲染到指定位置 function updateData(index) { let dataArr = data[index]; // let count = 0; // for (dataObj of dataArr) { // // console.log(dataObj.title); // let h2 = main_lis[count].querySelector('h2'); // h2.innerText = dataObj.title; // let img = main_lis[count].querySelector('img'); // img.setAttribute('src', dataObj.img_url); // let p = main_lis[count].querySelector('p'); // p.innerText = dataObj.info; // count++; // } 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; } } })() </script> <!--完成数据更新--> <script> (function () { let lis = document.querySelectorAll('.main li'); })() </script> <!-- <script> var lis = document.querySelectorAll('.title li'); for (let i = 0; i < lis.length; i++) { lis[i].onmouseover = function () { // 悬浮的li变成活跃状态, 之前活跃的li取消活跃状态 // 移除所有的 clearAllClassName() // 添加自己的 this.className = "active" } } function clearAllClassName() { for (li of lis) { li.className = ""; } } </script> --> </html>
三、轮播图
```js
// 下一张
right_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 下一张
right_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// active_index 记录了当前活跃状态的索引, 且所有逻辑共有
// 无限录播时考虑索引边界切换的问题
```
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// active_index 记录了当前活跃状态的索引, 且所有逻辑共有
// 无限录播时考虑索引边界切换的问题
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style > * { /*不允许选择文本, 网页文本不能负责*/ user-select: none; } body, ul { margin: 0; padding: 0; list-style: none; } .scroll { width: 1226px; height: 460px; margin: 0 auto; background-color: orange; position: relative; cursor: pointer; } .scroll_view { width: 100%; height: 100%; position: relative; } .scroll_view li { background: red; width: 100%; height: 100%; font: normal 100px/460px 'STSong'; text-align: center; position: absolute; top: 0; left: 0; opacity: 0; } .scroll_view li.active { opacity: 1; transition: .5s; } .left { position: absolute; top: 170px; left: 0; background-color: #eee; font-size: 100px; } .left:hover, .right:hover { cursor: pointer; background-color: #333; } .right { position: absolute; top: 170px; right: 0; background-color: #eee; font-size: 100px; } .scroll_tag { position: absolute; right: 10px; bottom: 10px; } .scroll_tag li { width: 10px; height: 10px; border-radius: 50%; background-color: #333; border: 3px solid #ddd; float: left; margin: 0 10px; } .scroll_tag li.active { background-color: #ccc; border: 3px solid #333; } </style> </head> <body> <div class="scroll"> <ul class="scroll_view"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class="scroll_toggle"> <li class="left"><</li> <li class="right">></li> </ul> <ul class="scroll_tag"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script> (function () { let left_btn = document.querySelector('.left'); let right_btn = document.querySelector('.right'); let img_lis = document.querySelectorAll('.scroll_view li'); let tag_lis = document.querySelectorAll('.scroll_tag li'); let scroll = document.querySelector('.scroll'); // 定时器 let timer = 0; // 记录活跃状态的索引变量 let active_index = 0; // 下一张 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"; }; // 上一张 left_btn.onclick = function () { // 清除之前活跃的图片和tag img_lis[active_index].className = ""; tag_lis[active_index].className = ""; // 索引切换(更新活跃索引) // 安全性: 第一张的前一张应该是最后一张 if (active_index == 0) active_index = 5; active_index--; // 设置将要活跃的图片和tag img_lis[active_index].className = "active"; tag_lis[active_index].className = "active"; }; // 自动轮播 function autoScroll() { timer = setInterval(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"; }, 1500); } // 加载页面就只执行一次,打开自动轮播 autoScroll(); // 鼠标悬浮轮播图停止自动轮播 scroll.onmouseenter = function () { clearInterval(timer) }; // 鼠标移开重新开启自动轮播 scroll.onmouseleave = function () { autoScroll(); }; // tag点击对应的图片切换 for (let i = 0; i < tag_lis.length; i++) { tag_lis[i].onclick = function () { // console.log(i); // 清除之前活跃的图片和tag img_lis[active_index].className = ""; tag_lis[active_index].className = ""; // 更新活跃索引 active_index = i; // 设置将要活跃的图片和tag img_lis[active_index].className = "active"; tag_lis[active_index].className = "active"; } } })() </script> </html>
四、滚动轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动轮播</title> <style> body, ul { margin: 0; padding: 0; list-style: none; user-select: none; } .wrapper { width: 400px; height: 240px; background-color: orange; margin: 50px auto; position: relative; overflow: hidden; } /* 滚得的标签是ul, 带动着4个li同步运动 */ .scroll_view { width: 1600px; /*利用绝对定位完成运动*/ position: absolute; top: 0; /*left: -400px;*/ left: 0; /*transition: 1s;*/ } .scroll_view li { width: 400px; height: 240px; font: normal 80px/240px 'STSong'; text-align: center; float: left; } .li1 { background-color: pink } .li2 { background-color: deeppink } .li3 { background-color: lightpink } .li4 { background-color: hotpink} .left { position: absolute; top: 100px; left: 0; background-color: #eee; font-size: 30px; } .left:hover, .right:hover { cursor: pointer; background-color: #333; } .right { position: absolute; top: 100px; right: 0; background-color: #eee; font-size: 30px; } .scroll_tag { position: absolute; right: 10px; bottom: 10px; } .scroll_tag li { width: 10px; height: 10px; border-radius: 50%; background-color: #333; border: 3px solid #ddd; float: left; margin: 0 10px; } .scroll_tag li.active { background-color: #ccc; border: 3px solid #333; } </style> </head> <body> <div class="wrapper"> <ul class="scroll_view"> <li class="li1">1</li> <li class="li2">2</li> <li class="li3">3</li> <li class="li4">4</li> </ul> <ul class="scroll_toggle"> <li class="left"><</li> <li class="right">></li> </ul> <ul class="scroll_tag"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script> (function () { let scroll_view = document.querySelector('.scroll_view'); let left_btn = document.querySelector('.left'); let right_btn = document.querySelector('.right'); let tag_lis = document.querySelectorAll('.scroll_tag li'); right_btn.onclick = function () { let total_lenth = 400; let count = 0; let step = 8; let timer = setInterval(function () { // 通过滚动的距离映射出所在的图片索引 let index = parseInt(-scroll_view.offsetLeft / total_lenth); index += 1; console.log(index); // 临界点, 往右4 if (index == 4) { clearInterval(timer); return; } // 0+1 ==> 1 // 1+1 ==> 2 // 2+1 ==> 3 tag_lis[index - 1].className = ""; tag_lis[index].className = "active"; scroll_view.style.left = scroll_view.offsetLeft - step + 'px'; count++; if (count >= total_lenth / step) { clearInterval(timer) } }, 10); }; left_btn.onclick = function () { let total_lenth = 400; let count = 0; let step = 8; let timer = setInterval(function () { // 要偏移坐标系, 要加上一个宽度400 total_lenth // 要处理第一次偏移bug, 少加上8 step let index = parseInt((-scroll_view.offsetLeft + 392) / total_lenth); console.log(index); // 处理第一次偏移bug // 3 => 2 // 2 => 1 // 1 => 0 // 临界点, 往左0 if (index == 0) { clearInterval(timer); return; } // if (index == 4) index = 3; tag_lis[index].className = ""; tag_lis[index - 1].className = "active"; scroll_view.style.left = scroll_view.offsetLeft + step + 'px'; count++; if (count >= total_lenth / step) { clearInterval(timer) } }, 10); } })() </script> </html>