目录
1.星空背景
<!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;
}
html, body{
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
}
span{
/* 行内元素无法设置宽高，转换元素显示模式为inline-block */
display: inline-block;
width: 30px;
height: 30px;
background: url(images/star.png) no-repeat;
background-size: 100% 100%;
/* 1.告诉系统需要执行哪个动画以及动画时长等 */
/* animation：动画名称 动画时长 往返动画 执行次数 */
/* alternate：往返动画 infinite：无限执行 */
animation: flash 1s alternate infinite;
position: absolute;
}
/* 2.定义星星闪烁动画 */
@keyframes flash{
from{
/* 隐藏元素 */
opacity: 0;
}
to{
/* 显示元素 */
opacity: 1;
}
}
/* 当鼠标悬浮时，放大并旋转小星星 */
span:hover{
/* scale(3, 3)：宽度与高度都增大3倍 rotate(180deg)：顺时针旋转180度*/
transform: scale(3, 3) rotate(180deg);
/* 设置过渡动画：过渡属性 过渡时长 */
transition: all 1s;
}
</style>
</head>
<body>
<span></span>
<script>
// 1.获取屏幕的宽高
let { width, height } = getScreen();
function getScreen() {
let width, height;
if (window.innerWidth) {
width = window.innerWidth;
height = window.innerHeight;
} else if (document.compatMode === "BackCompat") {
width = document.body.clientWidth;
height = document.body.clientHeight;
} else {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
return {
width: width,
height: height
}
}
// 2.创建星星
for(let i=0; i<200; i++){
// 2.1 添加星星
let oSpan = document.createElement("span");
document.body.appendChild(oSpan);
// 2.2 随机位置（不能超过网页/屏幕的宽高）
// Math.random()：生成0-1的随机数
let x = Math.random() * width;
let y = Math.random() * height;
oSpan.style.left = x + "px";
oSpan.style.top = y + "px";
// 2.3 随机缩放(星星大小不一)
let scale = Math.random() * 2;
oSpan.style.transform = `scale(${scale}, ${scale})`;
// 2.4 随机动画延迟(星星闪烁不一)
let rate = Math.random() * 2;
oSpan.style.animationDelay = rate + "s";
}
</script>
</body>
</html>2.弹性导航
<!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>弹性导航</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 900px;
height: 63px;
border: 1px solid #000;
background: url("images/doubleOne.png") no-repeat right center;
margin: 100px auto;
position: relative;
}
ul{
list-style: none;
position: relative;
z-index: 999;
}
ul>li{
float: left;
width: 88px;
height: 63px;
/* border: 1px solid black; */
line-height: 63px;
text-align: center;
}
span{
display: inline-block;
width: 88px;
height: 63px;
background: url("images/tMall.png") no-repeat;
/* 子绝父相 */
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>双11狂欢</li>
<li>服装会场</li>
<li>数码家电</li>
<li>家具建材</li>
<li>母婴童装</li>
<li>手机会场</li>
<li>美妆会场</li>
<li>进口会场</li>
<li>飞猪旅行</li>
</ul>
<span></span>
</div>
<!-- 引入js文件（封装了匀速动画与缓速动画） -->
<script src="js/animation2.js"></script>
<script>
// 获取元素
let oLi = document.querySelectorAll("ul>li");
let oSpan = document.querySelector("span");
// 遍历列表元素
for(let item of oLi){
// 绑定点击事件
item.onclick = function(){
// offsetLeft：获取 元素 到 第一个定位祖先元素之间的 偏移位
// oSpan.style.left = this.offsetLeft + "px";
easeAnimation(oSpan, { "left": this.offsetLeft})
}
}
</script>
</body>
</html>3.百度登录
- 需求描述
- 点击登录按钮时，弹出登录框，并且设置其他按钮不可用；
- 当鼠标按下移动时，登录界面的位置跟着随之移动；
- 当取消按下鼠标后，登录界面的位置停止随之移动；
<!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>百度登录</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
p{
background: deepskyblue;
text-align: center;
}
/* 相当于添加了一层蒙版，当点击登录弹出登录框后，设置其他按钮不可用 */
.mask{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
display: none;
}
.login{
width: 400px;
height: 300px;
background: burlywood;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
cursor: move;
}
.login>span{
display: inline-block;
width: 50px;
height: 50px;
background: pink;
position: absolute;
top: 0;
right: 0px;
}
</style>
</head>
<body>
<p>登录</p>
<a href="http://www.it666.com">官网</a>
<!-- 蒙版 -->
<div class="mask"></div>
<!-- 登录界面 -->
<div class="login">
<span></span>
</div>
<script>
// 1.拿到需要操作的元素
let oBtn = document.querySelector("p");
let oMaskDiv = document.querySelector(".mask");
let oLoginDiv = document.querySelector(".login");
let oCloseBtn = document.querySelector("span");
// 2.绑定点击事件
oBtn.onclick = function(){
oLoginDiv.style.display = "block";
oMaskDiv.style.display = "block";
}
oCloseBtn.onclick = function () {
oLoginDiv.style.display = "none";
oMaskDiv.style.display = "none";
}
// 3.监听登录框的 按下鼠标与鼠标移动事件
// 3.1 监听登录框的 按下鼠标事件
oLoginDiv.onmousedown = function (event) {
event = event || window.event;
// 计算固定不变的距离
// offsetLeft/offsetTop：获取 元素 到 第一个定位祖先元素之间的 偏移位
let x = event.pageX - oLoginDiv.offsetLeft;
let y = event.pageY - oLoginDiv.offsetTop;
// 3.2 监听 鼠标移动事件
oLoginDiv.onmousemove = function (event) {
event = event || window.event;
// 1.计算移动之后的偏移位
let offsetX = event.pageX - x;
let offsetY = event.pageY - y;
// 2.重新设置登录框的位置
oLoginDiv.style.left = offsetX + "px";
oLoginDiv.style.top = offsetY + "px";
}
}
// 4.监听登录框的 取消按下鼠标事件
oLoginDiv.onmouseup = function () {
// 清空鼠标移动
oLoginDiv.onmousemove = null;
}
</script>
</body>
</html>
4.大图展示
<!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>大图展示</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
margin-top: 100px;
margin-left: 100px;
position: relative;
}
.small-box>span{
display: inline-block;
width: 200px;
height: 200px;
background: rgba(0,0,0,0.5);
/* 子绝父相 */
position: absolute;
top: 0;
left: 0;
display: none;
}
.big-box{
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
top: 0;
left: 410px;
overflow: hidden;
display: none;
}
.big-box>img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="small-box">
<img src="images/small.jpg" alt="">
<!-- 蒙版 -->
<span></span>
</div>
<div class="big-box">
<img src="images/big.jpg"">
</div>
</div>
<script>
// 获取元素
let oSmallDiv = document.querySelector(".small-box");
let oBigDiv = document.querySelector(".big-box");
let oMask = document.querySelector("span");
let oBoxDiv = document.querySelector(".box");
let oBigImg = document.querySelector(".big-box>img");
// 监听鼠标移入事件
oSmallDiv.onmouseenter = function(){
oMask.style.display = "block";
oBigDiv.style.display = "block";
}
// 监听鼠标移出事件
oSmallDiv.onmouseleave = function () {
oMask.style.display = "none";
oBigDiv.style.display = "none";
}
// 监听鼠标移动事件
oSmallDiv.onmousemove = function(event){
// offsetLeft / offsetTop： 获取 元素 到 第一个定位祖先元素 之间的 偏移位
// offsetWidth / offsetHeight： 获取宽高，包含：边框 + 内边距 + 元素宽高
event = event || window.event;
// 1.获取鼠标当前在小图中的位置
let mouseX = event.pageX - oBoxDiv.offsetLeft;
let mouseY = event.pageY - oBoxDiv.offsetTop;
// 2.重新计算鼠标的位置(将鼠标移动至蒙版oMask的正中心)
let maskWidth = oMask.offsetWidth;
let maskHeight = oMask.offsetHeight;
mouseX = mouseX - maskWidth / 2;
mouseY = mouseY - maskHeight /2 ;
// 3.安全校验
// 上移左移，不得超过最小值0
mouseX = mouseX < 0 ? 0 : mouseX;
mouseY = mouseY < 0 ? 0 : mouseY;
// 计算最大移动量
let smallWidth = oSmallDiv.offsetWidth;
let smallHeight = oSmallDiv.offsetHeight;
let maxMouseX = smallWidth - maskWidth;
let maxMouseY = smallHeight - maskHeight;
// 下移右移，不得超过最大值
mouseX = mouseX > maxMouseX ? maxMouseX : mouseX;
mouseY = mouseY > maxMouseY ? maxMouseX : mouseY;
// 4.将鼠标当前在小图中的位置设置给蒙版
oMask.style.left = mouseX + "px";
oMask.style.top = mouseY + "px";
// 5.计算大图移动的距离
// 蒙版移动的距离 / 蒙版最大能移动的距离 = 大图移动的距离 / 大图最大能移动的距离
// 大图移动的距离 = 蒙版移动的距离 / 蒙版最大能移动的距离 * 大图最大能移动的距离
let maxBigX = oBigDiv.offsetWidth - oBigImg.offsetWidth;
let maxBigY = oBigDiv.offsetHeight - oBigImg.offsetHeight;
let bigX = mouseX / maxMouseX * maxBigX;
let bigY = mouseY / maxMouseY * maxBigY;
// 6.设置大图移动的位置
oBigImg.style.left = bigX + "px";
oBigImg.style.top = bigY + "px";
}
</script>
</body>
</html>
<style>
*{
padding: 0;
margin: 0;
}
img{
/* position: fixed; */
position: absolute;
left: 0;
/* top: 50%;
transform: translateY(-50%); */
}
p{
text-align: center;
line-height: 40px;
}
</style>
<img src="images/left_ad.png" alt="">
<p>我是正文1</p>
....
<p>我是正文50</p> <script src="js/tools.js"></script>
<script src="js/animation2.js"></script>
<script>
// 1.拿到需要操作的元素
let oAdImg = document.querySelector("img");
// 2.计算广告图片top的值
// 获取网页(屏幕)的宽高
let screenHeight = getScreen().height;
let imgHeight = oAdImg.offsetHeight;
let offsetY = (screenHeight - imgHeight) / 2;
console.log(offsetY);
// 3.设置广告图片的top值
// oAdImg.style.top = offsetY + "px";
// 添加缓动动画
easeAnimation(oAdImg, {"top": offsetY});
// 4.监听网页的滚动事件
window.onscroll = function(){
// 获取网页滚动的距离
let pageOffsetY = getPageScroll().y;
// 设置广告图片的top值
// oAdImg.style.top = offsetY + pageOffsetY + "px";
// 添加缓动动画
easeAnimation(oAdImg, { "top": offsetY + pageOffsetY });
}
</script>
5.吸顶效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吸顶效果</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 100%;
/* vertical-align:设置元素的垂直对齐方式 top:顶端对齐*/
vertical-align: top;
}
</style>
</head>
<body>
<img src="images/nba-top.jpg" id="top">
<img src="images/nba-nav.jpg" id="nav">
<img src="images/nba-body.jpg">
<script src="js/tools.js"></script>
<script>
// 1.获取需要操作的元素
let oTop = document.querySelector("#top");
let oNav = document.querySelector("#nav");
// 2.获取顶部LOGO区域的高度
let topHeight = oTop.offsetHeight;
// 3.监听网页的滚动事件
window.onscroll = function () {
// 3.1 获取滚动出去的距离
let offsetY = getPageScroll().y;
// 3.2 判断滚动出去的距离是否已经大于等于顶部LOGO的高度
if(offsetY > topHeight){
// 如果大于，也就是顶部logo已经滚出了网页的可视区域，此时将nav导航栏置顶
oNav.style.position = "fixed";
oNav.style.top = "0";
oNav.style.left = "0";
}
if(offsetY < topHeight){
// 如果小于，则清空之前设置的定位
oNav.style.position = "";
}
}
</script>
</body>
</html>6.返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 100%;
/* vertical-align:设置元素的垂直对齐方式 top:顶端对齐 */
vertical-align: top;
}
span{
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
line-height: 50px;
text-align: center;
position: fixed;
right: 10px;
bottom: 10px;
display: none;
}
</style>
</head>
<body>
<img src="images/nba-top.jpg" id="top">
<img src="images/nba-nav.jpg" id="nav">
<img src="images/nba-body.jpg">
<span>TOP</span>
<script src="js/tools.js"></script>
<script>
let oSpan = document.querySelector("span");
window.onscroll = function () {
let offsetY = getPageScroll().y;
if(offsetY >= 200){
oSpan.style.display = "block";
}else{
oSpan.style.display = "none";
}
};
// 监听点击事件
let timerId = null;
oSpan.onclick = function () {
// x：表示让网页在水平方向滚动到什么位置
// y：表示让网页在垂直方向滚动到什么位置
// window.scrollTo(x, y);
// 点击TOP时，返回页面顶部
// window.scrollTo(0, 0);
// 添加缓动动画
clearInterval(timerId);
timerId = setInterval(function () {
let begin = getPageScroll().y;
let target = 0;
let step = (target - begin) * 0.3;
begin += step;
if(Math.abs(Math.floor(step)) <= 1){
clearInterval(timerId);
window.scrollTo(0, 0);
return;
}
window.scrollTo(0, begin);
}, 50)
}
</script>
</body>
</html>7.楼层效果
<!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>楼层效果</title>
<style>
*{
padding: 0;
margin: 0;
}
html, body{
width: 100%;
height: 100%;
}
ul{
list-style: none;
width: 100%;
height: 100%;
}
ul>li{
width: 100%;
height: 100%;
float: left;
text-align: center;
font-size: 20px;
background-color: #fff;
}
ol{
list-style: none;
position: fixed;
left: 10px;
/* 垂直居中对齐 */
top: 50%;
transform: translateY(-50%);
}
ol>li{
width: 100px;
border: 1px solid black;
line-height: 40px;
text-align: center;
margin-top: 5px;
}
.selected{
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>我是第1层</li>
<li>我是第2层</li>
<li>我是第3层</li>
<li>我是第4层</li>
<li>我是第5层</li>
</ul>
<ol>
<li class="selected">第1层</li>
<li>第2层</li>
<li>第3层</li>
<li>第4层</li>
<li>第5层</li>
</ol>
<script src="js/tools.js"></script>
<script>
// 1.初始化楼层的颜色
let oLi = document.querySelectorAll("ul>li");
let colors = ["skyblue","pink","yellowgreen", "tomato", "teal"];
for(i=0; i<oLi.length; i++){
item = oLi[i];
item.style.backgroundColor = colors[i]
};
// 2.实现点击谁就选中谁
let oItems = document.querySelectorAll("ol>li");
// 获取网页/屏幕(可视区域)的高度
let screenHeight = getScreen().height;
let currentIndex = 0;
let timerId = null;
for(let i=0; i<oItems.length; i++){
item = oItems[i];
item.onclick = function(){
// 2.1 清空上一个列表元素的背景颜色（排他思想）
oItems[currentIndex].className = "";
// 2.2 设置当前点击元素的背景颜色
this.className = "selected";
// 2.3 保存当前索引
currentIndex = i;
// 3.实现滚动
// 方式1：window.scrollTo(x,y)
// x：表示让网页在水平方向滚动到什么位置
// y：表示让网页在垂直方向滚动到什么位置
// window.scrollTo(0, screenHeight * i);
// 方式2：document.documentElement.scrollTop
// 注意点: 该方法实现网页滚动时, 设置值的时候不能添加单位
// document.documentElement.scrollTop = screenHeight * i + "px";
// document.documentElement.scrollTop = screenHeight * i;
// 4.添加滚动动画
clearInterval(timerId);
// 设置定时器
timerId = setInterval(() => {
// 4.1 设置起始位置（当前位置）
let begin = document.documentElement.scrollTop;
// 4.2 设置目标位置
let target = screenHeight * i;
// 4.3 设置步长 = （目标位置- 起始位置）* 缓动系数
let step = (target - begin) * 0.2;
// 4.4 计算移动后的位置
begin += step;
// 4.5 判断是否超出目标位置
if(Math.abs(Math.floor(step)) <= 1){
clearInterval(timerId);
document.documentElement.scrollTop = target;
return;
}
// 4.6 设置滚动距离
document.documentElement.scrollTop = begin;
}, 50);
}
}
</script>
</body>
</html>8.橱窗效果
<!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>商品橱窗</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 800px;
height: 190px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul{
list-style: none;
display: flex;
/* border: 1px solid blue; */
position: relative;
}
ul>li>img{
/* 必须设置图片的宽度，图片的宽度即为每个列表元素的宽度 */
width: 160px;
/* 底部对齐 */
vertical-align: bottom;
/* position: relative; */
}
.progress{
width: 100%;
height: 30px;
background-color: #ccc;
position: relative;
}
.progress>.line{
width: 100px;
height: 100%;
background-color: plum;
border-radius: 15px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="images/img1.jpg"></li>
<li><img src="images/img2.jpg"></li>
<li><img src="images/img3.jpg"></li>
<li><img src="images/img4.jpg"></li>
<li><img src="images/img5.jpg"></li>
<li><img src="images/img6.jpg"></li>
<li><img src="images/img7.jpg"></li>
<li><img src="images/img8.jpg"></li>
<li><img src="images/img9.jpg"></li>
<li><img src="images/img10.jpg"></li>
</ul>
<div class="progress">
<div class="line"></div>
</div>
</div>
<script>
// (1).默认ul的宽度为父元素div的宽度，需要手动设置ul的宽度为内容的宽度
// 1.获取元素
let oUl = document.querySelector("ul");
let oLi = document.querySelectorAll("ul>li");
// console.log(oLi[0]);
// console.log(oLi[0].style.width); // 无法获取css设置的样式
// console.log(getComputedStyle(oLi[0]).width); // 160px
// console.log(oLi[0].offsetWidth); // 160
// 2.计算内容的宽度
let ulWidth = oLi[0].offsetWidth * oLi.length;
// 3.设置ul的宽度
oUl.style.width = ulWidth + "px";
// (2).滚动条的宽度会随着内容的范围的宽度变化而变化
// 计算公式：
// 滚动条的宽度 / 滚动条滚动范围 = 容器的宽度 / 内容的范围
// 滚动条的宽度 = 容器的宽度 / 内容的范围 * 滚动条滚动范围
// 1.获取元素
let oBox = document.querySelector(".box");
let oProgress = document.querySelector(".progress");
let oLine = document.querySelector(".line");
// 2.计算滚动条的宽度
let boxWidth = oBox.offsetWidth;
let progressWidth = oProgress.offsetWidth;
let lineWidth = boxWidth / ulWidth * progressWidth
// 3.设置滚动条的宽度
oLine.style.width = lineWidth + "px";
// (3).监听滚动条的按下与移动事件
// 计算滚动条最大能够滚动的范围
let maxLineX = progressWidth - lineWidth;
// 计算图片最大能够滚动的范围
let maxImgX = boxWidth - ulWidth;
// 3.1 监听鼠标按下的事件
oLine.onmousedown = function(event){
event = event || Window.event;
// 拿到滚动条当前的位置
let begin = parseFloat(oLine.style.left) || 0;
// 拿到鼠标在滚动条中,按下的位置
let mouseX = event.pageX - oBox.offsetLeft
// 3.2 监听鼠标移动的事件
oLine.onmousemove = function (event) {
event = event || window.event;
// 1.拿到鼠标在滚动条中,移动之后的位置
let moveMouseX = event.pageX - oBox.offsetLeft;
// 2.计算偏移位
let offsetX = moveMouseX - mouseX + begin;
// 3.添加安全校验
offsetX = offsetX < 0 ? 0 : offsetX;
offsetX = offsetX > maxLineX ? maxLineX : offsetX;
// 4.重新设置滚动条的位置
oLine.style.left = offsetX + "px";
// (4).图片随着滚动条的移动而移动
// 滚动条滚动的距离 / 滚动条最大能够滚动的范围 = 图片滚动的距离 / 图片最大能够滚动的范围
// 图片滚动的距离 = 滚动条滚动的距离 / 滚动条最大能够滚动的范围 * 图片最大能够滚动的范围
// 计算图片的滚动距离
let imgOffsetX = offsetX / maxLineX * maxImgX;
// 重新设置图片的位置
oUl.style.left = imgOffsetX + "px";
}
}
// 监听鼠标抬起事件
// 如果直接给oLine滚动块添加鼠标抬起事件，那么当鼠标抬起事件是在滚动块外执行的，则无法移除鼠标移动事件
document.onmouseup = function (event) {
// 移除鼠标移动事件
oLine.onmousemove = null;
}
</script>
</body>
</html>
9.瀑布流
10.视频播放器
扫一扫
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
