1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body style="height:2000px">
  12.     <div style="margin-top:1000px;overflow: hidden;">
  13.         <div id="demo" style="width: 500px;height: 300px; background-color: red;transition: all 1s; opacity: 0.1;"></div>
  14.     </div>
  15. </body>
  16.  
  17. </html>
  18. <script src="https://code.jquery.com/jquery-2.2.4.min.js"
  19.     integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  20.  
  21. <script>
  22.     $(window).scroll(function (e) {
  23.         //元素
  24.         var demo = $("#demo");
  25.  
  26.         //滚动条滚动的高度
  27.         var scrollTop = $(document).scrollTop();
  28.         //浏览器可视化区域的高度
  29.         var docHeight = $(window).height();
  30.  
  31.         //滚动最小位置，开始动画
  32.         var mintop = demo.offset().top + demo.height() - docHeight;
  33.         //滚动最大位置，开始动画
  34.         var maxtop = demo.offset().top;
  35.  
  36.         //在一定范围内，开始过度动画，出了范围，就将过度动画还原为未执行时的样式
  37.         if(mintop <= scrollTop && maxtop >= scrollTop){
  38.             //开始动画
  39.             demo.css({
  40.                 "opacity":1,
  41.                 "margin-left":"500px"
  42.             })
  43.         }
  44.         else{
  45.             //还原动画
  46.             demo.css({
  47.                 "opacity":0.1,
  48.                 "margin-left":"0px"
  49.             })
  50.         }
  51.     });
  52. </script>

　　

css过渡——实现元素的飞入飞出的更多相关文章

  1. HTMO DOM部分---小练习；列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。

    一:列表之间数据移动 第一个列表里面有内容,第二个里面没有 实现功能: 点击左侧列表选中一项内容,点击按钮,复制到右侧 点击复制所有按钮,将左侧列表所有数据,复制到右侧 扩展功能:右侧列表实现去重复 ...

  2. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  3. android自己定义控件之飞入飞出控件

    近期呢,本人辞职了.在找工作期间.不幸碰到了这个求职淡季,另外还是大学生毕业求职的高峰期,简历发了无数份却都石沉大海.宝宝心里那是一个苦啊! 翻着过去的代码,本人偶然找到了一个有意思的控件.那时本人还 ...

  4. 【转】C#窗体飞入飞出的动画效果(Api)

    [System.Runtime.InteropServices.DllImport("user32")] private static extern bool AnimateWin ...

  5. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  6. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  7. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  8. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  9. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

随机推荐

  1. Arduino系列之光照传感器（三）

    今天,我将简单做一个当光照值低于某个值的时候,灯光自动打开,当高于某个值的时候,自动关闭. 设计代码原理: 首先,定义一个全局变量,并赋予初始值 然后,初始化程序 将设定某个IO口为输出模式 读取光度 ...

  2. python学习Day06--编码

    [主要内容] 1. is 和 == 区别 id()函数 == 判断两边的值 is 判断内存地址回顾编码: 1. ASCII: 英文, 特殊字符, 数字, 8bit, 1byte 2. GBK: 中文 ...

  3. Linux系统的用户和用户组管理

    一.用户账户管理 Linux/Unix是一个用户.多任务的操作系统:在讲Linux账号及账户组管理之前,先简单了解一下多用户.多任务操作系统的基本概念. Linux的单用户多任务 在Linux下,当你 ...

  4. 3、IP地址划分

    划分子网方法:1.你所选择的子网掩码将会产生多少个子网?:2 的x 次方(x 代表被借走的主机位数)2.每个子网能有多少主机?: 2 的y 次方-2(y 代表被借走之后剩余的主机位数)3.块大小:bl ...

  5. 一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具

    一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具 Intro DbTool 是一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具,原本 ...

  6. 洛谷P1649 【[USACO07OCT]障碍路线Obstacle Course】

    题目描述 Consider an N x N (1 <= N <= 100) square field composed of 1 by 1 tiles. Some of these ti ...

  7. 机器学习总结-bias–variance tradeoff

    bias–variance tradeoff 通过机器学习,我们可以从历史数据学到一个\(f\),使得对新的数据\(x\),可以利用学到的\(f\)得到输出值\(f(x)\).设我们不知道的真实的\( ...

  8. eclipse使用jdbc方式连接sql server 2012数据库史上最新最详细教程（2015年4月已亲测）

    步骤分为3部:1.通过sql server 配置管理器配置1433端口   2.将sqljdbc41.jar类库添加到对应的工程中   3.在java程序中连接数据库 步骤1:打开sql server ...

  9. ARTS Week 5

    Nov 25, 2019 ~ Dec 1, 2019 Algorithm 深度优先搜索--书籍分配 题目描述:有b1-b5五本书,要分配给五个学生,分别是a1-a5.但每个学生都有其喜欢的书,要检查是 ...

  10. Centos7更改屏幕显示率

    第一种,在虚拟机中安装VMwareTools,之后在虚拟机菜单栏"查看"这一项选择立即适应窗口. 第二种,修改/boot/grub2/grub.cfg配置文件,在终端输入su,输入 ...