• Web API (scroll系列)、(仿淘宝侧边栏效果实现)、(mouseenter与mouseover的区别)、(动画的原理)、(缓动动画)


    一 、三大系列中的scroll系列 :

    (1)scrollLeft |  scrollTop  ;水平   |   垂直方向滚动出去的距离  ;

    (2)scrollWidth |  scrollHeight   ;内容的真是宽度  |  高度   ;

    3)滚动整个页面的时候  :   window . pageYOffset   ; 

    二 、仿淘宝侧边栏效果实现 :

    1.  找到关心的元素对象  :

    (1)banner区域  元素对象  ;

    (2)侧边栏的元素对象   ;

    (3)主体部分元素对象  ;

    2.获取banner区域以及主体部分距离顶部的距离   offsetTop

    3.给document注册scoll滚动事件  ;

    (1)通过window.pageYOffset  来拿到滚动出去的距离 ;

    (2)判断这个滚动出去的距离是否大于等于banner元素距离顶部的距离  ;

       a :如果大于等于 ,让侧边栏修改定位模式为fixed 同时修正一下 top 的偏移量  ;

       b :如果小于 ,让侧边栏修改定位模式为absolute ,修正一下top的偏移量  ;

    (3)判断这个滚动出去的距离是否大于等于main元素距离顶部的距离  ;

       a :如果大于等于 ,需要让文本进行显示 ;

       b :如果小于 ,需要让文本进行隐藏  ;

     

    三 、mouseenter 与 mouseover的区别 :

    (1)mouseenter 不会进行事件冒泡  ;

    (2)mouseover   会进行事件冒泡  ;

     

    四 、动画的原理 :

    (1)利用定时器setlnterval ,在定时器函数中 ,先获取到当前盒子的位置 ,

       然后加上移动的距离 ,最后把这个值设置给当前元素的偏移量就好  。

     

     

    五 、缓动动画 :

    (1)非匀速动画  ;

    (2)公式来实现  :

          a:var step = (目标位置 - 当前盒子的位置)/ 10 

          b:把这个step + 盒子当前的位置 , 就是最后要设置给盒子的偏移量  ;

     

     

     

  • 相关阅读:
    初学oracle,创建数据库时出现ora00988:缺少或无效口令 以及登陆
    NUnit单元测试笔记
    请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个仅包含被删除的重复条目的新数组。
    给iframe添加onload事件
    给超链接去焦点框(虚线框)时遇到的问题
    FCKeditor上传文件重命名for php
    PDF Xchange Pro 3.6的注册码
    APNG
    一个as3的alert
    jQuery遮罩弹窗
  • 原文地址:https://www.cnblogs.com/piyangtao/p/11562157.html
Copyright © 2020-2023  润新知