整屏滚动细节

主要的元素

两个阵营

  • 一个是页面的内容盒子

在本例中是包含pages的DIV标标,就是我们的页面内容。

页面的内容盒子,收纳了图片与文字

只要是class中带有了pages,那么这个div标签就是页面的内容盒子

我们可以用类选择器找到这些页面的内容盒子

$(".pages")
  • 小圆点

本例中,主要是li标签

具体的是在有points类的标签下的li标签,就是小圆点

获取全部的小圆点,通过下面方式,得到一组小圆点

$(".points li")

在这里插入图片描述

  • 重点操作

让小圆点,与页面的内容盒子产生关联

即,第一个页面的内容盒子被展示的时候,让第一个小圆点亮起来

或者说

如果第三个小圆点被点亮,同时也让第三个页面的内容盒子被展示

因此

本功能的重点,就是让页面的内容盒子与小圆点的索引,产生一个关联

具体的

鼠标滚轮滑动,影响显示的内容盒子

即,往下滚,就让下面的盒子显示出来

同时,让对应的小圆点亮起来

操作就是

滚轮事件执行,如果值为-1,代表在向下
设置一个共用的索引
该公用索引,被内容盒子与小圆点共享

即当索引值为3的时候,盒子的索引三,与小圆点组的索引三,都生效


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要制作整屏滚动的HTML页面,可以使用现成的JavaScript库,如fullPage.js或PagePiling.js。这些库提供了易于使用的API,可以帮助您快速创建漂亮的全屏滚动页面。 以下是使用fullPage.js创建整屏滚动页面的基本步骤: 1. 在HTML文档中引入fullPage.js库和相关的CSS文件。 2. 创建一个包含所有屏幕内容的主容器,并将每个屏幕作为容器的子元素。 3. 在JavaScript代码中初始化fullPage.js插件,并配置选项,如每个屏幕的背景色、过渡效果和导航条等。 4. 在每个屏幕容器中添加内容,如标题、文本、图片、视频等。 下面是一个使用fullPage.js创建整屏滚动页面的示例代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Full Page Scrolling</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.min.css" integrity="sha512-XqXJLOb3u3iZfK6I5rJ5+0J5oE3tUa2Yi5W/lJw1RJH+iP9yKOCeJYf4Sb3xMLc9VQw7UOXK/3GsQjM9y4LkGg==" crossorigin="anonymous" /> </head> <body> <div id="fullpage"> <div class="section"> <h1>Section 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p> </div> <div class="section"> <h1>Section 2</h1> <p>Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla lectus ante, consequat et ex eget, feugiat tincidunt metus.</p> </div> <div class="section"> <h1>Section 3</h1> <p>Aliquam bibendum, turpis eu mattis iaculis, ex lorem mollis sem, ut sollicitudin risus orci quis tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.min.js" integrity="sha512-GSPzZwI8Zi6SbCk1DvGJZ8HqPn9J1rGqSbfiFzQYb1VtkL0OgqctjN5qY4CvM7G7A8V1O7y4p5G5dZs64Sx2/w==" crossorigin="anonymous"></script> <script> new fullpage('#fullpage', { // options here autoScrolling:true, scrollHorizontally: true, sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'], navigation: true, navigationPosition: 'right', }); </script> </body> </html> ``` 在这个示例中,我们创建了一个包含三个屏幕的主容器,并使用fullPage.js插件配置每个屏幕的背景色、导航条和过渡效果。在每个屏幕容器中添加了标题和文本内容。将以上代码保存为HTML文件,然后在浏览器中打开,你就可以看到一个漂亮的整屏滚动页面了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值