PC端网页特效

元素偏移量offset系列

1.动态得到元素位置偏移  返回不带单位的数值

相对有定位的父级元素    没有则以body为准

2.动态得到元素大小offsetWidth   offsetHight  返回值包含padding  border 

3.offsetParent

返回带有定位的父亲，否则返回body

parentNode           DOM节点操作返回父亲  是最近一级的父亲  亲爸爸 不管有没有定位

行内样式表

offset只读属性

获取元素大小位置   用offset         更改元素值      用style

获取鼠标在盒子内的距离

商品放大镜  使用mousemove

拖动模态框

仿京东放大镜效果

opacity  .5半透明

外部的js文件

需要在最外层添加

 window.addEventListener('load',function(){

       

       })

  

元素可视区client系列

立即执行函数

 

js文件中内容在其函数内书写，再引入其他的js文件不会出现命名冲突的问题

元素滚动scroll系列

overflow ：auto        产生滚动条

scroll事件

侧边栏滚动案例

slider-bar

注意js不识别-

window.pageYOffset     来看页面被卷去的头部大小         返回数值

DTD

三大系列总结

mouseseenter和mouseover的区别

动画函数封装

优化：避免了再不断地开辟新的空间

避免了timer的重复

当我们用一个按钮的点击事件绑定这个动画，如果连续点击，会出现问题，此时需要在每次使用动画函数的开头去除定时器

取整

动画函数添加回调函数

在动画函数行参中添加callback                      callback=function（）{}

在定时器结束处使用 if(callback){

callback（）；}

  

回调：动画执行完才执行

动画函数封装到单独的js文件里面

网页轮播图

鼠标经过，自动播放停止

自动播放

手动调用点击事件

鼠标经过mouseenter    清除定时器停止

节流阀

使用短路运算符代替    if(callback ){callback()}                         callback  &&  callback();

返回顶部

里面的xy不跟单位直接写数字即可

2.带有缓动动画的返回顶部

筋斗云案例