1000字范文 > PC端和移动端网页特效 fastclick插件 Swiper插件 Bootstrap等框架本地存储

PC端和移动端网页特效 fastclick插件 Swiper插件 Bootstrap等框架本地存储

时间：2024-01-08 06:14:27

PC 端网页特效

元素偏移量 offset 系列

1.offset 系列常用属性

2.offset 与 style 区别

3.计算鼠标在盒子内的坐标

4.模态框拖拽

5.京东商品放大镜

元素可视区 client 系列

1. client 系列常用属性

2.flexible.js分析（移动适配rem）

3.立即执行函数

4.像素比和pageshow事件

元素滚动 scroll 系列

1. scroll 系列属性

2.被页面卷去的头部

3.仿淘宝固定侧边栏

三大系列总结

mouseenter 和mouseover的区别

动画函数封装

1.动画原理

2.动画函数简单封装

3.动画函数给不同元素记录不同定时器

4.缓动动画

5.缓动动画多个目标值之间移动

6.动画函数添加回调函数并封装到单独的js文件

常见网页特效案例

1.网页轮播图

2.返回顶部

移动端网页特效

触屏事件

1.触屏事件touch

2.触摸事件对象（TouchEvent）

3.移动端拖动元素

移动端常见特效

1.移动端轮播图

2.classList 属性

移动端常用开发插件

click 延时解决方案：

Swiper 插件的使用（轮播图）

移动端常用开发框架

Bootstrap 框架

本地存储

window.sessionStorage

window.localStorage

记住用户名

PC 端网页特效

元素偏移量 offset 系列

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

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

可以获得元素自身的大小（宽度高度）

注意：返回的数值都不带单位。

1.offset 系列常用属性

<body><div class="father"><div class="son"></div></div><div class="w"></div><script>// offset 系列var father = document.querySelector('.father');var son = document.querySelector('.son');// 1.可以得到元素的偏移位置，返回的不带单位的数值 console.log(father.offsetTop);console.log(father.offsetLeft);// 它以带有定位的父亲为准，如果没有父亲或者父亲没有定位则以 body 为准console.log(son.offsetLeft);var w = document.querySelector('.w');// 2.可以得到元素的大小：宽度和高度，是包含padding + border + width console.log(w.offsetWidth);console.log(w.offsetHeight);// 3. 返回带有定位的父亲否则返回的是bodyconsole.log(son.offsetParent); // 返回带有定位的父亲否则返回的是bodyconsole.log(son.parentNode); // 返回父亲是最近一级的父亲亲爸爸不管父亲有没有定位</script></body>

2.offset 与 style 区别

3.计算鼠标在盒子内的坐标

<body><div class="box"></div><script>// 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)// 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标var box = document.querySelector('.box');box.addEventListener('mousemove', function(e) {// console.log(e.pageX);// console.log(e.pageY);// console.log(box.offsetLeft);var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;})</script></body>

4.模态框拖拽

点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。

点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。

鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。

鼠标松开，可以停止拖动模态框移动。

5.京东商品放大镜

整个案例可以分为三个功能模块

先获取元素

<div class="preview_img"><img src="upload/s3.png" alt=""><div class="mask"></div><div class="big"><img src="upload/big.jpg" alt="" class="bigImg"></div></div>

var preview_img = document.querySelector('.preview_img'); //包括图片和遮挡层的盒子var mask = document.querySelector('.mask'); //遮挡层var big = document.querySelector('.big'); //旁边展示图片的大盒子

（1）鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能

//preview_img包括图片和遮挡层的盒子//mask遮挡层//big展示图片的大盒子// 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层和 big 大盒子preview_img.addEventListener('mouseover', function() {mask.style.display = 'block';big.style.display = 'block';})preview_img.addEventListener('mouseout', function() {mask.style.display = 'none';big.style.display = 'none';})

（2）黄色的遮挡层跟随鼠标功能。

（3）移动黄色遮挡层，大图片跟随移动功能。

// 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走preview_img.addEventListener('mousemove', function(e) {// (1). 先计算出鼠标在盒子内的坐标var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// console.log(x, y);// (2) 减去盒子高度 300的一半是 150 就是我们mask 的最终 left 和top值了// (3) 我们mask 移动的距离var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// (4) 如果x 坐标小于了0 就让他停在0 的位置// 遮挡层的最大移动距离var maskMax = preview_img.offsetWidth - mask.offsetWidth;if (maskX <= 0) {maskX = 0;} else if (maskX >= maskMax) {maskX = maskMax;}if (maskY <= 0) {maskY = 0;} else if (maskY >= maskMax) {maskY = maskMax;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离// 大图var bigIMg = document.querySelector('.bigImg');// 大图片最大移动距离var bigMax = bigIMg.offsetWidth - big.offsetWidth;// 大图片的移动距离 X Yvar bigX = maskX * bigMax / maskMax;var bigY = maskY * bigMax / maskMax;bigIMg.style.left = -bigX + 'px';bigIMg.style.top = -bigY + 'px';})

元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等

1.client系列常用属性

2.flexible.js分析（移动适配rem）

(function flexible(window, document) {// 获取的html 的根元素var docEl = document.documentElement// dpr 物理像素比var dpr = window.devicePixelRatio || 1// adjust body font size 设置我们body 的字体大小function setBodyFontSize() {// 如果页面中有body 这个元素就设置body的字体大小if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'} else {// 如果页面中没有body 这个元素，则等着我们页面主要的DOM元素加载完毕再去设置body// 的字体大小document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10 设置我们html 元素的文字大小function setRemUnit() {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resize 当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小window.addEventListener('resize', setRemUnit)// pageshow 是我们重新加载页面触发的事件window.addEventListener('pageshow', function(e) {// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小if (e.persisted) {setRemUnit()}})// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法if (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}}(window, document))

3.立即执行函数

主要作用：创建一个独立的作用域。避免了命名冲突问题

4.像素比和pageshow事件

下面三种情况都会刷新页面都会触发 load 事件。

1.a标签的超链接

2.F5或者刷新按钮（强制刷新）

3.前进后退按钮

但是火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。

所以此时后退按钮不能刷新页面。

此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加

<body><script>// console.log(window.devicePixelRatio);window.addEventListener('pageshow', function() {alert(11);})</script><a href="">链接</a></body>

元素滚动 scroll 系列

1. scroll 系列属性

2.被页面卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

<body><div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div><script>// scroll 系列var div = document.querySelector('div');console.log(div.scrollHeight);console.log(div.clientHeight);// scroll滚动事件当我们滚动条发生变化会触发的事件div.addEventListener('scroll', function() {console.log(div.scrollTop);})</script></body>

3.仿淘宝固定侧边栏

（1）原先侧边栏是绝对定位

（2）当页面滚动到一定位置，侧边栏改为固定定位

（3）页面继续滚动，会让返回顶部显示出来

<body><div class="slider-bar"><span class="goBack">返回顶部</span></div><div class="header w">头部区域</div><div class="banner w">banner区域</div><div class="main w">主体部分</div><script>//1. 获取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');// banner.offestTop 就是被卷去头部的大小一定要写到滚动的外面var bannerTop = banner.offsetTop// 当我们侧边栏固定定位之后应该变化的数值var sliderbarTop = sliderbar.offsetTop - bannerTop;// 获取main 主体元素var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');var mainTop = main.offsetTop;// 2. 页面滚动事件 scrolldocument.addEventListener('scroll', function() {// console.log(11);// window.pageYOffset 页面被卷去的头部// console.log(window.pageYOffset);// 3 .当我们页面被卷去的头部大于等于了 172 此时侧边栏就要改为固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}// 4. 当我们页面滚动到main盒子，就显示 goback模块if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})// 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方goBack.addEventListener('click', function() {// 里面的x和y 不跟单位的直接写数字即可// window.scroll(0, 0);// 因为是窗口滚动所以对象是windowanimate(window, 0);});// 动画函数function animate(obj, target, callback) {// console.log(callback); callback = function() {} 调用的时候 callback()// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function() {// 步长值写到定时器的里面// 把我们步长值改为整数不要出现小数的问题// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - window.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {// 停止动画本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面// if (callback) {//// 调用函数//callback();// }callback && callback();}// 把每次加1 这个步长值改为一个慢慢变小的值 // 步长公式：(目标值 - 现在的位置) / 10// obj.style.left = window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);}</script></body>

三大系列总结

（1）offset系列经常用于获得元素位置 offsetLeft offsetTop

（2）client 经常用于获取元素大小 clientWidth clientHeight

（3）scroll 经常用于获取滚动距离 scrollTop scrollLeft

注意页面滚动的距离通过 window.pageXOffset 获得

mouseenter 和mouseover的区别

动画函数封装

1.动画原理

<body><div></div><script>// 动画原理：通过定时器 setInterval() 不断移动盒子位置。// 1. 获得盒子当前位置 // 2. 让盒子在当前位置加上1个移动距离// 3. 利用定时器不断重复这个操作// 4. 加一个结束定时器的条件// 5. 注意此元素需要添加定位，才能使用element.style.leftvar div = document.querySelector('div');var timer = setInterval(function() {if (div.offsetLeft >= 400) {// 停止动画本质是停止定时器clearInterval(timer);}div.style.left = div.offsetLeft + 1 + 'px';}, 30);</script></body>

2.动画函数简单封装

注意函数需要传递2个参数，动画对象和移动到的距离。

// 简单动画函数封装obj目标对象 target 目标位置function animate(obj, target) {var timer = setInterval(function() {if (obj.offsetLeft >= target) {// 停止动画本质是停止定时器clearInterval(timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);}var div = document.querySelector('div');var span = document.querySelector('span');// 调用函数animate(div, 300);animate(span, 200);

3.动画函数给不同元素记录不同定时器

<body><button>点击夏雨荷才走</button><div></div><span>夏雨荷</span><script>// var obj = {};// obj.name = 'andy';// 简单动画函数封装obj目标对象 target 目标位置// 给不同的元素指定了不同的定时器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);}var div = document.querySelector('div');var span = document.querySelector('span');var btn = document.querySelector('button');// 调用函数animate(div, 300);btn.addEventListener('click', function() {animate(span, 200);})</script></body>

4.缓动动画

<body><button>点击夏雨荷才走</button><span>夏雨荷</span><script>// 缓动动画函数封装obj目标对象 target 目标位置// 思路：// 1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离步长// 3. 停止的条件是：让当前盒子位置等于目标位置就停止定时器function animate(obj, target) {// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function() {// 步长值写到定时器的里面var step = (target - obj.offsetLeft) / 10;if (obj.offsetLeft == target) {// 停止动画本质是停止定时器clearInterval(obj.timer);}// 把每次加1 这个步长值改为一个慢慢变小的值 // 步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);}var span = document.querySelector('span');var btn = document.querySelector('button');btn.addEventListener('click', function() {// 调用函数animate(span, 500);})// 匀速动画就是盒子是当前的位置 + 固定的值 10 // 缓动动画就是盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）</script></body>

5.缓动动画多个目标值之间移动

6.动画函数添加回调函数并封装到单独的js文件

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

回调函数写的位置：定时器结束的位置。

animate.js文件

常见网页特效案例

1.网页轮播图

功能需求：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

3.图片播放的同时，下面小圆圈模块跟随一起变化。

4.点击小圆圈，可以播放相应图片。

5.鼠标不经过轮播图，轮播图也会自动播放图片。

6.鼠标经过，轮播图模块，自动播放停止。

7.节流阀

防止轮播图按钮连续点击造成播放过快。

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

开始设置一个变量 var flag = true;

If(flag) {flag = false; do something} 关闭水龙头

利用回调函数动画执行完毕， flag = true 打开水龙头

2.返回顶部

滚动窗口至文档中的特定位置。

window.scroll(x, y)

注意，里面的x和y 不跟单位，直接写数字

// 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方goBack.addEventListener('click', function() {// 里面的x和y 不跟单位的直接写数字即可// window.scroll(0, 0);// 因为是窗口滚动所以对象是windowanimate(window, 0);});// 动画函数function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function() {var step = (target - window.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {// 停止动画本质是停止定时器clearInterval(obj.timer);callback && callback();}//移动距离为window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);}

移动端网页特效

触屏事件

1.触屏事件touch

2.触摸事件对象（TouchEvent）

3.移动端拖动元素

移动端常见特效

1.移动端轮播图

2.classList 属性

classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换 CSS 类。

移动端常用开发插件

click 延时解决方案：

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

3. 使用插件。 fastclick 插件解决 300ms 延迟。

<style>div {width: 50px;height: 50px;background-color: pink;}</style><script src="fastclick.js"></script></head><body><div></div><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}var div = document.querySelector('div');div.addEventListener('click', function() {alert(11);})</script></body>

Swiper 插件的使用（轮播图）

1.确认插件实现的功能

2.去官网查看使用说明

3.下载插件

4.打开demo实例文件，查看需要引入的相关文件，并且引入

5.复制demo实例文件中的结构html，样式css以及js代码

移动端常用开发框架

前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端

前端常用的移动端插件有 swiper、superslide、iscroll等。

Bootstrap 框架

是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。它能开发PC端，也能开发移动端

Bootstrap JS插件使用步骤：

1.引入相关js 文件

2.复制HTML 结构

3.修改对应样式

4.修改相应JS 参数

本地存储

特性：

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法

window.sessionStorage

<body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空所有数据</button><script>console.log(localStorage.getItem('username'));var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function() {// 当我们点击了之后，就可以把表单里面的值存储起来var val = ipt.value;sessionStorage.setItem('uname', val);sessionStorage.setItem('pwd', val);});get.addEventListener('click', function() {// 当我们点击了之后，就可以把表单里面的值获取过来console.log(sessionStorage.getItem('uname'));});remove.addEventListener('click', function() {// sessionStorage.removeItem('uname');});del.addEventListener('click', function() {// 当我们点击了之后，清除所有的sessionStorage.clear();});</script></body>

window.localStorage

记住用户名

如果勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名

<body><input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名<script>var username = document.querySelector('#username');var remember = document.querySelector('#remember');if (localStorage.getItem('username')) {username.value = localStorage.getItem('username');remember.checked = true;}remember.addEventListener('change', function() {if (this.checked) {localStorage.setItem('username', username.value)} else {localStorage.removeItem('username');}})</script></body>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。