web页面设计——圣杯布局/目录定位/相册换页

小纸君

于 2024-03-15 15:04:34 发布

阅读量633

点赞数 19

分类专栏： web 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_60402183/article/details/136680852

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了圣杯/双飞翼布局的实现方法，包括CSS样式编写和左右侧栏宽度设定，以及导航定位的JavaScript逻辑，如使用`scrollIntoView`滚动到指定内容。此外，还讲解了相册换页效果的实现，通过定时器和函数返回实现多组图像的动态切换。

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

圣杯/双飞翼布局

导航定位的逻辑

相册换页逻辑

圣杯/双飞翼布局

1）了解圣杯/双飞翼布局：固定两侧，中间自适应

要点编写css样式时：左右的width要确定大小（用px），中间container的width则用100%

完整的css代码：

.header{
	background-color: #F1F1F1;
	text-align: center;
	padding: 20px;
}

.body{
	display: flex;
	flex-direction: row-reverse;
}
.left,.right {

	width: 200px;
	height: 100%;
}

.left{
	background-color: #121212;
}

.right{
	background-color: #989898;
}
.container{
	width: 100%;
	height: 100%;

}

.footer{
	background-color: #F1F1F1;
	text-align: center;
	padding: 20px;
}

测试的html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="path to your css file">
</head>

<body>
    <div class="header">Header</div>
    <div class="body">
        <div class="left">Left sidebar</div>
        <div class="container">container</div>
        <div class="right">Right sidebar</div>
    </div>
    <div class="footer">Footer</div>
</body>

</html>

界面：因为没有给body\container\left\right设置min-height 所以他们的height只是随内容而填充，所以这里像是“压缩了”

图1

内容安排如上图1所示

导航定位的逻辑

参考 W3School TIY Editor

经过测试可以用按钮点击+scrollIntoView完成滚轴滑动

button做显示、交互的左右

script编写函数逻辑

1）导航上的内容

        <div class="left">Left sidebar
            <p>文章导航目录</p>
            <button onclick="myFunction('abstract')">导言</p>
                <button onclick="myFunction('title1')">标题1</button>
                <button onclick="myFunction('title2')">标题2</button>
        </div>

2）文章的内容

        <div class="container">container
            <p id="abstract">文章主体</p>
            <p id="title1">标题1</p>
            <div class="ob">占据空间</div>
            <p id="title2">标题2</p>
            <p></p>
        </div>

3）函数逻辑

<script>
function myFunction(selectionid) {
    const element = document.getElementById(selectionid);
    element.scrollIntoView({ behavior: 'smooth' });
}
</script>

4）如何让“目录永相随”

fixed：fixed的弊端：当你使用 position: fixed; 定位一个元素时，它会脱离文档流，并且不会受到父元素或其他元素的影响。

相册换页逻辑


    <img id="img元素的id" src="最初展示的图像的地址" alt="相册图片">

    <script>
        // 图片路径数组
        var images = ["图像1本地路径", "图像2本地路径"];
        var currentIndex = 0; // 当前显示的图片索引

        function showNextImage() {
            currentIndex = (currentIndex + 1) % images.length; // 循环显示图片
            document.getElementById("对应的img元素的id").src = images[currentIndex]; // 切换图片
        }

        // 每隔5秒切换一次图片
        setInterval(showNextImage, 5000);
    </script>

多组图像变换

因为setInterval接受只函数名，不接受接受参数，所以我们可以通过以下形式构造多个不同img相册

function ImageShow(images,id,currentIndex)
        {
            // 返回一个设置好images和对应img的无参函数
            return function() {
            currentIndex = (currentIndex + 1) % images.length; // 循环显示图片
            document.getElementById(id).src = images[currentIndex]; // 切换图片
        }
    }

调用方法就是

<script>
        // 图片路径数组
        var images = ["图片1的本地路径", "图片2的本地路径"];

        var images2 = ["图片3的本地路径", "图片4的本地路径"];
        

        function ImageShow(images,id,currentIndex)
        {

            return function() {
            currentIndex = (currentIndex + 1) % images.length; // 循环显示图片
            document.getElementById(id).src = images[currentIndex]; // 切换图片
        }
    }
        var showNextImage = ImageShow(images,"img1的id",0);
        var show2 = ImageShow(images2,"img2的id",0);
        // 每隔5秒切换一次图片
        setInterval(showNextImage, 5000);
        setInterval(show2, 5000);
    </script>