文章目录
一、常见网页特效:1. 案例：返回顶部:2. 案例：筋头云案例: 二、移动端网页特效:1. 触屏事件:2. 触摸事件对象(TouchEvent)3.案例：移动端拖动元素 2. 案例: 移动端轮播图:2.1 需求:2.2. 案例分析:2.3 classList 属性2.4 案例分析: 3. click 延时解决方案4. 移动端常用开发插件:4.1 什么是插件4.2. 插件的使用4.3. Swiper 插件的使用:(触摸滑动)4.4. 其他移动端常见插件4.5. 插件的使用总结4.6. 移动端视频插件 zy.media.js 5. 移动端常用开发框架5.1. 移动端视频插件 zy.media.js5.2. Bootstrap 6.本地存储6.1.本地存储特性6.2.window.sessionStorage6.3.window.localStorage6.4.案例：记住用户名一、常见网页特效:
1. 案例：返回顶部:
需求分析:
带有动画的返回顶部;此时可以继续使用封装的动画函数;只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了;页面滚动了多少，可以通过 window.pageYOffset 得到;最后是页面滚动，使用 window.scroll(x,y);
实现:
<head><title>返回顶部</title><style>.slider-bar {position: absolute;left: 50%;top: 300px;margin-left: 600px;width: 45px;height: 130px;background-color: pink;}.w {width: 1200px;margin: 10px auto;}.header {height: 150px;background-color: purple;}.banner {height: 250px;background-color: skyblue;}.main {height: 1000px;background-color: yellowgreen;}span {display: none;position: absolute;bottom: 0;}</style><script>window.onload = function() {var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.header');var bannerTop = banner.offsetTopvar sliderbarTop = sliderbar.offsetTop - bannerTop;var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');var mainTop = main.offsetTop;document.addEventListener('scroll', function(e) {if(window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})goBack.addEventListener('click',function() {scrollAnimate(window, 0);})function scrollAnimate(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();}scroll(0, window.pageYOffset + step);}, 15);}}</script></head><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></body>
2. 案例：筋头云案例:
需求分析:
利用动画函数做动画效果原先筋斗云的起始位置是0鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可鼠标离开某个小li，就把目标值设为 0如果点击了某个小li， 就把li当前的位置存储起来，做为筋斗云的起始位置
实现:
<head><title>筋斗云案例</title><style>* {margin: 0;padding: 0}ul {list-style: none;}.c-nav {position: relative;margin: 100px auto;width: 900px;height: 42px;background: #fff url(./images/rss.png) no-repeat right center;}.c-nav ul {position: absolute;}.c-nav ul li {float: left;width: 83px;text-align: center;line-height: 42px;}.c-nav li a{color: #333;/* 取消下划线 */text-decoration: none; display: inline-block;height: 42px;}.c-nav li a:hover {color: #fff;}.c-nav li.current a {color: #0dff1d;}.cloud {position: absolute;left: 0;top: 0;width: 83px;height: 42px;background: url(./images/cloud.gif) no-repeat;}</style><script src="./animate.js"></script><script>window.addEventListener('load', function() {var cloud = document.querySelector('.cloud');var c_nav = document.querySelector('.c-nav');var lis = c_nav.querySelectorAll('li');var current = 0;for(var i = 0; i < lis.length; i++) {// 鼠标经过把当前li的位置作为目标值lis[i].addEventListener('mouseenter', function() {animate(cloud, this.offsetLeft);})// 鼠标离开回到初始位置lis[i].addEventListener('mouseleave', function() {animate(cloud, current);})// 当鼠标点击，就把当前位置做为目标值lis[i].addEventListener('click', function() {current = this.offsetLeft;for(var j = 0; j < lis.length; j++) {lis[j].className = '';}this.className = 'current';});}})</script></head><body><div id="c_nav" class="c-nav"><span class="cloud"></span><ul><li class="current"><a href="#">首页</a></li><li><a href="#">师资力量</a></li><li><a href="#">活动策划</a></li><li><a href="#">企业文化</a></li><li><a href="#">招聘信息</a></li><li><a href="#">公司简介</a></li><li><a href="#">lallalala</a></li><li><a href="#">哈哈哈哈</a></li></ul></div></body>
二、移动端网页特效:
1. 触屏事件:
移动端浏览器兼容性较好, 不需要考虑以前js的兼容问题, 可以放心的使用原生js书写效果, 但是移动端也有自己独特的方法. 比如:触屏事件touch(也称触摸事件), Android和IOS都有.
touch 对象代表一个触摸点. 触摸点可能是一根手指, 也可能是一根触摸笔. 触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作.
常见的触屏事件如下:
2. 触摸事件对象(TouchEvent)
TouchEvent是一类描述手指在触摸平面(触摸屏, 触摸板)的状态变化的事件. 这类事件用于描述一个或多个触点, 使开发者可以检测触点的移动, 触点的增加个和减少,等等.
touchstart, touchmove, touchend三个事件都会有各自的事件对象;
触摸事件三个常见独享列表:
3.案例：移动端拖动元素
touchstart、touchmove、touchend可以实现拖动元素但是拖动元素需要当前手指的坐标值 可以使用 targetTouches[0] 里面的pageX 和 pageY移动端拖动的原: 手指移动中，计算出手指移动的距离. 然后用盒子原来的位置 + 手指移动的距离手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置拖动元素三步:
(1) 触摸元素 touchstart: 获取手指初始坐标，同时获得盒子原来的位置;(2) 移动手指 touchmove: 计算手指的滑动距离，并且移动盒子(3) 离开手指 touchend:
注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
实现:
<head><title>移动端拖拽</title><style>.con {position: absolute;width: 200px;height: 200px;top: 100px;left: 150px;background-color: pink;}</style><script>window.addEventListener('load', function() {var con = document.querySelector('.con');// 获取手指的初始坐标var startX = startY = 0;// 获取盒子原来的位置var x = y = 0;// 添加事件con.addEventListener('touchstart', function(e) {startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;x = this.offsetLeft;y = this.offsetTop;})con.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></head><body> <div class="con"></div></body>
2. 案例: 移动端轮播图:
2.1 需求:
移动端轮播图功能和基本PC端一致
可以自动播放图片;手指可以拖动播放轮播图;
2.2. 案例分析:
自动播放功能开启定时器;移动端移动，可以使用translate 移动想要图片优雅的移动，请添加过渡效果自动播放功能-无缝滚动注意，判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断此时需要添加检测过渡完成事件 transitionend判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0;此时图片，去掉过渡效果，然后移动如果索引号小于0， 说明是倒着走， 索引号等于2此时图片，去掉过渡效果，然后移动2.3 classList 属性
classList属性是HTML5新增的一个属性，返回元素的类名; 但是ie10以上版本支持.
该属性用于在元素中添加，移除及切换 CSS 类; 有以下方法
添加类:
element.classList.add(’类名’)；
focus.classList.add('current');
移除类:
element.classList.remove(’类名’)
focus.classList.remove('current');
切换类:
element.classList.toggle(’类名’);
focus.classList.toggle('current');
注意:以上方法里面，所有类名都不带点
2.4 案例分析:
小圆点跟随变化效果;把ol里面li带有current类名的选出来去掉类名 remove;让当前索引号的小li 加上 current add;但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里面;手指滑动轮播图;本质就是ul跟随手指移动，简单说就是移动端拖动元素;触摸元素touchstart: 获取手指初始坐标;移动手指touchmove: 计算手指的滑动距离，并且移动盒子;离开手指touchend: 根据滑动的距离分不同的情况;如果移动距离小于某个像素 就回弹原来位置;如果移动距离大于某个像素就上一张下一张滑动;滑动也分为左滑动和右滑动判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑;如果是左滑就播放下一张 （index++）如果是右滑就播放上一张 (index–)<head><title>移动端轮播图</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/lunbo.css"><script>window.addEventListener('load', function() {var focus = document.querySelector('.focus');var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle')for(var i = 0; i < ul.children.length; i++) {var li = document.createElement('li');ol.appendChild(li);}ol.children[0].className = 'current';// 复制var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 获取focus的宽度var w = focus.offsetWidth;// 利用定时器实现自动轮播var index = 0;var timer = setInterval(function(e) {index ++;var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';},3000)ul.addEventListener('transitionend', function() {// 无缝滚动if(index >= ul.children.length - 1){index = 0;ul.style.transition = 'none';// 利用最新的索引号乘宽度去滚动图片var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';} else if(index < 0 ) {index = ul.children.length - 2;ul.style.transition = 'none';// 利用最新的索引号乘宽度去滚动图片var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';}// 3. 小圆点跟随变化// 把ol里面li带有current类名的选出来去掉类名 removeol.querySelector('.current').classList.remove('current');// 让当前索引号 的小li 加上 current addol.children[index].classList.add('current');})// 4 手触摸轮播图var startX = 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; // 如果用户手指移动过再去判断否则不做判断效果e.preventDefault(); // 阻止滚动屏幕的行为})ul.addEventListener('touchend', function(e) {if (flag) {// 如果移动大于大小的100px,判断是左/右活动if(Math.abs(moveX) >= 50) {if(moveX > 0){index--;}else {index++; }}// (2) 如果移动距离小于50像素就回弹var translatex = -index * w;ul.style.transition = 'all .1s';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)';}, 3000);}}) })</script></head><body><div class="focus"><ul><li><a href="#"><img src="image/focus.jpg" alt=""></a></li><li><a href="#"><img src="image/focus1.jpg" alt=""></a></li><li><a href="#"><img src="image/focus2.jpg" alt=""></a></li><li><a href="#"><img src="image/focus3.jpg" alt=""></a></li></ul><!-- 小圆圈 --><ol class="circle"></ol></div></body>
3. click 延时解决方案
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面
解决方案:
禁用缩放; 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟
<meta name="viewport" content="user-scalable=no">
利用touch事件自己封装这个事件解决300ms 延迟.
原理就是： 当手指触摸屏幕，记录当前触摸时间当手指离开屏幕， 用离开的时间减去触摸的时间如果时间小于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(){// 执行代码 });
使用插件. fastclick 插件解决300ms 延迟
4. 移动端常用开发插件:
4.1 什么是插件
移动端要求的是快速开发，所以经常会借助于一些插件来帮我完成操作，那么什么是插件呢？
JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用. 如轮播图和瀑布流插件;
特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小;
以前写的animate.js 也算一个最简单的插件
fastclick 插件解决 300ms 延迟. 使用延时
GitHub官网地址: /ftlabs/fastclick
4.2. 插件的使用
引入 js 插件文件;按照规定语法使用;fastclick 插件解决 300ms 延迟. 使用延时GitHub官网地址： /ftlabs/fastclickif ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}
4.3. Swiper 插件的使用:(触摸滑动)
中文官网地址: /
引入插件相关文件;按照规定语法使用;
4.4. 其他移动端常见插件
lsuperslide: /iscroll: /cubiq/iscroll4.5. 插件的使用总结
1.确认插件实现的功能2.去官网查看使用说明3.下载插件4.打开demo实例文件，查看需要引入的相关文件，并且引入5.复制demo实例文件中的结构html，样式css以及js代码4.6. 移动端视频插件 zy.media.js
H5 给提供了 video 标签，但是浏览器的支持情况不同;
不同的视频格式文件，可以通过source解决;
但是外观样式，还有暂停，播放，全屏等功能只能自己写代码解决;
这个时候可以使用插件方式来制作;
可以通过 JS 修改元素的大小、颜色、位置等样式;
<head><title>视频插件</title><link rel="stylesheet" href="./zy.media.min.css"><script src="./zy.media.min.js"></script><style>#modelView {background-color: #DDDDDD;z-index: 0;opacity: 0.7;height: 100%;width: 100%;position: relative;}.playvideo {margin: 100px auto;padding-top: auto;z-index: 9999;position: relative;width: 720px;height: 480px;}.zy_media {z-index: 999999999}</style><script>window.addEventListener('load', function() {zymedia('video', {autoplay: true});})</script></head><body><div class="playvideo"><div class="zy_media"><video data-config='{"mediaTitle": "哈哈哈哈"}'><source src="mov.mp4" type="video/mp4">您的浏览器不支持HTML5视频</video></div><div id="modelView"> </div></div></body>
5. 移动端常用开发框架
5.1. 移动端视频插件 zy.media.js
框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案. 框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发.
插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小.
前端常用的框架有 Bootstrap、Vue、Angular、React 等. 既能开发PC端，也能开发移动端
前端常用的移动端插件有 swiper、superslide、iscroll等.
框架： 大而全，一整套解决方案插件： 小而专一，某个功能的解决方案
5.2. Bootstrap
Bootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单
它能开发PC端，也能开发移动端
Bootstrap JS插件使用步骤：
1.引入相关js 文件;2.复制HTML 结构;3.修改对应样式;4.修改相应JS 参数;
6.本地存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
6.1.本地存储特性
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify() 编码后存储6.2.window.sessionStorage
生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用存储数据：
sessionStorage.setItem(key, value)
获取数据：
sessionStorage.getItem(key)
删除数据：
sessionStorage.removeItem(key)
清空数据：(所有都清除掉)
sessionStorage.clear()
6.3.window.localStorage
声明周期永久生效，除非手动删除 否则关闭页面也会存在可以多窗口（页面）共享（同一浏览器可以共享）以键值对的形式存储使用存储数据：
localStorage.setItem(key, value)
获取数据：
localStorage.getItem(key)
删除数据：
localStorage.removeItem(key)
清空数据：(所有都清除掉)
localStorage.clear()
6.4.案例：记住用户名
如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名
案例分析:
把数据存起来，用到本地存储关闭页面，也可以显示用户名，所以用到localStorage打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框当复选框发生改变的时候change事件如果勾选，就存储，否则就移除
实现:
<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;}username.addEventListener('change', function() {if(remember.checked) {localStorage.setItem('username', username.value);} else {localStorage.removeItem('username');}})</script>
