jQuery制作滑动特效
以下是一个使用jQuery实现的简单滑动特效示例，该特效在用户滚动页面至指定元素时触发：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 滑动特效示例</title>
<style>
section {
height: 500px;
border: 1px solid #000;
margin-top: 10px;
text-align: center;
line-height: 500px;
color: white;
background: #333;
font-size: 3em;
}
</style>
</head>
<body>
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
// 计算每个section的高度
var section1Top = $('#section1').offset().top;
var section2Top = $('#section2').offset().top;
var section3Top = $('#section3').offset().top;
// 检查滚动位置是否超过了section的顶部
if (scrollPos >= section1Top && scrollPos < section2Top) {
console.log('在 Section 1');
// 这里可以添加你的特效代码
} else if (scrollPos >= section2Top && scrollPos < section3Top) {
console.log('在 Section 2');
// 这里可以添加你的特效代码
} else if (scrollPos >= section3Top) {
console.log('在 Section 3');
// 这里可以添加你的特效代码
}
});
</script>
</body>
</html>在这个示例中，我们定义了三个section元素，并且当用户滚动页面时，通过监听scroll事件，计算用户滚动到的位置，并比较它们与各个section的顶部位置。当位置匹配时，在控制台输出一条消息，并可以在此处添加特定的滑动特效。
评论已关闭