文章目录
一、常见网页特效:
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.offsetTop
var 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 对象代表一个触摸点. 触摸点可能是一根手指, 也可能是一根触摸笔. 触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作.
常见的触屏事件如下:
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开是触发 |
2. 触摸事件对象(TouchEvent)
TouchEvent是一类描述手指在触摸平面(触摸屏, 触摸板)的状态变化的事件. 这类事件用于描述一个或多个触点, 使开发者可以检测触点的移动, 触点的增加个和减少,等等.
touchstart, touchmove, touchend三个事件都会有各自的事件对象;
触摸事件三个常见独享列表:
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的列表 |
| targerTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变, 从无到有,从有到无的变化 |
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类名的选出来去掉类名 remove
ol.querySelector('.current').classList.remove('current');
// 让当前索引号 的小li 加上 current add
ol.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官网地址: https://github.com/ftlabs/fastclick
4.2. 插件的使用
- 引入 js 插件文件;
- 按照规定语法使用;
- fastclick 插件解决 300ms 延迟. 使用延时
- GitHub官网地址： https://github.com/ftlabs/fastclick
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
4.3. Swiper 插件的使用:(触摸滑动)
中文官网地址: https://www.swiper.com.cn/
- 引入插件相关文件;
- 按照规定语法使用;
4.4. 其他移动端常见插件
- lsuperslide: http://www.superslide2.com/
- iscroll: https://github.com/cubiq/iscroll
4.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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
