小A一轮考核
下面是一轮考核中我觉得值得记录的部分内容，还有些来不及打上去了
提示：以下是本篇文章正文内容，下面案例可供参考
下拉菜单注意
hover要设置在父级,如果设置在span元素上,下拉菜单可以出现但是无法碰到
原因:鼠标移入ul标签后,ul标签显示,但是其区域不属于span标签元素。
解决方案:hover设置在父级,鼠标移入ul标签后,其区域仍属于父级,所以可以显示
注意问题:<ul>和父级中不要有空隙;<ul>和<span>是同级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
.test {
width: 200px;
height: 50px;
background-color: #ddd;
/* 给dropdown定位用 */
position: relative;
}
.dropdown {
position: absolute;
top: 100%;
width: 100%;
background-color: aqua;
display: none;
}
span {
display: block;
width: 100%;
height: 100%;
/* 居中文字 */
display: flex;
justify-content: center;
align-items: center;
}
/*解决问题*/
.test:hover > .dropdown {
display: block;
}
.dropdown > li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="test">
<span>显示</span>
<ul class="dropdown">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</div>
</body>
</html>
js对video的基础操作
1.video的方法：video.pause() video.play()
2.video的属性：video.duration video.volume video.currentTime
3.video的事件：video.onplaying video.onpause
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
}
.box {
width: 800px;
height: 100vh;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="box">
<video src="./video/littleA.mp4" id="video" controls></video>
进度条<input type="range" max="100" value="0" id="videoTime" />
<input
type="button"
value="暂停"
id="pause"
style="width: 50px; height: 50px"
/>
<input
type="button"
value="播放"
id="play"
style="width: 50px; height: 50px"
/>
音量<input type="range" max="100" value="0" id="videoVolume" />
</div>
<script>
var video = document.getElementById("video");
var videoTime = document.getElementById("videoTime");
var btnPause = document.getElementById("pause");
var btnPlay = document.getElementById("play");
var videoVolume = document.getElementById("videoVolume");
//进度条
videoTime.onmouseup = function () {
console.log(video.duration);
//关键可以直接复制去用
video.currentTime = (this.value * video.duration) / 100;
video.play();
};
//音量
videoVolume.onmouseup = function () {
console.log(video.volume);
//关键可以直接复制去用
video.volume = this.value / 100;
};
//暂停开始
btnPause.onclick = function () {
video.pause();
};
btnPlay.onclick = function () {
video.play();
};
//video事件
video.onplaying = function () {
console.log("正在播放");
};
video.onpause = function () {
console.log("已暂停");
};
</script>
</body>
</html>
轮播图
假设三张图片要展示 （每次展示一张，分成三组）
基础html和css（代码如下）
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: aquamarine;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
}
.loop {
width: 500%;
display: flex;
position: relative;
left: -500px;
}
.itm {
width: 500px;
height: 500px;
color: white;
font-size: 250px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="wrap">
<div class="loop">
<div class="itm" style="background-color: #042940">3</div>
<div class="itm" style="background-color: #042940">1</div>
<div class="itm" style="background-color: #042940">2</div>
<div class="itm" style="background-color: #042940">3</div>
<div class="itm" style="background-color: #042940">1</div>
</div>
</div>
</body>
1:前后要插入一张图片实现无缝轮播的关键
2:播完最后一张图片时要马上执行回调函数实现无缝轮播的关键
3.加节流阀，next（）和pre（）函数
4.移动函数的包装
5.设置一个index，下一个和上一个和轮播点靠它实现统一
首先看移动函数包装（代码如下）：
解释和注意点我都写里面了，有匀速运动和减速运动
//移动函数
var smoothMove = function (el, target, speed, callback) {
clearInterval(el.loopTimer);
//判断向左走还是右走,速度保持不变
var step = target < el.offsetLeft ? -speed : speed;
el.loopTimer = setInterval(function () {
//el距离目标的距离result
var result = target - el.offsetLeft; //关键:它们的差值不会超过speed,有这个speed设多少都可以
// 结束条件,result小于step时结束
if (Math.abs(result) <= Math.abs(step)) {
clearInterval(el.loopTimer);
//结束时距离目标还有一段距离,如果再移动step就会超过,所以直接等于目标
el.style.left = target + "px";
console.log(el.offsetLeft);
//执行回调函数
if (callback) {
callback();
}
} else {
el.style.left = el.offsetLeft + step + "px";
console.log(el.offsetLeft);
}
}, 20);
};
var slowMove = function (el, target, callback) {
clearInterval(el.loopTimer);
el.loopTimer = setInterval(function () {
//速度逐渐减小,判断向左走还是向右走
var step = (target - el.offsetLeft) / 10;
//关键:如果小于一个像素,就不会移动,所以这里要取整;最后是1px 1px的移动
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//结束条件 el.offsetLeft == target
if (el.offsetLeft == target) {
clearInterval(el.loopTimer);
// 执行回调函数
if (callback) {
callback();
}
} else {
el.style.left = el.offsetLeft + step + "px";
console.log(el.offsetLeft);
}
}, 20);
};
next（）和pre（）函数和节流阀
回调函数是关键，elWidth是每组展示图片的宽度（此处是500）
const loop = document.getElementsByClassName("loop")[0];
const looplist =document.getElementsByClassName("loop")[0].children.length;
var index = 1; //索引
var key = true; //节流阀:防止点击过快动画未执行完
function next(elWidth) {
if (key) {
key = false;
index++;
// 如果移动到最后一个,此时最后一个是数字1,移动函数执行完后,执行回调函数,瞬间切到同样是数字1的第二张
// 然后下一次执行next()时,后面接着就是数字2
if (index == looplist - 1) {
smoothMove(loop, index * -elWidth, 20, function () {
index = 1;
loop.style.left = `${index * -elWidth}px`;
key = true;
console.log(index);
});
} else {
smoothMove(loop, -index * elWidth, 20, function () {
key = true;
}),
console.log(index);
}
}
}
function pre(elWidth) {
if (key) {
key = false;
index--;
if (index == 0) {
smoothMove(loop, -index * elWidth, 20, function () {
index = looplist - 2;
loop.style.left = `${index * -elWidth}px`;
key = true;
console.log(index);
});
} else {
smoothMove(loop, -index * elWidth, 20, function () {
key = true;
}),
console.log(index);
}
}
}
轮播点的实现
和index统一是关键
一些事件
滚轮事件：onmousewheel
IE、chrome浏览器使用的是wheelDelta，并且值为“正负150”
火狐浏览器使用的是detail,其值为“正负3”
滚动条事件：onscroll
获取滚动条位置document.documentElement.scrollTop
页面可视高度document.documentElement.clientHeight
document.body.clientHeight与document.documentElement.clientHeight不一定一样
翻转动画
1.position层级关系
2.backface-visibility: hidden
给底下一层设置backface-visibility: hidden，并且默认属性是transform: rotateY(180deg)，这样就会隐藏底下一层
子元素的层级不可能在父元素层级下
下面是翻转动画代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(14, 14, 14, 0.623);
}
.filter {
border: 1px rgba(255, 255, 255, 0.1) solid;
background-color: rgba(255, 255, 255, 0.123);
border-radius: 10px;
backdrop-filter: blur(20px);
}
.box {
height: 500px;
width: 300px;
position: relative;
}
.front {
height: 100%;
width: 100%;
transition: 0.5s;
backface-visibility: hidden;
z-index: 3;
position: absolute;
}
.back {
height: 100%;
width: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
transition: 0.5s;
z-index: 1;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="front filter">前面</div>
<div class="back filter">后面</div>
</div>
</body>
<script>
var box = document.getElementsByClassName("box")[0];
var front = document.getElementsByClassName("front")[0];
var back = document.getElementsByClassName("back")[0];
var key_rotate = true;
box.onclick = function () {
if (key_rotate) {
front.style.transform = "rotateY(180deg)";
back.style.transform = "rotateY(360deg)";
key_rotate = false;
} else {
front.style.transform = "rotateY(0deg)";
back.style.transform = "rotateY(180deg)";
key_rotate = true;
}
};
</script>
</html>
扫一扫
2654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
