窗口滚动到当前元素才显示动画效果

最新推荐文章于 2020-12-22 11:38:34 发布

转载最新推荐文章于 2020-12-22 11:38:34 发布 · 873 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hoasou/p/4773388.html

文章标签：

#javascript #前端 #ViewUI

本文介绍了一种使用jQuery实现的页面滚动触发元素动画效果的方法。通过监听窗口滚动事件，判断目标元素的位置来决定是否应用动画效果。该技术适用于希望增强用户体验的网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 $(function(){
 2     $(window).scroll(function(){
 3         var curr_element = $('当前元素class或id名')
 4         var active_class = '显示动画效果的class或id'
 5         var scroll_h = $(window).scrollTop()+$(window).height();
 6         var self_top = curr_element.offset().top;
 7         var self_h = curr_element.height();
 8         if( (scroll_h > self_top + self_h/2) &&  ( $(window).scrollTop() < self_top + self_h/2) ){
 9             // 显示动画效果
10            curr_element.addClass(active_class);
11         }else{
12            // 退出动画效果
13            curr_element.removeClass(active_class);
14         }
15     })
16 })