一、元素偏移量 offset 系列
1、offset 概述
offset翻译过来就是偏移量,我们使用offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意: 返回的数值都不带单位
2、offset 与 style 区别
拖动的模态框案例
仿京东放大镜效果
二、元素可视区 client 系列
client 翻译过来就是 客户端,我们使用client 系列的相关属性来获取元素可视区的相关信息。通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
2、立即执行函数
不需要调用,立即能够自己执行的函数
主要作用:创建了一个独立的作用域。避免了命名冲突问题
写法:(function() { }() 或者(function(){ }());
淘宝flexible.JS源码分析之核心原理
三、元素滚动 scroll 系列
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等
2、页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件
仿淘宝固定侧边栏案例
3、页面被卷去的头部兼容性解决方案
三大系列总结
主要用法:
1、offset 系列经常用于获得元素位置 offsetLeft offsetTop
2、client 经常用于获取元素大小 clientWidth clientHeight
3、scroll经常用于获取滚动距离 scrollTop scrollLeft
4、注意页面滚动的距离通过 window.pageXOffset 获得
mouseenter 和 mouseover 的区别
mouseenter 鼠标事件
当鼠标移动到元素上时就会触发 mouseenter 事件
类似 mouseover,它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
之所以这样,是因为mouseenter 不会冒泡
跟 mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡
四、动画函数封装
1、动画实现原理
核心原理:通过定时器 setlnterval()不断移动盒子位置
实现步骤:
1、获得盒子当前位置
2、让盒子在当前位置加上一个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时的条件
5、注意此元素需要添加定位,才能使用 element.style.left
2、动画函数简单封装
注意函数需要传递两个参数,动画对象和移动到的距离。
3、动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数,每次都要 var 声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)
核心原理:利用JS是一门动态语言,可以很方便的给当前对象添加属性
4、缓动效果原理
缓动就是让元素运动速度有变化,最常见的是让速度慢慢停下来
思路:
1、让盒子每次移动距离慢慢变小,速度就会慢慢落下来
2、核心算法:(目标值- 现在的位置)/ 10 作为,每次移动的距离 步长
3、停止条件:让当前盒子位置等于目标位置就停止定时器
4、注意步长值需要取整
var step = (target - obj.offsetLeft) / 10;
step = step >0 ? Math.ceil(step) : Math.floor(step);
匀速动画是当前的位置 + 固定的值
缓动动画是 当前位置 + 变化的值(步长公式)
6、动画函数添加回调函数
回调函数原理: 函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,在执行传进去的这个函数,这个过程叫回调
回调函数写的位置:定时器结束的位置。
7、动画函数封装到单独JS文件里面
1、单独建一个JS文件,使用时引用这个文件
五、常见网页特效案例
网页轮播图
鼠标经过显示隐藏左右按钮
动态生成小圆圈
小圆圈排他思想 这句话放在for 循环里面
点击小圆圈滚动图片
此时用到animate 动画函数,将JS文件引入(注意:因为index.js 依赖animate.js 所以animate.js 要写到 index.js 上面)
注意是ul移动而不是小li
滚动图片的核心算法: 点击某个小圆圈,就让图片滚动 小圆圈的索引号乘以图片的宽度作为ul移动距离。
右侧按钮无缝滚动 在for循环外面
克隆第一张图片
放在ul 最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
小圆圈跟随右侧按钮一起变化
当我们点击了某个小li 就要把这个小li 的索引号给num
num = index
把小li的索引号给 circle
circle = index ;
左侧按钮功能制作
自动播放轮播图
clearInterval (timer);
timer=null;//清除定时器变量
timer = setInterval(function(){
//手动调用点击事件
arrow-r.click();
},2000);
5、1 节流阀
防止轮播图按钮连续点击造成播放过快。
节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发
核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
开始设置一个变量 var flag = true;
if (flag){flag = false;do something} 关闭水龙头
利用回调函数 动画执行完毕,flag = true 打开水龙头