使用JQ实现满屏效果

最新推荐文章于 2024-08-16 08:27:51 发布

俩碗螺蛳粉

最新推荐文章于 2024-08-16 08:27:51 发布

阅读量380

点赞数 5

文章标签： css 前端 html jquery vscode

本文链接：https://blog.csdn.net/weixin_56286359/article/details/136549015

版权

<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>

</div>

</div>

</div>

// "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>

俩碗螺蛳粉

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫