移动端⽹页特效
移动端⽹页特效
1.触摸事件
touch对象代表这样⼀个触摸点
常见触摸事件：
触摸touch事件说明
touchstart⼿指触摸到⼀个 DOM 元素触发
touchmove⼿指在⼀个 DOM 元素上滑动时触发
touchend⼿指从⼀个 DOM 元素上移开时触发2.触摸事件对象
TouchEvent 是⼀类描述⼿指在触摸平⾯的状态变化的事件
touchstart、touchmove、touchend 三个事件都会各⾃有事件对象
触摸事件对象三个常见对象列表：
触摸列表说明
touches正在触摸屏幕的所有⼿指的⼀个列表targetTouches正在触摸当前 DOM 元素上的⼿指的⼀个列表
changedTouches⼿指状态发⽣了改变的列表，从⽆到有，从有到⽆变化3.移动端拖动元素
（1） touchstart、touchmove、touchend 可以实现拖动元素
（2）拖动元素需要当前⼿指的坐标值，可以使⽤targetTouches[0]⾥⾯的 pageX和 pageY
（3）移动端拖动原理：⼿指移动中，计算出⼿指移动的距离。然后⽤盒⼦原来的位置+⼿指移动的距离
（4）⼿指移动的距离 = ⼿指滑动的位置 - ⼿指刚触摸的位置
拖动元素三部曲：
（1）触摸元素touchstart：获取⼿指初始坐标，同时获得盒⼦原来的位置
（2）移动⼿指touchmove：计算⼿指的滑动距离，并且移动盒⼦
（3）离开⼿指touchend：
⼿指移动会触发滚动屏幕，要阻⽌默认的屏幕滚动e.preventDefault();
例⼦：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title></title>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<div></div>
<script>
// （1）触摸元素 touchstart：获取⼿指初始坐标，同时获得盒⼦原来的位置        // （2）移动⼿指 touchmove：计算⼿指的滑动距离，并且移动盒⼦
// （3）离开⼿指 touchend:
var div = document.querySelector('div');
var startX = 0; //获取⼿指初始坐标
var startY = 0;
var x = 0; //获得盒⼦原来的位置
var y = 0;
div.addEventListener('touchstart', function(e) {
//  获取⼿指初始坐标
startX = e.targetTouches[0].pageX;
网页float是什么意思
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
div.addEventListener('touchmove', function(e) {
//  计算⼿指的移动距离：⼿指移动之后的坐标减去⼿指初始的坐标
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
// 移动我们的盒⼦盒⼦原来的位置 + ⼿指移动的距离
this.style.left = x + moveX + 'px';
p = y + moveY + 'px';
e.preventDefault(); // 阻⽌屏幕滚动的默认⾏为
});
</script>
</body>
</html>
效果图如下：
4.移动端常见特效
（1）移动端轮播图
和PC端轮播图⼀样
1. ⾃动播放轮播图
2. ⼿指可以拖动轮播图
我们补充学习⼀个属性classList属性
classList属性返回元素的类名，ie10版本以上⽀持
该属性⽤于元素添加，移除及其切换CSS类，有以下⽅法
添加类：
element.classList.add('类名');
不会覆盖以前的类名，是在后⾯追加类名，类名前⾯不需要加.
删除类：
ve('类名');
切换类：
le('类名');
我们可以先做个案例：开关灯
代码：
<meta name="viewport" content="width=device-width, user-scalable=no,  initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title></title>
<style>
.bg {
background-color: black;
}
</style>
</head>
<body>
<div></div>
<button> 开关灯</button>
<script>
// classList 返回元素的类名
var div = document.querySelector('div');
// 切换类
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
document.le('bg');
})
</script>
</body>
</html>
好了，有了这个属性做圆点跟随变化效果就容易多了，上代码html代码：
<meta name="viewport" content="width=device-width, user-scalable=no,  initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<!--引⼊初始化⽂件-->
<link rel="stylesheet" href="css/normalize.css"/>
<!--引⼊⾸页样式-->
<link rel="stylesheet" href="css/index.css"/>
<script src="js/index.js"></script>
<script src="js/animate.js"></script>
<title>携程⽹⾸页</title>
</head>
<body>
<!--焦点图某块-->
<div class="focus">
<ul>
<li><img src="upload/focus3.jpg" alt=""></li>
<li><img src="upload/focus1.jpg" alt=""></li>
<li><img src="upload/focus2.jpg" alt=""></li>
<li><img src="upload/focus3.jpg" alt=""></li>
<li><img src="upload/focus1.jpg" alt=""></li>
</ul>
<!--⼩圆点-->
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
css代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。