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>scrollTop与offset.top、animate</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0
  13.         }
  14.  
  15.         body {
  16.             margin: 0 auto;
  17.             max-width: 640px;
  18.             background-color: #fbfbfb;
  19.             padding: 10px;
  20.         }
  21.  
  22.         .bd {
  23.             height: 1650px;
  24.             overflow: hidden;
  25.         }
  26.  
  27.         .btn_animate {
  28.             position: absolute;
  29.             width: 120px;
  30.             height: 30px;
  31.             line-height: 30px;
  32.             background-color: rgb(129, 26, 26);
  33.             color: #fff;
  34.             text-align: center;
  35.         }
  36.  
  37.         .btn_ho {
  38.             position: absolute;
  39.             top: 40px;
  40.             left: 0;
  41.             width: 120px;
  42.             height: 30px;
  43.             line-height: 30px;
  44.             background-color: rebeccapurple;
  45.             border-radius: 5px;
  46.             color: #fff;
  47.             text-align: center;
  48.             margin: 10px 0;
  49.         }
  50.  
  51.         .btn_go {
  52.             position: absolute;
  53.             left: 0;
  54.             top: 90px;
  55.             height: 30px;
  56.             line-height: 30px;
  57.             width: 150px;
  58.             background-color: plum;
  59.             border-radius: 5px;
  60.             text-align: center;
  61.         }
  62.  
  63.         .hide {
  64.             position: absolute;
  65.             top: 160px;
  66.             left: 0;
  67.             display: none;
  68.             width: 100px;
  69.             height: 30px;
  70.             background-color: orange;
  71.         }
  72.         .btn_top{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: navy; border-radius: 5px; color: #fff;}
  73.         .btn_top_r{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: rgb(11, 104, 84); border-radius: 5px; color: #fff;}
  74.     </style>
  75. </head>
  76.  
  77. <body>
  78.     <div class="bd">
  79.         <div style="height: 400px; background-color: rgb(33, 107, 172); position: relative;" id="demo">
  80.             <div class="btn_animate" id="btnAnimate">点击向左移动</div>
  81.             <div class="btn_ho" id="btnHo">点击切换</div>
  82.             <div class="hide" id="hide">后显示</div>
  83.             <div class="btn_go" id="go">点击变化</div>
  84.         </div>
  85.         <h2>注意：用animate效果的时候样式一定要定位</h2>
  86.         <div style="height: 500px; background-color: rgb(34, 59, 99)" id="floor"></div>
  87.         <div style="height: 500px; background-color: orangered"></div>
  88.         <div class="btn_top" id="btnTop">scrollTop:top</div>
  89.         <div class="btn_top_r" id="btnTop_r">offset().top</div>
  90.  
  91.     </div>
  92.     <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
  93.     <script>
  94.         $(function () {
  95.             // 让指定元素左右移动
  96.             $("#btnAnimate").on("click", function () {
  97.                 $(this).animate({
  98.                     left: '+150px'
  99.                 }, "slow");
  100.             });
  101.             //在600毫秒内切换段落的高度和透明度
  102.             $("#btnHo").on("click", function () {
  103.                 $("#btnAnimate").animate({
  104.                     height: 'toggle',
  105.                     opacity: 'toggle'
  106.                 }, "slow");
  107.             });
  108.             //用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
  109.             $("#go").click(function () {
  110.                 $("#hide").animate({
  111.                     width: "40%",
  112.                     height: "100%",
  113.                     fontSize: "20px",
  114.                     left: 50,
  115.                     opacity: 'show'
  116.                 }, 500);
  117.  
  118.             });
  119.             $("#btnTop").on("click",function(){
  120.                 //html,body是兼容Firfox与Chrome
  121.                 $("html,body").animate({"scrollTop":top})
  122.             })
  123.             $("#btnTop_r").on("click",function(){
  124.                 $("html,body").scrollTop($("#floor").offset().top - 50)
  125.             })
  126.  
  127.         });
  128.     </script>
  129. </body>
  130.  
  131. </html>

效果图：

jQuery中animate与scrollTop、offset().top实例的更多相关文章

  1. jQuery中animate()的方法以及$(&quot;body&quot;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...

  2. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  3. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  4. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  5. jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...

  6. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  7. scrollTop,offset().top

    1.scrollTop是指滚动条滚动的距离 如果没有出现滚动条,则距离为0 css: <style type="text/css"> *{ margin: 0; pad ...

  8. jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决

    $("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html" ...

  9. jQuery中Animate进阶用法（二）

    Step Type: Function( Number now, Tween tween )每个动画元素的每个动画属性将调用的函数.这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值. ...

随机推荐

  1. Readme.MD 例子

    了解一个项目,恐怕首先都是通过其Readme文件了解信息.如果你以为Readme文件都是随便写写的那你就错了.github,oschina git gitcafe的代码托管平台上的项目的Readme. ...

  2. Python Geoip 获取IP地址经度、纬度

    简介: 除了一些免费的 API 接口,例如 http://ipinfo.io/223.155.166.172 可以得到一些信息外,还可以通过 python-geoip 库来解决这个问题. shell ...

  3. 2017面向对象程序设计（Java）第十五周学习总结

    上周,老师要求同学们自学应用程序部署,并布置了相关的实验任务.此次实验的目的是掌握Java应用程序的打包操作:了解应用程序存储配置信息的两种方法: 了解Applet小应用程序的开发及应用方法:掌握基于 ...

  4. 并发之CAS无锁技术

        CAS算法即是:Compare And Swap,比较并且替换:     CAS算法存在着三个参数,内存值V,旧的预期值A,以及要更新的值B.当且仅当内存值V和预期值B相等的时候,才会将内存值 ...

  5. java集合：常用集合的数据结构

    List 有序可重复 ArrayList ArrayList数据结构是数组.查询快,增删慢.ArrayList是线程不安全的,允许元素为null . Vector 线程安全的数组,效率较差,已经过时不 ...

  6. flume 配置说明

    Flume中的HDFS Sink应该是非常常用的,其中的配置参数也比较多,在这里记录备忘一下. channel type hdfs path 写入hdfs的路径,需要包含文件系统标识,比如:hdfs: ...

  7. GlobalMemoryStatusEx获取内存

    typedef struct _MEMORYSTATUSEX { DWORD dwLength; DWORD dwMemoryLoad; DWORDLONG ullTotalPhys; DWORDLO ...

  8. FW:考查嵌入式C开发人员的最好的16道题(转)

    考查一个初级嵌入式系统开发人员的C基本功,附有答案题目由资深嵌入式系统专家拟定, 目的是考查入门级的嵌入式软件开发人员 Gavin Shaw提供详细解答. 编者按:非常基本关于C语言的问题,一个信息类 ...

  9. numpy中tile()函数

    函数形式: tile(A,rep) 功能:重复A的各个维度 参数类型: - A: Array类的都可以,即A是一个ndarry数组- rep:A沿着各个维度重复的次数,表示变成的矩阵的形状,例如rep ...

  10. 一起做RGB-D SLAM(7) （完结篇）

    第七讲 添加回环检测 2016.11 更新 把原文的SIFT替换成了ORB,这样你可以在没有nonfree模块下使用本程序了. 回环检测的阈值作出了相应的调整. 请以现在的github上源码为准. 简 ...