全屏滚动/整屏滚动
好久没更新了,今天做个简单的案例:全屏滚动。
效果是这样的:鼠标滚轮滚一次,页面就能走一整屏。
思路:
全屏滚动和点击切换的轮播图很相似,我们可以把全屏滚动想象成竖向的轮播图。只不过轮播图点击的按钮变成了鼠标滚轮的上划或者下划,根据鼠标滚轮的操作,进行向下移动一整屏或者向上移动一整屏。我们同样需要一个大盒子装下我们的几个模块,还需要一个包着大盒子的框子,接下来我们就开始操作吧!
主页
html代码
<ul id="nav">
<li><a href="./全屏滚动.html#0">第一屏</a></li>
<li><a href="./全屏滚动.html#1">第二屏</a></li>
<li><a href="./全屏滚动.html#2">第三屏</a></li>
<li><a href="./全屏滚动.html#3">第四屏</a></li>
</ul>
跳转页
html代码
<!-- 设置一个导航栏 -->
<div class="navWrap">
<ul id="nav">
<li><a href="index.html">首页</a></li>
<li class="navLi select">第一屏</li>
<li class="navLi">第二屏</li>
<li class="navLi">第三屏</li>
<li class="navLi">第四屏</li>
</ul>
</div>
<!-- 最外层包着的大盒子 -->
<div id="wrap">
<ul id="box">
<li class="minBox">第一屏</li>
<li class="minBox">第二屏</li>
<li class="minBox">第三屏</li>
<li class="minBox">第四屏</li>
</ul>
</div>
css代码
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: black;
}
/* 外面包着的大盒子 */
#wrap {
position: relative;
/* 设置它的宽和高,都是占满一整屏 */
width: 100%;
height: 100vh;
/* 设置超出的部分隐藏 */
overflow: hidden;
}
/* 装内容的盒子 */
#box {
/* 只设置宽,高由内容撑开 */
width: 100%;
position: absolute;
top: 0;
/* 给一张背景图,也可以分别给每一屏设置背景图或者背景色 */
background: url(../../灰猫/img/birdsbg.png) no-repeat center/100% 100%;
/* 设置过渡 */
transition: all 1s;
}
/* 给每一屏设置宽高 */
.minBox {
width: 100%;
height: 100vh;
line-height: 100vh;
text-align: center;
font-size: 120px;
font-weight: 700;
color: yellow;
transition: all .4s;
}
/* 导航栏设置 */
.navWrap{
width: 100%;
height: 30px;
background: white;
position: fixed;
top: 0;
z-index: 999;
}
#nav{
width: 1200px;
height: 100%;
margin: 0 auto;
}
#nav>li{
float: left;
margin: 0 25px;
font-size: 25px;
}
/* 设置一个类名 */
.select{
color: yellow;
}
js代码
// 1.获取元素
var oBox = document.getElementById("box");
var oWrap = document.getElementById("wrap");
var aMinBox = document.getElementsByClassName("minBox");
var aNavLi = document.getElementsByClassName("navLi");
// 当窗口尺寸发生改变时,进行以下操作
window.onresize = function () {
// 每一屏的宽高要适应窗口的大小
for (var i = 0; i < aMinBox.length; i ) {
aMinBox[i].style.height = window.innerHeight;
aMinBox[i].style.width = window.innerWidth;
}
// 当发生改变时,屏幕自动滚动到第一屏
oBox.style.top = "0px";
index = 0; // 要让index归零,否则尺寸改变后,屏幕就不可以滚动了
}
// 为了实现从主页跳转过来就到相应的第几屏的效果,我们需要获取到地址栏中的hash后面的数字
console.log(window.location.hash);
console.log(window.location.hash.substring(1));
// 我们只要让初始的index等于它就好了
// 创建全局变量
// var index = 0;
var index = Number(window.location.hash.substring(1));
changePage (index); // 如果我们从主页跳转过来的,那就要先执行一次函数
// 绑定鼠标滚轮事件
document.onwheel = function (e) {
e = e || window.event; // 解决兼容性问题
// 进行判断,相当于一个开关,当一屏滚动完才能滚动下一屏
// 判断条件:当oBox相对于浏览器顶部的偏移等于盒子对于顶部的定位时 进行以下代码
if (-(index * window.innerHeight) == oBox.offsetTop) {
// 判断滚轮是上划还是下划
// console.log(e);
if (e.wheelDelta < 0) { // 鼠标滚轮下划
index == 3 ? index = 3 : index ; // 进行判断
changePage (index); // 调用封装的函数
} else {
index == 0 ? index = 0 : index--;
changePage (index);
}
}
}
// 给导航栏的文字添加点击效果
for(var x = 0 ; x < aNavLi.length ; x ){
aNavLi[x].num = x ; // 给aNavLi创建一个属性,属性值等于它的索引号
aNavLi[x].onclick = function(){
index = this.num;
changePage (index);
}
}
// 封装一个函数,减少代码量
function changePage (index){
oBox.style.top = - (index * window.innerHeight) "px"; // 改变盒子的定位
// 统一导航栏文字样式
for(var j = 0 ; j < aNavLi.length ; j ){
aNavLi[j].className = "navLi";
}
// 再单独设置被选中的
aNavLi[index].className = "navLi select";
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeiegf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01