<style>
* {
padding: 0;
margin: 0;
}
body,
html {
overflow: hidden;
}
.wrap {
width: 100%;
height: 100%;
}
.wrap .season {
/* 此处高度值为用户的宽口高度 */
height: 910px;
overflow: hidden;
}
.wrap .season p {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 300px;
}
</style>
</head>
<body>
<!-- 承载所有内容的盒子 -->
<div class="wrap">
<div class="season">
<p>春</p>
</div>
<div class="season">
<p>夏</p>
</div>
<div class="season">
<p>秋</p>
</div>
<div class="season">
<p>冬</p>
</div>
</div>
<!-- 引入js库 -->
<!-- 此处链接需要根据用户自己下载JS库位置进行更改 -->
<script src="../../libs/jQuery/jQuerymin.js"></script>
<script>
// "lightgreen", "deepskyblue", "gold", "#E4E8F0"
// 在原型上添加方法
$.fn.fullPage = function (ig) {
// 声明一个颜色数组
var arrColor = ["lightgreen", "deepskyblue", "gold", "#E4E8F0"];
// 声明变量记录窗口高度
var win_height = window.innerHeight;
// 获取类名为 .wrap的标签
var $wrap = $(".wrap");
// 定义索引值为 0
var index = 0;
// 获取类名为 .season的标签
var $season = $(".season");
$season.each(function (index, dom) {
$(dom).css("backgroundColor", arrColor[index]);
})
// 为类名为 .season的标签绑定鼠标滚轮事件
$season.on("mousewheel", function (e) {
// console.log(e); // 检查事件对象下有哪些属性更鼠标滚动有关
// 判断当前事件对象上的 wheelDelta 属性的正负性
if (e.originalEvent.wheelDelta < 0) {
// 若为负数，则用户正向下滚动
// 索引值加一
index++;
// 控制索引值的范围
// 若当前索引值比颜色数组的最大长度还大，则设置为颜色数组的最大长度减一，反之设置为当前索引值
index = index > (arrColor.length - 1) ? (arrColor.length - 1) : index;
} else {
// 若为正数，则用户正向上滚动
// 索引值减一
index--;
// 控制索引值的范围
// 若当前索引值比0小，则设置为0，反之设置为当前索引值
index = index < 0 ? 0 : index;
}
// 为类名为 wrap的标签绑定页面滚动事件
$wrap.stop().animate({
// 设置其marginTop属性
marginTop: -(index * win_height),
}, 300, function () {
ig.setupstyle(index);
});
})
return false;
}
// 在类名为 wrap的标签上调用 fullPage方法
$(".wrap").fullPage({
setupstyle: function (index) {
// 将每个季节名称字体扩大
$(".season").eq(index).find("p").animate({ fontSize: "60px" });
// 将其兄弟元素的字体变为原字体大小
$(".season").eq(index).siblings().find("p").css({ fontSize: "20px" })
}
});
</script>
<!-- 总结：
主要利用已封装完成的JS库中的 mousewheel 和 事件对象中的 wheelDelta属性实现满屏效果，各位也可以根据自己项目需求进行内容及功能的添加，修改。
博主刚接触JQ，如有写的不好之处，希望您能不吝赐教，给我一些关于这个项目的意见和建议。
各位的宝贵意见将对我产生深远的影响，我将认真倾听并尽力改进。谢谢各位~~
-->
</body>
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
