JavaScript-移动端网页特效

1、触屏事件
touchstart      手指摸到一个DOM元素时触发
touchmove       手指在一个DOM元素上滑动时触发
touchend        手指摸到一个DOM元素上移开时触发
touches         正在触摸屏幕的所有手指的列表
targetTouches   正在触摸当前DOM元素的手指列表
changedTouches  手指状态发生了改变的列表，从无到有，从有到无变化
2、移动端拖动元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: relative;
            background-color: purple;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div></div>
​
<script>
    let div = document.querySelector('div');
    let startX = 0;
    let startY = 0;
    let x = 0;
    let 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) {
        // 计算手指移动距离：手指移动之后的距离 - 移动之前的距离
        let moveX = e.targetTouches[0].pageX - startX;
        let moveY = e.targetTouches[0].pageY - startY;
        // 移动我们的盒子 盒子原来的位置 + 手指移动距离
        this.style.left = x + moveX + 'px';
        this.style.top = y + moveY + 'px';
        e.preventDefault();
    })
</script>
​
</body>
</html>
3、classList
classList       返回元素类名
1、添加类名       是在后面追加类名不会覆盖以前的类名 前面不需要加。
div.classList.add('three')
2、删除类名
div.classList.remove('one')
3、切换类
div.classList.toggle('one')
4、移动端轮播图及返回顶部
window.addEventListener('load',function () {
    // 1、获取元素
    let focus = document.querySelector('.focus');
    let ul = focus.children[0];
    let ol = focus.children[1];
    // 获得focus的宽度
    let focusWidth = focus.offsetWidth;
    // 2、利用定时器自动轮播图片
    let index = 0;
    let timer = setInterval(function () {
        index++;
        let translatex = - index * focusWidth;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX('+translatex+'px)'
    },2000);
    // 判断是否过渡完，监听过渡完的事件 transitionend
    ul.addEventListener('transitionend',function () {
        // 无缝滚动
        if (index >= 3){
            index = 0;
            // 去掉过渡效果
            ul.style.transition = 'none';
            // 利用最新的索引乘以宽度 去滚动图片
            let translatex = - index * focusWidth;
            ul.style.transform = 'translateX('+translatex+'px)';
        }else if (index < 0){
            index = 2;
            // 去掉过渡效果
            ul.style.transition = 'none';
            // 利用最新的索引乘以宽度 去滚动图片
            let translatex = - index * focusWidth;
            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、手指滑动轮播图
    // 触摸元素 touchstart 获取手指初始坐标
    let startx = 0;
    let movex = 0;
    let flag = false; // 如果用户手指移动过我们再去判断，否则不做判断效果
    ul.addEventListener('touchstart',function (e) {
        startx = e.targetTouches[0].pageX;
        // 手指触摸的时候就停止定时器
        clearInterval(timer);
    })
    // 移动手指touchmove：计算手指的滑动距离，并且移动盒子
    ul.addEventListener('touchmove',function (e) {
        // 计算移动距离
        movex = e.targetTouches[0].pageX - startx;
        // 移动盒子 ：盒子原来的位置 + 手指移动的距离
        let translatex = - index * focusWidth + movex;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX('+translatex+'px)';
        flag = true;       //如果用户手指移动过我们再去判断否则不至于判断
        e.preventDefault(); //阻止滚动屏幕的行为
    });
​
    // 手指离开  根据移动距离去判断是回弹还是播放上一张还是下一张
    ul.addEventListener('touchend',function () {
       if (flag){
           // (1) 如果移动距离大于50像素我们就播放上一张或者下一张
           if (Math.abs(movex)>50){
               // 如果是右滑就是 播放上一张 movex 是正直
               if (movex > 0){
                   index--;
               }else{
                   // 如果是右滑就是 播放上一张 movex 是正直
                   index++;
               }
               let translatex = - index * focusWidth;
               ul.style.transition = 'all .3s';
               ul.style.transform = 'translateX('+translatex+'px)';
           }else{
               // (2) 如果移动距离小于50像素我们就回弹
               let translatex = - index * focusWidth;
               ul.style.transition = 'all .1s';
               ul.style.transform = 'translateX('+translatex+'px)';
           }
       }
        // 手指离开的时候就重新开启定时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            let translatex = - index * focusWidth;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX('+translatex+'px)'
        },2000);
    });
​
    // 返回顶部模块
    let goBack = document.querySelector('.goBack');
    let 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);
    })
})
5、本地存储之sessionStorage
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">删除所有数据</button>
​
<script>
    // 1、生命周期为关闭浏览器窗口
    // 2、在同一个窗口下数据可以共享
    // 3、以键值对的形式存储使用
    let ipt = document.querySelector('input');
    let set = document.querySelector('.set');
    let get = document.querySelector('.get');
    let remove = document.querySelector('.remove');
    let del = document.querySelector('.del');
​
    // 存储数据
    set.addEventListener('click',function () {
        let name = ipt.value;
        sessionStorage.setItem('uname',name);
    });
    // 获取数据
    get.addEventListener('click',function () {
        console.log(sessionStorage.getItem('uname'));
    });
    // 删除数据
    remove.addEventListener('click',function () {
        sessionStorage.removeItem('uname');
    });
    // 删除所有所有数据
    del.addEventListener('click',function () {
        sessionStorage.clear();
    });
</script>
</body>
</html>
6、本地存储之localStorage
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">删除所有数据</button>
​
<script>
    // 1、生命周期永久生效，除非手动删除否则关闭页面也会存在
    // 2、可以多窗口（页面）共享（同一个浏览器可以共享）
    // 3、以键值对的形式存储使用
    let ipt = document.querySelector('input');
    let set = document.querySelector('.set');
    let get = document.querySelector('.get');
    let remove = document.querySelector('.remove');
    let del = document.querySelector('.del');
​
    // 存储数据
    set.addEventListener('click',function () {
        let name = ipt.value;
        localStorage.setItem('uname',name);
    });
    // 获取数据
    get.addEventListener('click',function () {
        console.log(localStorage.getItem('uname'));
    });
    // 删除数据
    remove.addEventListener('click',function () {
        localStorage.removeItem('uname');
    });
    // 删除所有所有数据
    del.addEventListener('click',function () {
        localStorage.clear();
    });
</script>
</body>
</html>
7、记住用户名案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" class="uname">
    <input type="checkbox" name="" class="remember">记住用户名
    <script>
        let uname = document.querySelector('.uname');
        let remember = document.querySelector('.remember');
        if (localStorage.getItem('uname')){
            uname.value = localStorage.getItem('uname');
            remember.checked = true;
        }
        remember.addEventListener('change',function () {
            if (this.checked){
                localStorage.setItem('uname',uname.value);
            }else {
                localStorage.removeItem('uname');
            }
        })
    </script>
</body>
</html>

 

posted @ 2022-03-12 00:21  小鹅爸爸  阅读(39)  评论(0)  编辑  收藏  举报