文章多页模版

马黑黑 · 发表于 2025-2-15 13:32

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

第一页标题

具体内容

…………

第二页标题

第三页标题

第四页标题

第五页标题

第六页标题

1 2 3 4 5 6

马黑黑 · 发表于 2025-2-15 13:33

代码

<style>
#tz { margin: auto; width: 760px; height: 640px; border: 1px solid gray; position: relative; }
#artwrap { position: absolute; left: 0; top: 0; width: 460px; height: 600px; overflow: hidden; display: flex; /*flex-direction: column; /*纵向*/*/ }
#artwrap > div { flex-wrap: nowrap; flex-shrink: 0; width: 100%; height: 100%; background: #eee; padding: 6px 10px; box-sizing: border-box; }
#artwrap div p, #artwrap div h2 { margin: 8px; }
#artwrap h2 { text-align: center; }
#artwrap p { fontsize: 16px; }
#btnwrap { position: absolute; left: 0; bottom: 2px; width: 460px; text-align: center; }
.btn { margin: 4px; width: 26px; height: 26px; border: 2px dotted silver; border-radius: 50%; text-align: center; line-height: 26px; font-size: 14px; cursor: pointer; display: inline-block; }
.btn:hover { color: red; background: silver; }
.redBorder { border-color: red; cursor: default; }
</style>
<div id="tz">
<div id="artwrap">
<div>
<h2>第一页标题</h2>
<p>具体内容</p>
<p>…………</p>
</div>
<div>
<h2>第二页标题</h2>
</div>
<div>
<h2>第三页标题</h2>
</div>
<div>
<h2>第四页标题</h2>
</div>
<div>
<h2>第五页标题</h2>
</div>
<div>
<h2>第六页标题</h2>
</div>
</div>
<div id="btnwrap">
<span class="btn redBorder">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<span class="btn">4</span>
<span class="btn">5</span>
<span class="btn">6</span>
</div>
</div>
<script>
var divs = artwrap.querySelectorAll('div'),
btns = document.querySelectorAll('.btn');
btns.forEach((btn,key) => {
btn.onclick = () => {
divs[key].scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
btns.forEach((b,k) => {
b.className = k === key ? 'btn redBorder' : 'btn';
});
}
});
</script>

复制代码

樵歌 · 发表于 2025-2-15 13:36

这个可以大大滴有

马黑黑 · 发表于 2025-2-15 13:36

本帖最后由马黑黑于 2025-2-15 14:04 编辑

#artwrap > div { 。。。 } 中，加入 flex-direction: column; 属性设置就能变成纵向翻页效果，去掉此属性或将属性值改为 row 就是一楼的横向翻页效果。

其它东东可以根据需要添加和扩展，JS可以不动。

ps: 基本原理

被翻滚对象的父元素使用 display: flex; 布局，该布局会默认令第一代子元素横向布排，但会挤压在一块儿（就是儿子们会在父辈留给的空间里挤在一起居住，默认下大家均摊面积），故而子元素还需要设置 flex-wrap: nowrap; flex-shrink: 0; 两个属性，第一个属性是不折行，第二个是不压缩，不压缩意味着父亲的屋子不够住的话就往外挪。然后用页码来指定当前那个儿子住进屋子里面来。

如果需要纵向布排，则父元素需要设置 flex-direction: column; 属性，这是指定纵向排列的数值设置，把 column 换成 row 就是横排。

——flex布局比起其它的布局技巧牢靠，同时纵横的变换也简单。