马黑黑 发表于 2025-2-13 12:23

利用scrollToView实现图片翻页功能

<h2>效果</h2>
<div id="showRes" style="margin: 30px; text-align: center;"></div>
<h2>代码</h2>
<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        #papa { margin: auto; width: 460px; height: 600px; overflow: hidden; white-space: nowrap; position: relative; }
        #papa img { width: 460px; }
        .navBtn { 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; }
        .navBtn:hover { color: red; background: silver; }
        .redBorder { border-color: red; cursor: default; }
        .tMid { margin: 10px; text-align: center; }
&lt;/style&gt;

&lt;div id="papa"&gt;
        &lt;img alt="" src="https://638183.freep.cn/638183/t24/biu/ji01.jpg" /&gt;
        &lt;img alt="" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" /&gt;
        &lt;img alt="" src="https://638183.freep.cn/638183/t24/biu/ji03.jpg" /&gt;
        &lt;img alt="" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" /&gt;
        &lt;img alt="" src="https://638183.freep.cn/638183/t24/biu/ji05.jpg" /&gt;
        &lt;img alt="" src="https://638183.freep.cn/638183/t24/biu/ji06.jpg" /&gt;
&lt;/div&gt;
&lt;p class="tMid"&gt;
        &lt;span class="navBtn redBorder"&gt;1&lt;/span&gt;
        &lt;span class="navBtn"&gt;2&lt;/span&gt;
        &lt;span class="navBtn"&gt;3&lt;/span&gt;
        &lt;span class="navBtn"&gt;4&lt;/span&gt;
        &lt;span class="navBtn"&gt;5&lt;/span&gt;
        &lt;span class="navBtn"&gt;6&lt;/span&gt;
&lt;/p&gt;

&lt;script&gt;
//图片、按钮
var images = papa.querySelectorAll('img'),
        btns = document.querySelectorAll('.navBtn');
//按钮点击事件
btns.forEach((btn,key) =&gt; {
        btn.onclick = () =&gt; {
                images.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
                btns.forEach((b,k) =&gt; {
                        b.className = k === key ? 'navBtn redBorder' : 'navBtn';
                });
        }
});
//滚动第一张图片
images.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
&lt;/script&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);

var runCodes = (str,target) => {
        let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
        let js_str, html_str;
        if(str.match(reg) !== null) {
                js_str = str.match(reg);
                html_str = str.replace(js_str, '').trim();
                js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
        } else {
                js_str = '';
                html_str = str.trim();
        }
        target.innerHTML = html_str;
        let myfunc = new Function(js_str);
        myfunc();
};

runCodes(hEpre.innerText, showRes);
</script>

马黑黑 发表于 2025-2-13 12:41

本帖最后由 马黑黑 于 2025-2-13 12:43 编辑

基于元素（element）接口的 scrollIntoView 方法与浏览器的视口有关，它会将运行 scrollIntoView 方法的元素滚动到浏览器的视口。换言之，scrollIntoView 不关切滚动的距离，只要被滚动的元素不在 scrollView 规定的位置，滚动行为就会发生；当然，元素离它应滚动到的地方的实际距离会影响元素滚动动作的方式（快或慢）。

与原生基于滚动条的 scroll 方法相比，scrollIntoView 方法不用计算确切的滚动距离，省点事。

scroll 是滚动之意，into 进入，View 视口，合起来就是滚动进入视口。方法支持的参数可用 options 方式表达，例如:

element.scrollIntoView({
    behavior: 'smooth', /* 滚动行为方式 : 平滑 */
    block: 'center', /* 垂直位置 ：居中 */
    inline: 'center', /* 水平位置 ：居中 */
});

各参数的取值范围感兴趣的可以自行网搜。

一楼的演示，图片受其容器限制了位置，但在翻页的时候，图片不仅基于容器、还基于视口。大家可以尝试让整个页面向上翻页，让按钮集群显示在浏览器可视区域的顶端，然后去点击任意一个圆形按钮，看看发生什么。

梦江南 发表于 2025-2-13 14:24

谢谢老师辛苦！学习了。

小辣椒 发表于 2025-2-13 15:36

黑黑这个是横向效果了，可惜我不会做进帖里面，小辣椒不会的太多了

马黑黑 发表于 2025-2-13 17:56

小辣椒 发表于 2025-2-13 15:36
黑黑这个是横向效果了，可惜我不会做进帖里面，小辣椒不会的太多了

试试就会

马黑黑 发表于 2025-2-13 17:59

梦江南 发表于 2025-2-13 14:24
谢谢老师辛苦！学习了。

{:4_190:}

红影 发表于 2025-2-13 20:03

这个滚动有趣，当中的图片也会闪过呢{:4_187:}

马黑黑 发表于 2025-2-13 21:03

红影 发表于 2025-2-13 20:03
这个滚动有趣，当中的图片也会闪过呢

这与它们所处的位置有关：它们是并排放着的

红影 发表于 2025-2-13 22:33

马黑黑 发表于 2025-2-13 21:03
这与它们所处的位置有关：它们是并排放着的

嗯嗯，我特地去点了隔了几张的。
这个好，想看哪个就能直接看到呢{:4_187:}

马黑黑 发表于 2025-2-13 22:40

红影 发表于 2025-2-13 22:33
嗯嗯，我特地去点了隔了几张的。
这个好，想看哪个就能直接看到呢

图片可以使用装载文本的div替换，这意味着，这个演示可以用于发布诗文帖子

红影 发表于 2025-2-14 16:02

马黑黑 发表于 2025-2-13 22:40
图片可以使用装载文本的div替换，这意味着，这个演示可以用于发布诗文帖子

直接文本就可以啊，还以为需要把文本变图片呢{:4_187:}

马黑黑 发表于 2025-2-14 20:10

红影 发表于 2025-2-14 16:02
直接文本就可以啊，还以为需要把文本变图片呢
演示用的是图片。图片是元素，div也是元素。

div是 display: block; 的默认设置，横向翻页的，许设置 display: inline-block; 属性值。或者，使用 span 替代 div，span 的 display 属性和 img 一模一样（但是 span 里 不能有 p 标签，可用 br 换行）

红影 发表于 2025-2-14 21:20

马黑黑 发表于 2025-2-14 20:10
演示用的是图片。图片是元素，div也是元素。

div是 display: block; 的默认设置，横向翻页的，许设置...
“span 的 display 属性和 img 一模一样”
这个还真不知道呢，太好了{:4_199:}
但是多行文字怎么作为一个块呢？

马黑黑 发表于 2025-2-14 21:21

红影 发表于 2025-2-14 21:20
“span 的 display 属性和 img 一模一样”
这个还真不知道呢，太好了

所以有必要阅读文档

红影 发表于 2025-2-14 21:58

马黑黑 发表于 2025-2-14 21:21
所以有必要阅读文档

好吧，黑黑说得有道理{:4_187:}

马黑黑 发表于 2025-2-14 22:23

红影 发表于 2025-2-14 21:58
好吧，黑黑说得有道理

{:4_190:}

红影 发表于 2025-2-14 22:53

马黑黑 发表于 2025-2-14 21:21
所以有必要阅读文档

我去试了span，输入的三段文字都叠在一起了{:5_102:}

红影 发表于 2025-2-14 22:55

马黑黑 发表于 2025-2-14 22:23

用div加p，倒是能每一首单独出来，但没法滚动，只动一点距离。span和图片不一样啊，每一个不是独立的？

红影 发表于 2025-2-14 23:13

设置 display: inline-block; 属性值。

——这个不知道在哪设置{:4_173:}

马黑黑 发表于 2025-2-14 23:30

本帖最后由 马黑黑 于 2025-2-14 23:35 编辑

红影 发表于 2025-2-14 23:13
设置 display: inline-block; 属性值。

——这个不知道在哪设置
img元素的替代元素相应CSS，比如div或span，你可以用一个累选择器：

.artbox {
    width: ??px;
    height: ??px;
    display: inline-block;
}

然后：

<div class=".artbox">1</div>
<div class=".artbox">2</div>
<div class=".artbox">3</div>
页: [1] 2 3 4 5
查看完整版本: 利用scrollToView实现图片翻页功能