JS特效
1.PC端网页特效
1.1 offset
offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意: 返回的数值都不带单位
offset 系列常用属性:
offset系列属性 |
作用 |
element.offsetParent |
返回作为该元素带有定位的父级元素如果父级都没有定位则返回body |
element.offsetTop |
返回元素相对带有定位父元素上方的偏移 |
element.offsetLeft |
返回元素相对带有定位父元素左边框的偏移 |
element.offsetWidth |
返回自身包括padding、边框、 内容区的宽度,返回数值不带单位 |
element.offsetHeight |
返回自身包括padding、边框、内容区的高度,返回数值不带单位 |
1.2 offset 与 style 区别
offset
offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性,只能获取不能赋值
所以,我们想要获取元素大小位置,用offset更合适
style
style只能得到行内样式表中的样式值
style.width获得的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性,可以获取也可以赋值
所以,我们想要给元素更改值,则需要用style改变
案例:获取鼠标在盒子内的坐标
分析:
① 我们在盒子内点击,想要得到鼠标距离盒子左右的距离。
② 首先得到鼠标在页面中的坐标(e.pageX, e.pageY)
③ 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
④ 用鼠标距离页面的坐标减去盒子在页面中的距离,得到 鼠标在盒子内的坐标
⑤ 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动事件 mousemove
实现代码:
var box = document.querySelector('.box'); box.addEventListener('mousemove', function(e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐标是' + x + ' y坐标是' + y; })
1.3 元素可视区 client 系列
client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性 |
作用 |
element.clientTop |
返回元素上边框的大小 |
element.clientLeft |
返回元素左边框的大小 |
element.clientWidth |
返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.clientHeight |
返回自身包括padding、内容区的高度,不含边框,返回数值不带单位 |
1.4元素 scroll 系列属性
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll系列属性 |
作用 |
element.scrollTop |
返回被卷去的上侧距离,返回数值不带单位 |
element.scrolleft |
返回被卷去的左侧距离,返回数值不带单位 |
element.scrollWidth |
返回自身实际的宽度,不含边框,返回数值不带单位 |
element.crolHeight |
返回自身实际的高度,不含边框,返回数值不带单位 |
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏 掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
注意,元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
页面被卷去的头部兼容性解决方案
需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:
1. 声明了 DTD,使用 document.documentElement.scrollTop
2. 未声明 DTD,使用 document.body.scrollTop
3. 新方法 window.pageYOffset 和 window.pageXOffset,IE9 开始支持
function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; }
使用的时候 getScroll().left
总结
三大系列大小对比 |
作用 |
element.offsetWidth |
返回自身包括padding、边框、 内容区的宽度,返回数值不带单位 |
element.clientWidth |
返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.scrollWidth |
返回自身实际的宽度,不含边框,返回数值不带单位 |
他们主要用法:
1. offset系列 经常用于获得元素位置 offsetLeft offsetTop
2. client 经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面滚动的距离通过 window.pageXOffset 获得
原生的动画函数封装animate.js
function animate(obj, target, callback) { // 先清除以前的定时器,只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长:(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }
JS原生轮播图
2.移动端网页特效
2.1 触屏事件
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控 笔)对屏幕或者触控板操作。
常见的触屏事件如下:
触屏touch事件 |
说明 |
touchstart |
手指触摸到一个DOM元素时触发 |
touchmove |
手指在一个DOM元素上滑动时触发 |
touchend |
手指从一个DOM元素上移开时触发 |
2.2 触摸事件对象(TouchEvent)
TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表:
触摸列表 |
说明 |
touches |
正在触摸屏幕的所有手指的-个列表 |
targetTouches |
正在触摸当前DOM元素上的手指的一个列表 |
changedTouches |
手指状态发生了改变的列表,从无到有,从有到无变化 |
2.3 移动端拖动元素案例
分析:
1. touchstart、touchmove、touchend 可以实现拖动元素
2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
3. 移动端拖动的原理: 手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
4. 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置
注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minium-scale=1.0,maximum-scale=1.0"> <title></title> <style type="text/css"> div{ position: absolute; width: 100px; height: 100px; background: #0000FF; } </style> </head> <body> <div class="touch">触摸移动</div> <script type="text/javascript"> var touch = document.querySelector('.touch'); var startX = 0; //手指初始位置 var startY = 0; var x = 0; //盒子位置 var y = 0; touch.addEventListener('touchstart', function(e){ //获取手指初始位置 startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; //获取盒子位置 x = this.offsetLeft; y = this.offsetTop; }); touch.addEventListener('touchmove', function(e){ //手指移动距离 var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; //设置盒子移动距离 this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault();//清除默认滚动 }); </script> </body> </html>
2.4移动端轮播图js代码参考案例
window.addEventListener('load', function() { //1.获取元素 var focus = document.querySelector('.focus');//整个轮播图盒子 var ul = focus.querySelector('ul');//轮播图列表 var ol = focus.querySelector('ol');//轮播图小点 //获得focus的宽度 var w = focus.offsetWidth; //2.利用定时器进行播放 var index = 0; var timer = setInterval(function() { index++; var translateX = -index * w; ul.style.transition = 'all .3s'; ul.style.transform = 'translateX(' + translateX + 'px)'; }, 2000); //过度完成后,再去判断 ul.addEventListener('transitionend', function() { //无缝滚动 index = index >= 3 ? 0 : (index < 0 ? 2 : index); var translateX = -index * w; ul.style.transition = 'none'; ul.style.transform = 'translateX(' + translateX + 'px)'; //3.小圆圈跟着变化 //去除小圆点带有current类 ol.querySelector('.current').classList.remove('current'); //让当前小圆点加上current ol.children[index].classList.add('current'); }) //4.手机滑动轮播图 //手指初始位置 var startX = 0; var moveX = 0; //移动的距离 var flag = false; ul.addEventListener('touchstart', function(e) { startX = e.targetTouches[0].pageX; clearInterval(timer); //停止轮播 }); //移动手指时移动轮播图 ul.addEventListener('touchmove', function(e) { moveX = e.targetTouches[0].pageX - startX; var translateX = -index * w + moveX; ul.style.transition = 'none'; ul.style.transform = 'translateX(' + translateX + 'px)'; flag = true; }); //手指离开,根据移动判断回弹还是播放是上一张还是下一张 ul.addEventListener('touchend', function(e) { if(flag){//如果有移动图片才重新计算 if (Math.abs(moveX) > 50) { if (moveX > 0) { index--; } else { // 如果是左滑就是 播放下一张 moveX 是负值 index++; } } } var translateX = -index * w; ul.style.transition = 'all .3s'; ul.style.transform = 'translateX(' + translateX + 'px)'; //重新开启自动播放 clearInterval(timer); timer = setInterval(function() { index++; var translateX = -index * w; ul.style.transition = 'all .3s'; ul.style.transform = 'translateX(' + translateX + 'px)'; }, 2000); }); });
2.5返回顶部案例
//返回顶部模块制作 var goBack = document.querySelector('.goBack'); var nav = document.querySelector('nav'); window.addEventListener('scroll', function(){ if(window.pageYOffset >= nav.offsetTop){//当大与某个位置显示出来 goBack.style.display = 'block'; }else{ goBack.style.display = 'none'; } }) goBack.addEventListener('click', function(){ window.scroll(0,0); })
2.6常用开发插件
轮播图插件:
Swiper:https://www.swiper.com.cn/
superslide : http://www.superslide2.com/
iscroll : https://github.com/cubiq/iscroll
兼容性较好的视频插件:
https://github.com/ireaderlab/zyMedia
插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
插件的使用总结
1. 确认插件实现的功能
2. 去官网查看使用说明
3. 下载插件
4. 打开demo实例文件,查看需要引入的相关文件,并且引入
5. 复制demo实例文件中的结构html,样式css以及js代码