案例：移动端轮播图
基本PC端一致。 1. 可以自动播放图片 2. 手指可以拖动播放轮播图
移动端轮播图-结构搭建
移动端轮播图-布局分析
就是我们想要图片显示在同一行，用了浮动，但是父元素的宽度不够，因此给他设置宽度，有多少图片，它父元素的宽度就是多少，我们有5张图片，因此是500%，但是有发现是图片放大了，原来img的找他的父元素li如果没有设置宽度，它就会去找ul的宽度，因此最后是img=500%，所有要设置li的宽度，而li的宽度是将一个块区域分成5等分，每等分占20%，所有li的宽度为25%，最后还要清除浮动，如果没有清除，后面的元素也会跟着浮动。
移动端轮播图-滚动图片
案例分析
① 自动播放功能 ② 开启定时器 ③ 移动端移动，可以使用translate 移动 ④ 想要图片优雅的移动，请添加过渡效果
transform: translateX(200px); CSS3里面的样式，之前考虑到了兼容性问题，所有没有使用这个，而移动端没有这个问题
window.addEventListener('load', function() {
// 1.获取元素
var focus=document.querySelector('.focus');
var ul=focus.children[0];
var w=focus.offsetWidth;
// 2.利用定时器自动轮播图图片
var index=0;
var timer=setInterval(function(){
index++;
var translatex=-index*w;
// 延迟3秒
ul.style.transition='all .3s';
ul.style.transform='translateX('+translatex+'px)';
},2000);
})
移动端轮播图-无缝滚动
window.addEventListener('load', function() {
// 1.获取元素
var focus=document.querySelector('.focus');
var ul=focus.children[0];
var w=focus.offsetWidth;
// 2.利用定时器自动轮播图图片
var index=0;
var timer=setInterval(function(){
index++;
var translatex=-index*w;
// 延迟3秒
ul.style.transition='all .3s';
ul.style.transform='translateX('+translatex+'px)';
},2000);
// 等我们过渡完成之后，再去判断，监听过渡完成的事件 transitionend
ul.addEventListener('transitionend',function(){
console.log(index)
// 无缝滚动
if(index==3){
index=0;
// 去掉过渡效果，这可以让我们快速跳到目标位置
ul.style.transition='none';
// 利用最新的索引号乘以宽度，去滚动图片
ul.style.translatex=-index*w;
ul.style.transform='translateX('+translatex+'px)'
}else if(index<0){
index=2;
ul.style.translatex=-index*w;
ul.style.transform='translateX('+translatex+'px)'
}
})
})classList类名操作
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。 该属性用于在元素中添加，移除及切换 CSS 类。有以下方法
添加类：
element.classList.add（’类名’）；
移除类：
element.classList.remove（’类名’）;
切换类：
element.classList.toggle（’类名’）；
注意以上方法里面，所有类名都不带点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bg {
background-color: black;
}
</style>
</head>
<body>
<div class="one two"></div>
<button> 开关灯</button>
<script>
// classList 返回元素的类名
var div = document.querySelector('div');
// console.log(div.classList[1]);
// 1. 添加类名 是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
div.classList.add('three');
// 2. 删除类名
div.classList.remove('one');
// 3. 切换类
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
document.body.classList.toggle('bg');
})
</script>
</body>
</html>
移动端轮播图-小圆圈跟随变化
① 小圆点跟随变化效果
② 把ol里面li带有current类名的选出来去掉类名 remove
③ 让当前索引号 的小li 加上 current add
④ 但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里面
// 3.小圆点跟随变化
// 离除所有licurrent类名选出来，然后去掉类名
ol.querySelector('li.current').classList.remove('current');
// 让当前索引号 的小li 加上current add
ol.children[index].classList.add('current');移动端轮播图-手指拖动轮播图
① 手指滑动轮播图
② 本质就是ul跟随手指移动，简单说就是移动端拖动元素
③ 触摸元素 touchstart： 获取手指初始坐标
④ 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
var startX=0;
var moveX=0;//后面要使用这个移动距离所有要定义一个全局变量
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)'
})
移动端轮播图-手指滑动播放上一张下一张
⑤ 离开手指 touchend: 根据滑动的距离分不同的情况
⑥ 如果移动距离小于 某个像素 就回弹原来位置
⑦ 如果移动距离大于某个像素就上一张下一张滑动。
⑧ 滑动也分为左滑动和右滑动 判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑
⑨ 如果是左滑 就播放下一张 （index++）
⑩ 如果是右滑 就播放上一张 (index--)
// 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
ul.addEventListener('touchend',function(e){
// (1)如果移动距离大于50px就播放上一张或下一张
if(Math.abs(moveX)>50){
// 如果是右滑 播放上一张 moveX就是正值
if(moveX>0){
index--;
}else{
// 如果是左滑 播放下一张 moveX就负值
index++;
}
var translatex=-index*w;
ul.style.transition='all .3s';
ul.style.transform='translateX('+translatex+'px)'
}
})移动端轮播图-回弹效果
小于50就让它回弹，而不是让它傻蛋蛋的在原地
完整代码
window.addEventListener('load', function() {
// 1.获取元素
var focus=document.querySelector('.focus');
var ul=focus.children[0];
var ol=focus.children[1];
var w=focus.offsetWidth;
// 2.利用定时器自动轮播图图片
var index=0;
var timer=setInterval(function(){
index++;
var translatex=-index*w;
// 延迟3秒
ul.style.transition='all .3s';
ul.style.transform='translateX('+translatex+'px)';
},2000);
// 等我们过渡完成之后，再去判断，监听过渡完成的事件 transitionend
ul.addEventListener('transitionend',function(){
// console.log(index)
// 无缝滚动
if(index>=3){
index=0;
// 去掉过渡效果，这可以让我们快速跳到目标位置
ul.style.transition='none';
// 利用最新的索引号乘以宽度，去滚动图片
var translatex=-index*w;
ul.style.transform='translateX('+translatex+'px)'
}else if(index<0){
index=2;
ul.style.translatex=-index*w;
ul.style.transform='translateX('+translatex+'px)'
}
// 3.小圆点跟随变化
// 离除所有licurrent类名选出来，然后去掉类名
ol.querySelector('li.current').classList.remove('current');
// 让当前索引号 的小li 加上current add
ol.children[index].classList.add('current');
});
// 手指滑动轮播图
var startX=0;
var 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){
// (1)如果移动距离大于50px就播放上一张或下一张
if(Math.abs(moveX)>50){
// 如果是右滑 播放上一张 moveX就是正值
if(moveX>0){
index--;
}else{
// 如果是左滑 播放下一张 moveX就负值
index++;
}
var translatex=-index*w;
ul.style.transition='all .3s';
ul.style.transform='translateX('+translatex+'px)'
}else{
var translatex=-index*w;
ul.style.transition='all .3s';
ul.style.transform='translateX('+translatex+'px)'
}
}
// 当手指离开时候后重新开启定时器
clearInterval(timer)
timer=setInterval(function(){
index++;
var translatex=-index*w;
// 延迟3秒
ul.style.transition='all .3s';
ul.style.transform='translateX('+translatex+'px)';
},2000);
})
})返回顶部模块制作
当页面滚动某个地方，就显示，否则隐藏
点击可以返回顶部
案例分析
① 滚动某个地方显示
② 事件： scroll 页面滚动事件
③ 如果被卷去的头部（window.pageYOffset ）大于某个数值
④ 点击， window.scroll(0,0) 返回顶部
// 返回顶部模块制作
var goBack=document.querySelector('.goBack');
var nav=document.querySelector('nav')
window.addEventListener('scroll',function(){
if(window.pageYOffset>=nav.offsetTop){
goBack.style.display='block';
}else{
goBack.style.display='none';
}
})
goBack.addEventListener('click',function(){
window.scroll(0,0)
})click 延时解决方案
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
当我们点击时，它会考虑我们是不是要双击，因此就会有延迟
解决方案：
1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。
<meta name="viewport" content="user-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(){ // 执行代码 });3. 使用插件。 fastclick 插件解决 300ms 延迟。
扫一扫
1858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
