一个简单可爱的手风琴

最新推荐文章于 2024-09-15 22:12:53 发布

moonpieaa

最新推荐文章于 2024-09-15 22:12:53 发布

阅读量112

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/moonpieaa/article/details/125091947

版权

这是一个HTML和JavaScript实现的网页布局示例，包含一个背景图片和一个水平图片轮播。图片轮播通过点击切换不同的图片，并改变body背景以匹配当前显示的图片。代码中使用了CSS进行页面样式设置，包括元素的定位和过渡效果。

摘要由CSDN通过智能技术生成

下面是源代码和部分注释

是根据老师的做哒

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {
margin: 0;

padding: 0;

list-style: none;

}

html,body {
height: 100%;

/* body高度沾满全屏 */

}

body {
background-image: url(https://b-ssl.duitang.com/uploads/item/201809/18/20180918153911_vzsFN.thumb.700_0.jpeg);

background-size: cover;

background-position: center center;

position: relative

}

ul {
width: 800px;

height: 400px;

background-color: pink;

/* margin: 0 auto; */

/* 垂直居中 */

position: absolute;

left: 50%;

top: 50%;

margin-left: -400px;

margin-top: -200px;

/* 800的一半 */

/* 万能居中公式 */

}

li {
width: 80px;

height: 400px;

float: left;

background-size: cover;

background-position: center center;

transition: .3s;

/* 过渡 */

}

.open {
width: 480px;

}

li p {
width: 80px;

height: 400px;

background-color: rgb(142, 142, 240,.5);

color: white;

font-size: 60px;

}

</style>

</head>

<body>

<ul>

</li>

</li>

</li>

</li>

</li>

</ul>

</body>

//1.获取所有的li

var lis = document.querySelectorAll("li");

//记录当前open的下标

var showIndex = 0;//默认第一张图是展开的

//记录当前open的下标

//使用for循环遍历，添加点击事件

for (var i=0;i<lis.length;i++) {
lis[i].index = i;//为每一个li添加标记

lis[i].onclick = function() {
// //1.收起展开的li

// // 1.1 我不知道那个li展开了，让所有的li都收起来

// for (var j=0;j<lis.length;j++) {
// lis[j].className="";

// }

//1.2做标记

if (showIndex == this.index) {
return;//判断点击的是否是展开的li

}

lis[showIndex].className = "";

// 2.打开点击的li

this.className ="open";

showIndex = this.index;//修改标记值

//3.修改body的背景图

document.body.style.backgroundImage = this.style.backgroundImage;

}

</script>

</html>

moonpieaa

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫