源码分享网站,网站制作结算确认函,seo薪酬水平,网站续费管理系统一、PC端网页特效
1.1.元素偏移量offset系列
1.1.1.offset概述 offset翻译过来就是偏移量#xff0c;使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 1.获得元素距离带有定位父元素的位置 2.获得元素自身的大小(宽度高度) 注意#xff1a;返回的数值都… 一、PC端网页特效
1.1.元素偏移量offset系列
1.1.1.offset概述 offset翻译过来就是偏移量使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 1.获得元素距离带有定位父元素的位置 2.获得元素自身的大小(宽度高度) 注意返回的数值都不带单位。 offset系列常用属性 element.offsetParent返回作为该元素带有定位的父级元素如果父级都没有定位则返回body。 element.offsetTop返回元素相对带有定位父元素上方的偏移。 element.offsetLeft返回元素相对带有定位父元素左边框的偏移。 element.offsetWidth返回自身包括padding、边框、内容区的宽度返回数值不带单位。 element.offsetHeight返回自身包括padding、边框、内容区的高度返回数值不带单位。 1.1.2.offset与style区别 offset 1.offset可以得到任意样式表中的样式值 2.offset系列获得的数值是没有单位的 3.offsetWidth包含paddingborderwidth 4.offsetWidth等属性是只读属性只能获取不能赋值 5.所以想要获取元素大小位置用offset更合适 style 1.style只能得到行内样式表中的样式值 2.style.width获得的是带有单位的字符串 3.style.width获得不包含padding和border的值 4.style.width是可读写属性可以获取也可以赋值 5.所以想要给元素更改值则需要用style改变 1.2.元素可视区client系列 client翻译过来就是客户端使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 element.clientTop返回元素上边框的大小。 element.clientLeft返回元素左边框的大小。 element.clientWidth返回自身包括padding、内容区的宽度不含边框返回数值不带单位。 element.clientHeight返回自身包括padding、内容区的高度不含边框返回数值不带单位。 立即执行函数(function() {})() 或者 (function() {}()); 下面三种情况都会刷新页面都会触发load事件 1.a标签的超链接 2.F5或者刷新按钮(强制刷新) 3.前进后退按钮 但是火狐中有个特点有个往返缓存这个缓存中不仅保存着页面数据还保存了DOM和JavaScript的状态实际上是将整个页面都保存在了内存里。所以此时后退按钮不能刷新页面。 此时可以使用pageshow事件来触发这个事件在页面显示时触发无论页面是否来自缓存在重新加载页面中pageshow会在load事件触发后触发根据事件对象的persisted来判断是否是缓存中的页面触发的pageshow事件注意这个事件给window添加。 1.3.元素滚动scroll系列
1.3.1.元素scroll系列属性 scroll翻译过来就是滚动的使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。 element.scrollTop返回被卷去的上侧距离返回数值不带单位。 element.scrollLeft返回被卷去的左侧距离返回数值不带单位。 element.scrollWidth返回自身实际的宽度不含边框返回数值不带单位。 element.scrollHeigth返回自身实际的高度不含边框返回数值不带单位。 1.3.2.mouseenter和mouseover的区别 mouseenter鼠标事件 当鼠标移动到元素上时就会触发mouseenter事件类似mouseover它们两者之间的差别是mouseover鼠标经过自身盒子会触发经过子盒子还会触发。mouseenter只会经过自身盒子触发之所以这样就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开mouseleave同样不会冒泡 1.4.动画函数封装
1.4.1.动画实现原理 核心原理通过定时器setInterval()不断移动盒子位置。 实现步骤 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动距离 3.利用定时器不断重复这个操作 4.加一个结束定时器的条件 5.注意此元素需要添加定位才能使用element.style.left 1.4.2.动画函数简单封装
stylediv {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}span {position: absolute;left: 0;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}
/style
div/div
span/span
script// 注意函数需要传递2个参数动画对象和移动到的距离function animate(obj, target) {var timer setInterval(function () {if (obj.offsetLeft target) {// 停止动画clearInterval(timer);}obj.style.left obj.offsetLeft 1 px;}, 3)}var div document.querySelector(div);var span document.querySelector(span);// 调用函数animate(div, 600);animate(span, 500);
/script
1.4.3.动画函数给不同元素记录不同定时器 如果多个元素都使用这个动画函数每次都要var声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。核心原理利用JS是一门动态语言可以很方便的给当前对象添加属性。 把var timer/timer替换成obj.timer 1.4.4.缓动效果原理 缓动动画就是让元素运动速度有所变化最常见的是让速度慢慢停下来。 思路 1.让盒子每次移动的距离慢慢变小速度就会慢慢落下来。 2.核心算法(目标值 - 现在的位置) / 10 做为每次移动的距离步长。 3.停止的条件是让当前盒子位置等于目标位置就停止定时器。 4.注意步长值需要取整。 1.4.5.动画函数添加回调函数 回调函数原理函数可以作为一个参数。将这个函数作为参数传到另一个函数里面当那个函数执行完之后再执行传进去的这个函数这个过程就叫做回调。 回调函数写的位置定时器结束的位置。 stylediv {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}
/style
button点击500px/button
button idd1点击800px/button
div/div
scriptfunction animate(obj, target, callback) {clearInterval(obj.timer);obj.timer setInterval(function () {var step (target - obj.offsetLeft) / 10;// Math.ceil()往上取值Math.floor()往下取值step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {// 停止动画clearInterval(obj.timer);// 回调函数写到定时器结束里面if (callback) {// 回调函数callback();}}obj.style.left obj.offsetLeft step px;}, 50)}var div document.querySelector(div);var btn500 document.querySelector(button);var btn800 document.getElementById(d1);// 调用函数btn500.addEventListener(click, function () {animate(div, 500, function () {});});btn800.addEventListener(click, function () {animate(div, 800, function () {div.style.backgroundColor red;});});// 匀速动画就是 盒子是当前的位置 固定的值 10// 缓动动画就是 盒子当前位置 变化的值(目标值 - 现在的位置) / 10
/script
1.5.节流阀 防止轮播图按钮连续点击造成播放过快。 节流阀目的当上一个函数动画内容执行完毕再去执行下一个函数动画让事件无法连续触发。 核心实现思路利用回调函数添加一个变量来控制锁住函数和解锁函数。 开始设置一个变量var flag true; if (flag) {flag false; do somethins} 关闭 利用回调函数动画执行完毕flag true 打开 二、移动端网页特效
2.1.触碰事件
2.1.1.触屏事件概述 移动端浏览器兼容性较好不需要考虑以前JS的兼容性问题可以放心的使用原生JS书写效果但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件)Android和IOS都有。 touch对象代表一个触摸点。触摸点可能是一根手指也可能是一根触摸笔。触屏事件可以相应用户手指(或触控笔)对屏幕或者触控板操作。 touchstart手指触摸到一个DOM元素时触发。 touchmove手指在一个DOM元素上滑动时触发。 tiuchend手指从一个DOM元素上移动时触发。 2.1.2.触摸事件对象(TouchEvent) TouchEvent是一类描述手指在触摸平面(触摸屏。触摸板等)的状态变化的事件。这类事件用于描述一个或多个触电使开发者可以检测触点的移动触点的增加和减少等等。 touchstart、touchmove、touchend三个事件都会各自有事件对象。 触摸事件对象重点看三个常见对象列表 touches正在触摸屏幕的所有手指的一个列表。 targetTouches正在触摸当前DOM元素上的手指的一个列表。 changedTouches手指状态发生了改变的列表从无到有从有到无变化。 2.1.3.移动端拖动元素 1.touchstart、touchmove、touchend可以实现拖动元素。 2.但是拖动元素需要当前手指的坐标值可以使用targetTouches[0]里面的pageX和pageY。 3.移动端拖动的原理手指移动中计算出手指移动的距离。然后用盒子原来的位置 手指移动的距离。 4.手指移动的距离手指滑动中的位置减去手指刚开始触摸的位置。 拖动元素三部曲 (1).触摸元素touchstart获取手指初始坐标同时获得盒子原来的位置。 (2).移动手指touchmove计算手指的滑动距离并且移动盒子。 (3).离开手指touchend 注意手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault(); 2.2.移动端常见特效
2.2.1.click延迟时解决方案 移动端click事件会有300ms的延时原因是移动端屏幕双击会缩放(double tap to zoom)页面。 解决方案 1.禁止缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。 meta nameviewport contentuser-scalable-no 2.利用touch事件自己封装这个事件解决300ms延迟。 原理就是 1.当手指触摸屏幕记录当前触摸时间 2.当手指离开屏幕用离开的时间减去触摸的时间 3.如果时间小于150ms并且没有滑动过屏幕那么就定义为点击 // 封装tap解决click 300ms延时
function tap(obj, callback) {var isMove false;var startTime 0; // 记录触摸时候的时间变量obj.addEventListener(touchstart, function (e) {startTime Date.now(); // 记录触摸时间});obj.addEventListener(touchmove, function (e) {isMove true; // 看看是否有滑动有滑动算拖拽不算点击});obj.addEventListener(touchend, function (e) {if (!isMove (Date.now() - startTime) 150) { // 如果手指触摸和离开时间小于150ms算点击callback callback(); // 执行回调函数}isMove false; // 取反重置startTime 0;})
}// 调用
tap(div, function () { // 执行代码
});
2.3.移动端常用开发插件 移动端要求是快速开发所以经常会借助于一些插件来完成操作。 JS插件是js文件它遵循一定规范编写方便程序展示效果用有特定功能且方便调用。如轮播图和瀑布流插件。 特点它一般是为了解决某个问题而专门存在其功能单一并且比较小。 fastclick插件解决300ms延迟。使用延时 GitHub官网地址https://github.com/ftlabs/fastclick Swiper插件https://www.swiper.com.cn/ superslidehttp://www.superslide2.com/ iscrollhttps://github.com/cubiq/iscroll 2.4.移动端常用开发框架 框架顾名思义就是一套架构它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身使用者要按照框架所规定的某种规范进行开发。 插件一般是为了解决某个问题而专门存在其功能单一并且比较小。 前端常用的框架有Bootstrap、Vue、Angular、React等。既能开发PC端也能开发移动端。 前端常用的移动端插件有swiper、superslide、iscroll等。 框架大而全一整套解决方案 插件小而专某个功能的解决方案 三、本地存储 随着互联网的快速发展基于网页的应用越来越普遍同时也变得越来越复杂为了满足各种各样的需求会经常在本地存储大量的数据HTML5规范提出了相关解决方案。 本地存储特性 1.数据存储在用户浏览器中 2.设置、读取方便、甚至页面刷新不丢失数据 3.容量较大sessionStorage约5M、localStorage约20M 4.只能存储字符串可以将对象JSON.stringify()编码后存储 3.1.window.sessionStorage 1.生命周期为关闭浏览器窗口 2.在同一个窗口(页面)下数据可以共享 3.以键值对的形式存储使用 存储数据sessionStorage.setItem(key,value) 获取数据sessionStorage.getItem(key) 删除数据sessionStorage.removeItem(key) 删除所有数据sessionStorage.clear() 3.2.window.localStorage 1.生命周期永久生效除非手动删除否则关闭页面也会存在 2.可以多窗口(页面)共享(同一浏览器可以共享) 3.以键值对的形式存储使用 存储数据localStorage.setItem(key,value) 获取数据localStorage.getItem(key) 删除数据localStorage.removeItem(key) 删除所有数据localStorage.clear()
