三大家族之scroll案例

最新推荐文章于 2022-10-30 10:03:35 发布
最新推荐文章于 2022-10-30 10:03:35 发布
阅读量227 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xian_Nv_Ling/article/details/81088189
版权

 要想实现点火箭就到顶部，并实现滚动从快到慢的运动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #img{position:fixed;right: 50px;bottom: 50px;display: none }
    </style>
</head>
<body>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <p>I Love You</p>
    <div id="img"><img src="img/Top.jpg"></div>
    <script type="text/javascript">
    var t=document.getElementById('img');
    var header=0;
    var targer=0; //目标数字
    var o;
    //创建滚动监听
    window.onscroll=function(){
        //如果上部距离大于100显示 否则不显示
        if (document.documentElement.scrollTop>=100) {
            t.style.display="block";
        }else{
             t.style.display="none";
        }

    }
    //给图片创建点击事件
   t.onclick=function(){
        //得到本页面和卷进去的高度
        header=document.documentElement.scrollTop;
       //添加缓慢动作 重复执行
          o=setInterval(function(){
            //如果目标函数与初始函数（取整数）相等则停止定时器
            if(parseInt(header)==targer){
                 clearInterval(o);
            }else{
               header=header+(targer-header)/10;
                //跳转到顶部
                window.scrollTo(0,header);
        }
    },20)
    }
    
    </script>
</body>
</html>

 

Xian_Nv_Ling
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
侧栏固定 内容上下滚动_如何使用ScrollMagic.js在页面滚动上构建粘性侧栏
Web design 教程小屋
07-05 1199
在本教程中，我们将使用ScrollMagic.js（一个非常流行JavaScript库）来构建一个侧边栏，该侧边栏在页面滚动时变得很粘滞。 通过三个步骤（HTML，CSS和JavaScript），我们将概述整个过程。 这是我们要创建的内容（查看全屏版本以体验其完整的魔力并给它一些♥）： 仅当浏览器窗口的宽度至少为768px且到达视口的顶部边缘时，才会固定侧边栏。 较小的屏幕则采用堆叠式...
27 【三大家族scroll、offset、client】
DSelegent的博客
08-25 238
27 【三大家族scroll、offset、client】
JavaScript - WebAPI - 滚动家族 - scroll家族
Henry_ID的博客
08-14 157
1.0-offset家族(元素自身大小) offsetWidth：宽度，border（左右） + padding（左右）+content：getComputedStyle(元素)[width\border\padding] offsetHeight：高度（与宽度逻辑一样） offsetLeft：自己的border外部 到 定位父级 border的内部 offsetTop：与offsetLeft逻辑一样 offsetParent：定位父级 1.1-scroll家族（元素内容大小） 1.offset家族：
膜拜！用最少的代码却实现了最牛逼的滚动动画
鱼而已
10-30 1611
这是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。通过使用最少的代码创建令人叹为观止的滚动动画。我们需要知道是基于GSAP实现的插件，是处理滚动事件的，而真正处理动画是GSAP，二者组合使用才能实现滚动动画~}});接下来，我们一起来看使用可以实现怎样的效果吧。利用可以实现很多炫酷的效果，还有更多示例及源代码ScrollTrigger官方地址：https://greensock.com/scrolltrigger/
jQuery元素滚动动画库插件-ScrollMagic
12-11
ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件。正如其名字一样，该jquery元素滚动动画库出插件可以制作出各种神奇的滚动动画效果。它甚至可以制作网页视觉差效果和瀑布流效果。
小程序之scroll-view
03-29
scroll-view 的属性 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-...
微信小程序 scroll-view的使用案例代码详解
10-15
本文将深入探讨 `scroll-view` 的使用方法，并通过具体的代码案例进行解析。 1. **`scroll-view` 的基本概念** `scroll-view` 相比于普通的 `view` 组件，主要的区别在于它提供了内置的滚动事件处理。通过设置相应...
js中offset,client , scroll 三大元素知识点总结
10-16
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结，有需要的朋友们可以学习下。
JS奇技之利用scroll来监听resize详解
10-19
这篇文章介绍了一种巧妙的技巧，利用`scroll`事件来监听除`window`之外的任何元素的大小变化。这种方法的原理基于`scroll`事件在元素滚动时被触发的事实，而元素的滚动通常是由于其大小超过或小于其父元素的可视区域...
使用ScrollMagic制作与滚动相关的动画效果
weixin_33805743的博客
01-17 2591
使用ScrollMagic制作与滚动相关的动画效果 作者：吴业飞 时间：2019年1月17日 背景 经常看到一些国外动效做的特别炫的网站使用的是ScrollMagic这个js库，于是我决定写个demo试用一下。 需求 产品详情页的侧边分类导航要实现滚动到页面顶部转为固定效果。 例子 <!DOCTYPE html> <html lang="en"> <head>...
react-scroll-trigger::scroll:React组件，它监视滚动事件以在其进入，退出和通过视口前进时触发回调。 如果您要根据这些值来操作内容，则所有回调都包括滚动的进度和速度
05-13
:scroll: React滚动触发 监视scroll事件以在其进入，退出和在视口中前进时触发回调的React组件。 如果您要基于这些值来操纵内容，则所有回调都包括滚动的progress和velocity 。 安装 通过 npm install react-scroll-trigger 通过 yarn add react-scroll-trigger 如何使用 import ScrollTrigger from 'react-scroll-trigger' ; ... onEnterViewport ( ) { this . setState ( { visible : true , } ) ; } onExitViewport ( ) { this . setState ( { visible : false , } ) ;
ScrollMagic：神奇的滚动交互的javascript库
02-16
ScrollMagic 神奇的滚动交互的javascript库。 快速链接：| | | | | | | ScrollMagic可帮助您轻松响应用户的当前滚动位置。 如果您想...它是您的理想图书馆。 根据滚动位置设置动画–触发动画或将其同步到滚动条移动（如播放擦洗控件）。 从特定的滚动位置开始固定元素-无限期或有限的滚动进度（粘性元素）。 根据滚动位置打开和关闭元素CSS类。 轻松地将视差效果添加到您的网站。 创建一个无限滚动的页面（附加内容的ajax加载）。 通过进度参数在特定滚动位置或滚动经过特定部分时添加回调。 查看，浏览或阅读以开始使用。 如果您想做出贡献，请，让我知道您的专业和经验。 关于图书馆 ScrollMagic是滚动交互库。 这是对其前身的完全重写。 基于插件的体系结构可轻松实现自定义和扩展。 要实现动画，ScrollMagic可以与多个框架一起使用
ScrollMagic使用方法
weixin_30549175的博客
11-04 4391
滚动魔法是如何工作的?ScrollMagic的主要设计模式是一个控制器[1]，它附带了大量场景[2]　　1.每个滚动容器都有一个控制器。在大多数情况下，只有一个控制器对象，滚动容器是浏览器窗口。但您也可以使用DIV元素来滚动页面，甚至在页面上有多个容器。控制器还定义了应该滚动的方向(水平或垂直)，并负责保持所有场景的更新。　　2.场景定义了什么时候应该发生什么，意思是在哪个滚动位置。它可以触发动画...
ScrollMagic结合TweenMax的Demo
HYEHYEHYE的博客
11-15 701
ScrollMagic是一款可以把滚动条当进度条用的jquery插件，ScrollMagic + GSAP的组合可以制作炫酷动画，TweenMax是GSAP中功能最全的一个库 ​ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ScrollMagic-GSAP</title> <script src="https
jQuery之scroll方法及实例
月璇之音的博客
04-12 3030
scroll() 方法定义和用法当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。 scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。 语法$(selector).scroll()--js中代码 <script type="text/javascript"> x=0;
三大家族（offset,client,scroll）
m0_53273340的博客
12-18 284
** 1、offset家族（只读属性，不能修改）动态获取（屏幕随时改大小，也能获取值） 返回的数值不带单位** offsetWidth offsetHeight 获取盒子实际占用的宽和高,但是也不可以直接替代高宽，加了padding值或边框就会算上padding值或边框（box-sizing=border-box就不影响，依旧是盒子实际占用的宽和高） offsetLeft offsetTop 获取盒子自身外边框到它定位所参照的父级元素的内边框的距离，父元素加了边框也不影响取值，因为边框是加在盒子外面，而这个
AngularJS 滚动触发 scroll-trigger
前端栈开发
07-22 1930
scroll-trigger 详细介绍 scroll-trigger 是一个 Angular 模块可以在滚动到某个点时触发动作。 Demo： 这里有一个 plunker demo 。慢慢地滚动页面，可以看到图片会在你滚到它的位置时加载。 ...
scroll家族
zuo_zuo_blog的博客
01-09 219
1.滚动事件 window.onscroll=function(){ console.log(111); } 2.scrollWidth和scrollHeight scrollWidth=width+padding(不包括border和margin)； scrollHeight=height+padding：如果文字超出了盒子，高度为盒子内容 3.scrollLeft和scrol...
红色龙年2024新年工作计划PPT模板
最新发布
07-13
【作品名称】：红色龙年2024新年工作计划PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
vue-seamless-scroll点击案例
04-02
很抱歉，作为AI语言模型，我无法提供其他用户的点击案例，但我可以为您提供一些参考资料，希望能对您有所帮助。 Vue-seamless-scroll是一个可以实现无缝滚动的Vue组件，它可以用于展示图片、文字、新闻等内容。以下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值