移动端适应

最新推荐文章于 2024-09-27 15:52:57 发布

Sodapease

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量130

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/Sodapease/article/details/128737510

版权

文章介绍了如何使用CSS3的MediaQuery进行移动端适配，包括媒体类型和特性。接着讲解了移动端交互，特别是触摸事件（touchstart,touchmove,touchend）在拖动元素中的应用。此外，文章还详细展示了如何通过JavaScript和CSS实现移动端轮播图的自动播放和手动拖动功能。

摘要由CSDN通过智能技术生成

一、Media Query

CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)

1.1媒体类型

值	描述
all	默认。用于所有媒体类型设备
print	用于打印机
screen	用于计算机屏幕、平板电脑、智能手机等
speech	用于朗读页面的屏幕阅读器

1.2媒体特性

值	描述
color	输出设备每个像素的比特值，常见的有 8、16、32 位
color-index	输出设备的颜色查询表中的条目数量
aspect-ratio	视口（viewport）的宽高比
device-aspect-ratio	输出设备的宽高比
device-height	输出设备渲染表面（如屏幕）的高度
device-width	输出设备渲染表面（如屏幕）的宽度
grid	输出设备使用网格屏幕还是点阵屏幕

二、移动端的交互

鼠标 => 触摸

事件	说明
`touchstart`	触摸开始的时候触发
`touchmove`	手指在屏幕上滑动的时候触发
`touchend`	触摸结束的时候触发

const div = document.querySelector('div')
div.addEventListener('touchstart',() => {
    console.log('touch start')
})
div.addEventListener('touchmove',() => {
    console.log('smooth')
})
div.addEventListener('touchend',() => {
    console.log('touch end')
})

2.1移动端拖动元素

touchstart、touchmove、touchend可以实现拖动元素
拖动元素需要当前手指的坐标值可以使用targetTouches[0]里面的pageX和pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离
手指移动的距离：手指滑动中的位置 – 手指刚开始触摸的位置

拖动元素三部曲：

触摸元素touchstart ：获取手指初始坐标，同时获得盒子原来位置
移动手指touchmove：计算手指滑动距离，并且移动盒子
离开手指touchend：

注：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();

每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

列表	说明
`touches`	当前位于屏幕上的所有手指的列表
`targetTouches`	位于当前DOM元素上的手指列表
`changedTouches`	涉及当前事件手指的列表

const 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
    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'
    this.style.top = y + moveY + 'px'
	e.preventDefault()//阻止屏幕的滚动行为
})

在这里插入图片描述

除了touch事件外，ios还提供了gesture事件，即多指操作。当有两根以上的手指触摸屏幕时，就会触发该事件：

事件	说明
`gesturestart`	当一个手指已经按在屏幕上，另一个手指又触摸屏幕的时候触发。类似于touchstart的作用一样
`gesturechange`	当触摸屏幕的任何一个手指的位置发生变化的时候触发
`gestureend`	当任何一个手指从屏幕上面移开时触发

移动端常见特效

3.1移动端轮播图

可以自动播放图片
①开启定时器
②移动端移动，可以使用translate移动
③添加检测过渡完成事件 transitionend
④判断条件：如果索引号等于3说明走到最后一张图片，此时索引号复原为0
⑤此时图片去掉过渡效果，然后移动
⑥ol带有active类名的li选中remove
⑦当前索引号的li add类名
⑧等过渡结束后变化，写在transitionend事件里
手指可以拖动播放轮播图
①移动端拖动元素
②移动距离小于某个像素回弹原来位置
③移动距离大于某个像素就滑动

HTML&&CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        .container{
            overflow: hidden;
            width: 460px;
            margin: 200px auto;
            border-radius: 25px;
            height: 215px;
        }
        .swiper{
            position: relative;
            overflow: hidden;
            width: 500%;
            margin-left: -100%;
        }
        .swiper li{
            float: left;
            width: 20%;
        }
        .change{
            position: absolute;
            left: 500px;
        }
        .active{
            width: 10px !important;
            border-radius: 10px !important;
            background-color: darkblue !important;
        }
        .change li{
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="swiper">
            <li><img src="./static/wallpaper.jpg" alt=""></li>
            <li><img src="./static/BATTLEGROUNDS.jpg" alt=""></li>
            <li><img src="./static/Goose Goose Duck.jpg" alt=""></li>
            <li><img src="./static/wallpaper.jpg" alt=""></li>
            <li><img src="./static/BATTLEGROUNDS.jpg" alt=""></li>
        </ul>
    </div>
    <script src="./test.js"></script>
</body>
</html>

JS

window.addEventListener('load', function () {
    //获取元素
    var container = document.querySelector('.container')
    var ul = document.querySelector('.swiper')
    //获得container的宽度
    var wid = container.offsetWidth
    //利用定时器自动轮播图片
    var index = 0
    var timer = setInterval(function () {
        index++
        var translatex = -index * wid
        ul.style.transition = 'all 2s'
        ul.style.transform = 'translateX(' + translatex + 'px)'
    }, 2000)
    //等过渡完成之后，再去判断，监听过渡完成的事件 transitionend
    ul.addEventListener('transitionend', function () {
        // console.log(1)
        if (index >= 2) {
            index = 0
            //去掉过渡效果
            ul.style.transition = 'none'
            var translatex = -index * wid
            ul.style.transform = 'translateX(' + translatex + 'px)'
        } else if (index < 0) {
            index = 2
            ul.style.transition = 'none'
            var translatex = -index * wid
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }
    })
    //获取手指初始坐标
    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 * wid + moveX
        //手指拖动的时候，不需要动画效果所以要取消过渡
        ul.style.transition = 'none'
        ul.style.transform = 'translateX(' + translatex + 'px)'
    })
    ul.addEventListener('touchend', function (e) {
        //移动距离大于某个像素就滑动
        if (Math.abs(moveX) > 50) {
            if (moveX > 0) {
                index--
            } else {
                index++
            }
            var translatex = -index * wid
            ul.style.transition = 'all .5s'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        } else {
            //移动距离小于某个像素回弹原来位置
            var translatex = -index * wid
            ul.style.transition = 'all .1s'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }
    })
})