文章多页模版
<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.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
btns.forEach((b,k) => {
b.className = k === key ? 'btn redBorder' : 'btn';
});
}
});
</script>
代码
<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.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
btns.forEach((b,k) => {
b.className = k === key ? 'btn redBorder' : 'btn';
});
}
});
</script>
这个可以大大滴有{:4_176:} 本帖最后由 马黑黑 于 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布局比起其它的布局技巧牢靠，同时纵横的变换也简单。
这个估计不用红影小辣椒当二传手，我大概也能弄起来{:4_189:} 樵歌 发表于 2025-2-15 13:37
这个估计不用红影小辣椒当二传手，我大概也能弄起来
加背景、换位置、改颜色会的话，基本可以自己动手的 边框应该弄点漂亮的小花花啥的装饰点缀下，用去写情书，会对成功率会贡献几个点点{:4_189:} 樵歌 发表于 2025-2-15 13:41
边框应该弄点漂亮的小花花啥的装饰点缀下，用去写情书，会对成功率会贡献几个点点
这不需要二传手吧？你内行着{:4_170:} 樵歌 发表于 2025-2-15 13:36
这个可以大大滴有
{:4_191:} 这个如果不是顺序点击，比如我先点了6，再点2，出现的内容不是居中的了，只出现一半。 当然，这个出现很随机，有时再点又好了{:4_173:} 原来每一句都要单独设div呢，我昨天可能就是这里错了{:4_173:} 马黑黑 发表于 2025-2-15 13:38
加背景、换位置、改颜色会的话，基本可以自己动手的
那看来又得当文抄公了{:4_189:} 马黑黑 发表于 2025-2-15 13:43
这不需要二传手吧？你内行着
我只会写几个字，还经常出错。{:4_189:} 实用的模版，谢谢老师精彩分享{:4_191:} 谢谢老师辛苦，学习了。 这个瞧哥哥，红影和那些写诗词的人玩肯定算高档的制作{:4_199:} 小辣椒 发表于 2025-2-15 16:32
这个瞧哥哥，红影和那些写诗词的人玩肯定算高档的制作
只是个基本的模板，装修和建造得靠自己 梦江南 发表于 2025-2-15 15:57
谢谢老师辛苦，学习了。
{:4_190:} 杨帆 发表于 2025-2-15 15:36
实用的模版，谢谢老师精彩分享
{:4_191:}