移动Web(四)
定位轮播图
1-修改结构
2-修改样式
3-动态设置ul的高度
4-主体思路
改变index的值
通过index的值推算出上一张，下一张，当前张
添加过渡、做动画
5-定时器切换轮播图
累加index
检测数据是否越界，推算出prev /now/next
去除其他li的过渡
当前活动的li添加过程
prev/now/next 进行移动切换
6-触屏轮播图
触屏开始
清除定时器
记录起始坐标
触屏移动
记录移动坐标
计算距离差
去除过渡
prev/now/next 跟随 移动
触屏结束
判断是否要切换图片
改变index的值
推算prev/now/next
排他， 当前元素添加过渡
进行位移
7-注意：
左滑：左边的盒子不需要加过渡
右滑：右边的盒子不需要加过渡
反弹回去时，都加过渡
//动态设置ul的高
function setHeight() {
document.querySelector('.jd-banner ul').style.height
= document.querySelector('.jd-banner ul img').offsetHeight + 'px';
}
//轮播图代码
function banner() {
var index = 0;
var now = 0;
var prev = 7;
var next = 1;
//获取元素
var banner = document.querySelector('.jd-banner');
var width = banner.offsetWidth; //获取ul的宽
var lis = document.querySelectorAll('.jd-banner ul li');
//设置和检测数据合理性
function setData () {
if(index > 7) {
index = 0;
}
if (index < 0) {
index = 7;
}
prev = index - 1;
next = index + 1;
now = index;
if (prev < 0) {
prev = 7;
}
if(next > 7) {
next = 0;
}
}
//定时器切换轮播图
var timer = setInterval(function () {
index++;
//设置和检测数据合理性
setData();
//清除其他位移
lis.forEach(function (v,i) {
v.style.transition = 'none';
})
//添加过渡
lis[now].style.transition = 'all .3s';
lis[prev].style.transition = 'all .3s';
lis[next].style.transition = 'none';
//把图片移动到对应的地方
lis[now].style.transform = 'translateX('+ 0+'px)';
lis[prev].style.transform = 'translateX(' + (-width + 0) + 'px)';
lis[next].style.transform = 'translateX(' + (width +0) + 'px)';
}, 2000)
var startX = 0;
var moveX = 0;
var distanceX = 0;
//触屏开始
banner.addEventListener('touchstart', function (e) {
clearInterval(timer);
startX = e.targetTouches[0].clientX;
})
//触屏移动
banner.addEventListener('touchmove', function (e) {
moveX = e.targetTouches[0].clientX;
distanceX = moveX - startX;
//移除过渡
lis[now].style.transition = 'none';
lis[prev].style.transition = 'none';
lis[next].style.transition = 'none'
//跟随手指移动
lis[now].style.transform = 'translateX('+ distanceX+'px)';
lis[prev].style.transform = 'translateX(' + (-width + distanceX) + 'px)';
lis[next].style.transform = 'translateX(' + (width +distanceX) + 'px)';
})
//触屏结束
banner.addEventListener('touchend', function (e) {
var dir = ''; //记录手指画的方向
if (Math.abs(distanceX) > width/3) {
if (distanceX > 0) {
index--;
dir = 'right';
}
if (distanceX< 0) {
index++;
dir = 'left';
}
setData();
//清除其他位移
lis.forEach(function (v,i) {
v.style.transition = 'none';
})
// 左滑 prev 不需要过渡
// 右滑 next 不需要过渡
lis[now].style.transition = 'all .3s';
lis[prev].style.transition = dir =='right'? 'none' : 'all 0.3s';
lis[next].style.transition = dir == 'left' ?'none' :'all 0.3s';
} else {
//添加过渡 ， 反弹回去 都加过渡效果
lis[now].style.transition = 'all .3s';
lis[prev].style.transition = 'all .3s';
lis[next].style.transition = 'all .3s';
}
//把图片固定到对应的地方
lis[now].style.transform = 'translateX('+ 0+'px)';
lis[prev].style.transform = 'translateX(' + (-width + 0) + 'px)';
lis[next].style.transform = 'translateX(' + (width +0) + 'px)';
})
}
swiper插件的使用
关于tap事件与click事件
- click事件在pc端非常用，但是在移动端会有300ms左右的延迟，比较影响用户的体验，300ms用于判断双击还是长按事件，只有当没有后续的的动作发生时，才会触发click事件
- tap事件只要轻触了，就会触发，体验更好。
/*
* 由于移动端的点击事件click 有300左右的延迟， 用户体验有待提升
* 希望 能用touch事件封装一个相应速度更快的 点击事件 tap
*
* touch判断为点击事件的条件：
*
* 1、触屏开始 到触屏结束 手指没有移动
* 2、接触屏幕的时间 小于指定的值 150ms *
*
* 满足以上两个条件 可以认为是点击事件触发了
* */
/*
* 插件功能：
* 给指定的元素 绑定优化后的移动的点击事件--- tap事件
* 参数：
* obj:要绑定优化后点击事件的元素
* callback: 当点击事件触发 执行什么操作
* */
var itcast={
tap:function(obj,callback){
if(typeof obj=='object'){ //判断传入的obj是否为对象
var startTime=0;//记录起始事件
var isMove=false; //记录是否移动
obj.addEventListener('touchstart',function(){
startTime=Date.now(); //获取当前时间戳
});
obj.addEventListener('touchmove',function(){
isMove=true; //记录移动
});
obj.addEventListener('touchend',function(e){
//判断是否满足点击的条件
if(!isMove&&Date.now()-startTime<150){
//tap点击事件触发
//if(callback){
// callback();
//}
//因为是自己定义的函数所以top没有事件对象所以用touched的事件对象给传出去就行了
callback&&callback(e);
}
//数据重置
isMove=false;
startTime=0;
});
}
}
}
zepto框架介绍
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
zepto与jquery的区别
- jquery针对pc端，主要用于解决浏览器兼容性问题，zepto主要针对移动端。
- zepto比jquery轻量，文件体积更小
- zepto封装了一些移动端的手势事件
zepto的基本使用
zepto的使用与jquery基本一致，zepto是分模块的，需要某个功能，就需要引入某个zepto的文件。
<script src="zepto/zepto.js"></script>
<script src="zepto/event.js"></script>
<script src="zepto/fx.js"></script>
<script>
$(function () {
$(".box").addClass("demo");
$("button").on("click", function () {
$(".box").animate({width:500}, 1000);
});
});
</script>
zepto手势事件
zepto中根据touchstart touchmove touchend封装了一些常用的手势事件
tap // 轻触事件,用于替代移动端的click事件，因为click事件在老版本中会有300ms的延迟
//穿透的问题 fastclick:
swipe //手指滑动时触发
swipeLeft //左滑
swipeRight //右滑
swipeUp //上滑
swipeDown //下滑
媒体查询
媒体查询（Media Query）是CSS提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。
设备分类
| 分类 | 宽度范围 |
|---|---|
| 大屏设备 | >1200px |
| 中屏设备 | 992px~1200px |
| 小屏设备 | 768px~992px |
| 超小屏设备 | < 768px |
媒体查询的使用
需求：
<!--
需求：
大屏设备(>1200px) 版心：1170px 背景色：红色
中屏设备(992-1200) 版心：970px 背景色：蓝色
小屏设备(768-992) 版心：750px 背景色：黄色
超小屏设备(<768px) 版心：100% 背景色：绿色
-->
响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。
媒体查询语法：
/*查询屏幕*/
@media screen and 条件 {
}
/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
background-color: red;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.container {
width: 970px;
background-color: blue;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.container {
width: 750px;
background-color: yellow;
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
background-color: green;
}
}
弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。
