JavaScript 网页特效

网页特效

元素偏移量offset系列

使用offset相关属性可以动态的得到该元素的位置（偏移）、大小等。

​ 获得元素距离带有定位父元素的位置

​ 获得元素自身的大小 返回的数值都不带单位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ke7bi68F-1626133452745)(C:\Users\甜味少女静\Pictures\QQ截图20210706152413.png)]

offset与style区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1AMdroeo-1626133452749)(C:\Users\甜味少女静\Pictures\QQ截图20210706153140.png)]

案例-拖动模态框

​ 点击弹出层，模态框和遮挡层就会显示出来 display：block；

​ 点击关闭按钮，模态层和遮挡层会隐藏起来

​ 页面中拖拽原理：鼠标按下并且移动，之后松开鼠标

​ 触发事件：mousedown mouseup mouseover

​ 拖拽过程：鼠标移动过程中，获得的最新的赋值给模态框的tip和left

//当鼠标按下，就获得鼠标在盒子内部的坐标
title.addEventListener('mousedown',functiopn(e){
                       var x= e.pageX -login.offsetLeft;
                       var y = e.pageY-login.offsetTop;
                       			document.addEventListener('mousemove',move)
			function move(e){
                login.style.left=e.pageX-x+'px';
                login.style.top=e.pageY-y+'px';
            }
//鼠标弹起，就让鼠标移动事件移除
		document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move)
        })
                       })

练习-京东放大镜效果

​ 鼠标经过小盒子图片，黄色遮挡层和大盒子显示，离开则隐藏两个盒子功能。

​ 黄色遮挡层跟鼠标走

​ 大盒子跟着小盒子走

​ 大图片移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离

元素可视区client系列

使用client相关属性来获取元素可视区的相关信息，可以动态得到该元素的边框大小、元素大小等

与offset的区别是 client不包含边框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ve4Pvg9M-1626133452750)(C:\Users\甜味少女静\Pictures\QQ截图20210706173351.png)]

立即执行函数

（function（）{}）（）或者（function（）{}（））

主要作用：创建一个独立的作用域（里面所有变量都是局部变量，不会有命名冲突）

不需要调用，立马能够自己执行的函数 也可以传递参数进来

第二个小括号可以看做是调用函数

立即执行函数也可以有名字

元素滚动scroll系列

可以动态得到该元素的大小，滚动距离等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PrS1PshK-1626133452752)(C:\Users\甜味少女静\Pictures\QQ截图20210706193242.png)]

scroll滚动事件

页面被卷去的头部 window.pageYOffset

页面被卷去的左侧 window.pageXOffset

mouseenter mouseover区别

mouseenter鼠标事件 当鼠标移动到元素上就会触发

mouseover鼠标经过自身盒子会触发 经过子盒子也会触发 mouseenter不会冒泡 只经过自身盒子触发

动画函数封装

动画实现原理：用定时器改变盒子位置（元素一定要加定位）

function animate(obj,target){
     clearInterval(obj.timer);//元素重复点击时 只开启一个定时器
    obj.timer=setInterval(function(){
        if (obj.offsetLeft>=target){
            clearInterval(obj.timer);
        }
        obj.style.left=obj.offsetLeft+1+'px';
    },30)
}

缓慢动画原理

每次移动距离慢慢变小

缓动动画公式：（目标值-现在的位置）/10 作为每次移动的距离步长

回调函数：

setLeft+1+‘px’;
},30)
}

###### 缓慢动画原理

每次移动距离慢慢变小

缓动动画公式：（目标值-现在的位置）/10   作为每次移动的距离步长

回调函数： 

### 常见网页特效案例