javascript动画

Share

四、1.1 JQ自定义动画

$(obj).animate({},时间，形式，回调)；
注：

  1. {}和css多属性操作语法完全一样，用来设置一个或多个需要做动画的css属性。
  2. 时间。单位是ms，表示当前动画运动时长。
  3. 形式默认是swing，还可以设置linear，一般会使用插件进行扩展。
  4. 回调就是一个function（）{}它里面的代码会在前面执行完成之后自动执行。
  5. animate（）不能实现背景颜色和透明度动画。

    1.2 动画停止和延时

  6. stop（）默认参数值是false，表示只执行当前元素身上最后一次运动，true就表示将所有动画都停止。
  7. delay（）小括号设置时长，单位是ms表示动画过多久之后才执行。

    1.3 页面滚动距离

    指的就是页面滚动可视区的那段距离值，在页面滚动时才会有值。
    1
    2
    3
    $(dopcument).scroll(function(){
        var iH=$(document).crollTop();
    });

注：

  1. document 、window都可以用来表示整个网页。
  2. scroll（）是JQ当中定义好一个页面滚动事件。
  3. scrollTOP（）是JQ当中专门用来获取滚动距离的函数。
    后台页面尺寸：宽1200。高：800/768

    1.4 设置页面滚动距离

    $('html;body').animate({'scrollTOP'具体值，时间})；
    注：
  4. 在设置页面滚动距离时候必须用HTML，body来表示整个也买你。
  5. scrollTOP写在animate里的时候就是专门用来表示页面滚动距离的。

    1.5 offset（）

    $(obj).offset()获取某个元素距离页面左侧和上边的距离值分别为lefttop属性。

    1.6 JS文件书写位置

  6. 内嵌JS直接在html页面中书写script标签。
  7. 外链JS新建一个外部的JS文件，然后通过script标签身上的src属性引入，此文件不需要写script标签，且具有src属性的script不能在作为JS执行环境。
  8. 行内JS其实就是事件操作的简写方式。

    五、1.1 视口基本介绍

    （一）什么是视口
    我们可以将当前设备用来展示网页内容的区域理解为视口。
    (二)为什么需要视口
    当我们为传统的PC页面设计页面时，常用的版心值为1200px，那么如果不作任何处理，直接将这个值放在手机上去查看，肯定会出现水平方向放不下的现象，所以最早由苹果公司提出了视口的概念，规定每个手机在出厂的时候都具有一个默认的浏览器宽度，这个值绝大多数为980px[保证页面在手机上页放的下]。

    1.2 视口设置

    书写移动页面首先要考虑一个问题就是如何去设置视口，可以通过meta来设置。
    <meta name="View port" content="width=device-width,initial-scale=1"/>
    注：
  9. view port 就是视口的意思