javascript- PC端特效（一）

元素偏移量offset

动态的得到该元素的位置、大小等

• 获取元素距离带有定位的父元素的位置
• 获取元素自身的大小

offset和style的区别 offset：

• 可以得到任意样式表中的样式值
• 获得的数值没有单位
• offsetWidth包含padding+border+width
• offsetWidth等属性是只读属性，只能获取不能赋值

所以我们想要获取元素大小位置，用offset更合适 style：

• 只能得到行内样式表中的样式值
• style.width获得的是带有单位的字符串
• style.width获得不包含padding和border值
• style.width是可读属性，可以获得也可以赋值

所以，我们想要给元素更改值，则需要用style  

案例：获取位置

1. 我们在盒子内点击，想要得到鼠标距离盒子左右的距离
2. 首先得到鼠标在页面的坐标（e.pageX,e.pageY）
3. 其次得到盒子在页面中的距离（box.offsetLeft,box.offsetTop）
4. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标

 

案例：拖动的模块框

1. 点击弹出层，模态框和遮挡层就会显示出来display:block;
2. 点击关闭按钮，模态框和遮挡层就会隐藏起来display：none;
3. 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
4. 触发事件是鼠标mousedown，鼠标移动mousemove，鼠标松开mouseup
5. 拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样就可以跟着鼠标走了
6. 鼠标按下触发的事件源是最上面的一行，就是id为title
7. 鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置
8. 鼠标按下，我们要得到鼠标在盒子的坐标
9. 鼠标移动，就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。
10. 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除

点击，弹出登录框
    

        
登录会员
            关闭
        
        

            

                用户名：
                
            
            

                登录密码：
                
            
        
        
登录会员
    
    
    

    

元素的可视区client系列

立即执行函数（function(){}）() 主要作用：创建一个独立的作用域

scroll系列 

使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离

案例：仿淘宝侧边栏

 需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document 滚动到某个位置，就是判断页面被卷去的上部值 页面被卷去的头部：可以通过window.pageYOffset获得 如果是被卷去的左侧 window.pageXOffset 注意，元素被卷去的头部是element.scroll Top

总结：

mouseenter和mouseover的区别

• 当鼠标移动到元素上时就会触发mouseenter事件
• 类似mouseover，它们两者之间的差别就是，mouseover鼠标经过自身的盒子会触发，经过子盒子也会触发。mouseenter只会经过自身盒子触发。

动画实现原理

核心原理：通过定时器setInterval（）不断移动盒子位置 实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器
5. 需要添加定位

动画函数简单封装

传递两个参数 动画对象和移动的距离

    xiayuhe
    

给不同元素记录不同的计时器

 

    夏雨荷
    点击夏雨荷触发