jquery 滚动到指定位置触发动画

最新推荐文章于 2021-11-19 14:20:36 发布
最新推荐文章于 2021-11-19 14:20:36 发布
阅读量2k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36663951/article/details/73087646
版权

jQuery 滚动到指定位置触发动画

[html] view plain copy
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>sas</title>  
  6. <script type="text/javascript" src="js/jquery.js"></script>  
  7. <style type="text/css">  
  8. *{ margin:0px; padding:0px;}  
  9. .gs{  
  10. position:relative;  
  11. top:800px;   
  12. background-color:#099;   
  13. left:150px; width:80px;   
  14. }  
  15. .xz{  
  16.   
  17. animation:roate 2s;  
  18. animation-fill-mode:forwards;  
  19. animation-direction:alternate;  
  20.     }  
  21.   
  22. @keyframes roate{  
  23.     from { transform:rotate(0deg);  
  24.     width:100px;  
  25.     height:100px; }  
  26.     to{transform:rotate(360deg);  
  27.     width:200px;  
  28.     height:200px;  
  29.     }}  
  30. .xs{ width:50px; float: left; height:30px; background-color: #F90; position:fixed; left:700px; top:0px;}  
  31.   
  32. </style>  
  33. </head>  
  34.   
  35. <body>  
  36. <script type="text/javascript">  
  37. function gdjz(div,cssname,offset){  
  38.     var a,b,c,d;  
  39.     d=$(div).offset().top;  
  40.     a=eval(d + offset);  
  41.     b=$(window).scrollTop();   
  42.     c=$(window).height();  
  43.     if(b+c>a){  
  44.         $((div)).addClass((cssname));  
  45.         }  
  46.     }  
  47.       
  48. $(document).ready(function(e) {  
  49. $(window).scroll(function(){  
  50.     gdjz("#dh",'xz',100);  
  51.     }  
  52.       
  53. /*var a,b,c;  
  54. a=$("#dh").offset().top;//元素相对于窗口的距离  
  55. b=$(window).scrollTop(); //监控窗口已滚动的距离;  
  56. c=$(document).height();//整个文档的高度  
  57. d=$(window).height();//浏览器窗口的高度*/  
  58.       
  59. /*if(d+b>a+100){  
  60.     $("#dh").addClass("xz");  
  61.     }  
  62. */  
  63.     );  
  64. });  
  65. </script>  
  66. <div style="height:1800px; background-color:#999; width:500px; float:left;">  
  67. <div id="dh"  class="gs" >触发动画</div>  
  68. </div>  
  69. <div class="xs"></div>  
  70. </body>  
  71. </html> 
张高伟
关注
jQuery 滚动到指定位置触发动画
王颜华的博客
04-25 1万+
项目需求：将某一个div在滑动的时候固定在顶端，滑动到顶端的时候回到原来位置。 如gif所示：   所需jQuery文件：https://pan.baidu.com/s/1qXTEifU   1.css加上active    .active { position: fixed; top: -10px;//根据需要可以调整 就是活跃分区距离顶端的距离 lef...
利用jquery制作滚动到指定位置触发动画
10-22
本文将介绍如何利用 jQuery 制作一个滚动到指定位置时触发动画的效果。这个功能可以用于增强用户体验，比如当用户滚动到特定区域时，元素会以动画形式吸引用户的注意力。 首先，为了实现这个效果，我们需要引入 ...
页面滚动到某个位置触发动画效果 -- 响应式页面
PorkCanteen的博客
11-19 2867
布局时需要用到 window.pageYOffset 判断滚动位置触发动画，但是页面采用响应式布局，高度无法通过 px 单位确定。现考虑如下方法 getHeight() { const scrollTop = window.pageYOffset // 当 [窗口下沿滚动距离] 超过 [上一个模块底边与页面顶部距离] 时触发渐入动画 this.show = scrollTop + innerHeight > this.ToPageTop(this.$refs.sec3) + this.$
JQuery 判断滚动条是否出现，判断垂直滚动条是否到某个位置
weixin_30306905的博客
08-03 697
//浏览器出现滚动条时变化 $(window).resize(function(){ if($(window).width()<1150){ //浏览器宽度小于1150时 $(".left-nav").css({ "position":"absolute" //样式变成absolute ...
jquery之动画之div层移动animate:
有 prepare , No out
12-10 1573
1 Watch me be animated! CSS Code div#animateMe { left: 0; top: 0; position: relative; width: 300px;
jquery实现的点击页面动画方式平滑定位到某元素代码
weixin_30871905的博客
06-19 148
$('.menu-item>a').click(function(){ var id = $(this).attr("data-href"); 　　 $('html,body').animate({scrollTop:$(id).offset().top}, 800); }); <a href="javascript:v...
js实现页面滚动到指定位置触发动画
Polaris_tl的博客
05-08 1万+
js实现当页面元素出现在屏幕中时，触发动画
jQuery页面上下滚动触发区块动画特效
06-10
**jQuery页面上下滚动触发区块动画特效** 在网页设计中，用户交互体验是非常关键的一环，而动态效果可以显著提升用户体验。"jQuery页面上下滚动触发区块动画特效"是一种常见且吸引人的设计手法，它使得网页在用户...
jQuery实现将div的滚动条滚动到指定位置
10-27
<title>jQuery滚动条示例 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> #scrollArea { width: 300px; height: 200px; overflow: auto; } .content { height: 500px; /* 创建...
屏幕滚动到相应位置，执行css动画
11-06
当屏幕滚动到相应的位置之后，css animation动画再开始执行
jquery路径动画插件特效.zip
07-04
jquery路径动画插件特效是一款类似画板绘制的图案。 jquery路径动画插件特效图：
57、Jquery鼠标滚动事件动画
03-28
57、Jquery鼠标滚动事件动画
原生JS实现滚动条动画 （滚动到指定位置 / 返回顶部）
了了君
07-20 2万+
const ScrollTop = (number = 0, time) => { if (!time) { document.body.scrollTop = document.documentElement.scrollTop = number; return number; } const spacingTime = 20; /...
原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用
likeYou1207的博客
06-23 9173
废话不多说，直接上代码，附用法，纯博主手写，看完后，觉得好左上角请点个赞,觉得不好的请留下您的建议，谢谢（此代码改版很方便，大家可以任意发挥） （注意：如果不想自己写动画的，可以引入Animate.css 相信这个动画库大家都不陌生） body{overflow-x: hidden;} div{width: 100px;height: 100px;margin: 100px auto 0;...
jq动画效果慢慢滚动到固定位置
侞婼冇罪
08-21 1710
function contentTop(top){ $('body,html').animate({ scrollTop: top }, 500 ); }获取元素top传入即可 contentTop($("#top8").offset().top);
【css动画之滚动到相应位置触发动画】
qq_39167934的博客
11-19 2009
使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画
热门推荐
small_white_123的博客
06-10 4万+
如何让子元素滚动到指定父窗口的指定位置什么是滚动距离读取滚动距离如何设置滚动scrollTop属性scrollTo方法 什么是滚动距离 比如父元素设置了overflow: hidden;, 当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离. 读取滚动距离 <head> <title>test</title> <style> ul { width: 200px;
滚动到某个位置实现动画
Zhooson的博客
07-09 2899
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值