Web API(6)

头像
已注销
    阅读 22 分钟
    1

    缓慢动画的原理

    缓慢动画就是让元素的运动速度有所变化，最常见的缓慢动画就是让动画速度慢慢停下来
    核心思路
    • 让盒子每次移动的距离慢慢变小，速度就会慢慢变小
    • 核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
    • 停止的条件：让盒子当前的位置等于目标的位置，就停止定时器
    • 注意步长值需要取整
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        button {
            margin: 50px;
        }
        
        img {
            position: absolute;
            display: block;
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <button>点击移动至800</button>
    <button>点击移动至0</button>
    <img src="./image/头像.jpg" alt="">
    <script>
        var bth = document.querySelectorAll('button');
        var img = document.querySelector('img')
            // obj：目标对象   target:目标位置
        function aniamte(obj, target) {
            // 清除以前的定时器，只保留当前的计时器

            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 如果步长为正值 则取大  如果步长为负值 则取小
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                // 判断：如果目标对象的位置等于目标位置，则清除定时器
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer)
                }
                obj.style.left = obj.offsetLeft + step + "px"
            }, 15);

        }

        // 进行调用
        bth[0].addEventListener('click', function() {
            aniamte(img, 800)
        })
        bth[1].addEventListener('click', function() {
            aniamte(img, 0)
        })
    </script>
</body>

</html>

    image

    缓慢动画添加回调函数

    核心思路：回调函数要添加到定时器结束的位置
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        button {
            margin: 50px;
        }
        
        img {
            position: absolute;
            display: block;
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
        
        .photo {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <button>点击移动至800</button>
    <button>点击移动至0</button>
    <img src="./image/头像.jpg" alt="" class="img">
    <script>
        var bth = document.querySelectorAll('button');
        var img = document.querySelector('img')
            // obj：目标对象   target:目标位置
        function aniamte(obj, target, callback) {
            // 清除以前的定时器，只保留当前的计时器

            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 如果步长为正值 则取大  如果步长为负值 则取小
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                // 判断：如果目标对象的位置等于目标位置，则清除定时器
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    // 回调函数要添加到定时器结束的位置
                    if (callback) {
                        callback()
                    }
                }
                obj.style.left = obj.offsetLeft + step + "px"
            }, 15);

        }

        // 进行调用
        bth[0].addEventListener('click', function() {
            aniamte(img, 800, function() {
                img.className = 'img'
            })
        })
        bth[1].addEventListener('click', function() {
            aniamte(img, 0, function() {
                img.className = 'photo img'

            })
        })
    </script>
</body>

</html>

    image

    引进animate动画函数

    animate.js文件

    var bth = document.querySelectorAll('button');
var img = document.querySelector('img')
    // obj：目标对象   target:目标位置
function aniamte(obj, target, callback) {
    // 清除以前的定时器，只保留当前的计时器

    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 如果步长为正值 则取大  如果步长为负值 则取小
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        // 判断：如果目标对象的位置等于目标位置，则清除定时器
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // 回调函数要添加到定时器结束的位置
            if (callback) {
                callback()
            }
        }
        obj.style.left = obj.offsetLeft + step + "px"
    }, 15);

}

// 进行调用
bth[0].addEventListener('click', function() {
    aniamte(img, 800, function() {
        img.className = 'img'
    })
})
bth[1].addEventListener('click', function() {
    aniamte(img, 0, function() {
        img.className = 'photo img'

    })
})

    主文件

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .sliderbar {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            cursor: pointer;
        }
        
        .con {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            z-index: -1;
        }
    </style>
    <script src="./animate.js"></script>
</head>

<body>
    <div class="sliderbar">
        <span> ← </span>
        <div class="con">问题反馈</div>
    </div>

    <script>
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');

        sliderbar.addEventListener('mouseenter', function() {
            aniamte(con, -160, function() {
                sliderbar.children[0].innerHTML = "→"
            })
        })


        sliderbar.addEventListener('mouseleave', function() {
            aniamte(con, 0, function() {
                sliderbar.children[0].innerHTML = "← "
            })
        })
    </script>

</body>

</html>

    image

    轮播图（重点）

    轮播图也称为焦点图，是网页中比较常见的网页特效。

    功能需求：

    1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

    2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

    3.图片播放的同时，下面小圆圈模块跟随一起变化。

    4.点击小圆圈，可以播放相应图片。

    5.鼠标不经过轮播图，轮播图也会自动播放图片。

    6.鼠标经过，轮播图模块， 自动播放停止。
    animate文件

    function aniamte(obj, target, callback) {
    // 清除以前的定时器，只保留当前的计时器

    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 如果步长为正值 则取大  如果步长为负值 则取小
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        // 判断：如果目标对象的位置等于目标位置，则清除定时器
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // 回调函数要添加到定时器结束的位置
            if (callback) {
                callback()
            }
        }
        obj.style.left = obj.offsetLeft + step + "px"
    }, 15);

}

    主文件

    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮播图</title>
        <style>
            * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        .foucs {
            overflow: hidden;
            position: relative;
            width: 990px;
            height: 540px;
            margin: 200px auto;
        }
        
        a {
            display: none;
            position: absolute;
            width: 40px;
            height: 40px;
            color: white;
            top: 50%;
            transform: translateY(-50%);
            text-decoration: none;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .arrow-l {
            left: 0;
            border-radius: 0px 20px 20px 0px;
        }
        
        .arrow-r {
            right: 0;
            border-radius: 20px 0px 0px 20px;
        }
        
        .Picture {
            /* 注意 ul移动 所以必须要加定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 600%;
            z-index: -1;
        }
        
        .Picture li {
            float: left;
        }
        
        .Picture li img {
            width: 990px;
            height: 540px;
        }
        
        .circle {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px;
            height: 40px;
            border-radius: 20px;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .circle li {
            float: left;
            width: 10px;
            height: 10px;
            margin: 15px;
            background-color: white;
            border-radius: 50%;
        }
        
        .circle .curent {
            background-color: red;
        }
    </style>
    </head>
    <script type="text/javascript" src="./animate.js">
    </script>

    <body>
        <div class="foucs">
            <!-- 左右箭头 -->
            <a href="javascript:;" class="arrow-l">
                <</a> <a href="javascript:;" class="arrow-r"> >
            </a>

            <!-- 图片容器 -->
            <ul class="Picture">
                <li><img src="./image/focus1.jpg" alt=""></li>
                <li><img src="./image/focus2.jpg" alt=""></li>
                <li><img src="./image/focus3.jpg" alt=""></li>
                <li><img src="./image/focus4.jpg" alt=""></li>

            </ul>
            <!-- 底部导航 -->
            <ol class="circle">

            </ol>
        </div>

        <script>
            // 1.获取元素
            var focus = document.querySelector(".foucs")
            var arrow_l = document.querySelector('.arrow-l');
            var arrow_r = document.querySelector('.arrow-r');
            /*获取ul的宽度*/
            var fousWidth = focus.offsetWidth;
            console.log(fousWidth)

            var ul = document.querySelector('.Picture');
            var ol = document.querySelector('.circle');
            // 克隆第一张照片



            //2.绑定事件  鼠标经过轮播图模块的时候 左右箭头会显示  鼠标离开轮播图的时候  左右箭头会消失
            focus.addEventListener('mouseenter', function() {
                arrow_l.style.display = 'block';
                arrow_r.style.display = 'block';
                clearInterval(timer)
            })

            focus.addEventListener('mouseleave', function() {
                arrow_l.style.display = 'none';
                arrow_r.style.display = 'none';
                timer = setInterval(function(){
                    arrow_r.click()
                },2000)
            })

            //3.动态创建小圆圈 有几张图片就想对应的创建几个小圆圈
            for (var i = 0; i < ul.children.length; i++) {
                // 创建li
                var li = document.createElement('li');
                // 为li设置自定义属性
                li.setAttribute('index', i)
                // 追加到ul里面
                ol.append(li);

                //4.点击当前的小圆圈，给当前的小圆圈添加类，同时使用排他思想清除其它li的样式
                li.addEventListener('click', function() {
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = ''
                    };
                    this.className = 'curent';
                    /* 5.为li设置自定义属性，点击小圆圈，ul的移动距离是索引号乘以容器的宽度 注意为负值*/
                    var index = this.getAttribute('index');
                    /*把index的值赋值给circle及num 以保持播放图片时图片和小圆圈能保持同步*/
                    num = index;
                    circle = index;
                    aniamte(ul, -index * fousWidth)
                })

            }
            //6.点击右侧按钮  图片滚动一张 利用无缝滚动要克隆第一张图片，追加到ul后面，进行判断  注意声明一个变量num实现自增效果
            var first = ul.children[0].cloneNode(true);
            ul.append(first);
            var num = 0;
            var circle = 0;
            // 开启节流阀
            var flag = true;
            arrow_r.addEventListener('click', function() {
        
                if(flag){
                    flag = false;
                    if (num == ul.children.length - 1) {
                            ul.style.left = 0;
                            num = 0
                        }
                        num++;
                    
                        aniamte(ul, -num * fousWidth, function(){
                            flag  = true;
                            });
                        // 7.点击右侧按钮，小圆圈跟随一起变化，声明一个变量circle来控制小圆圈的播放
                        circle++;
                        if (circle == ol.children.length) {
                            circle = 0;
                        }
                        for (var i = 0; i < ol.children.length; i++) {
                            ol.children[i].className = ''
                        }
                        ol.children[circle].className = 'curent'
                }
                
                
                })
            
    
            //左侧按钮做法
            arrow_l.addEventListener('click', function() {
                if(flag) {
                    // 关闭节流阀
                    flag = false;
                    if (num == 0) {
                        num= ul.children.length-1;
                        ul.style.left = -num * fousWidth +"px"
                        
                    }
                    num--;
                    
                    aniamte(ul, -num * fousWidth,function(){
                        // 开启节流阀
                        flag = true;
                        });
                    // 7.点击右侧按钮，小圆圈跟随一起变化，声明一个变量circle来控制小圆圈的播放
                    circle--;
                    // 如果circle<0,则代表目前处于第一张图片 ，则小圆圈的索引为3 
                    if (circle <0 ) {
                        circle = ol.children.length-1;
                    }
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = ''
                    }
                    ol.children[circle].className = 'curent'
                    
                    
                }
                
            })
            
            // 8.开启自动播放功能
            var timer = setInterval(function(){
                arrow_r.click()
            },2000)
            // 将ol里面的第一个li设置为红色 也就是添加.curent类名
            ol.children[0].className = 'curent'
        </script>


</html>

    节流阀

    防止轮播图按钮连续点击造成播放过快。

    节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

    核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

    返回顶部

    滚动窗口至页面中的任意位置
    window.scroll(x,y)
    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .slider-bar {
            position: absolute;
            top: 300px;
            left: 50%;
            /* 版心的一半 */
            margin-left: 600px;
            width: 200px;
            height: 180px;
            text-align: center;
            line-height: 180px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
        
        .w {
            width: 1200px;
            font-weight: 700;
            color: #CCCCCC;
            margin: 20px auto;
            text-align: center;
        }
        
        .header {
            height: 120px;
            background-color: blueviolet;
        }
        
        .banner {
            height: 400px;
            background-color: red;
        }
        
        .main {
            height: 2000px;
            background-color: #008000;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">header</div>
    <div class="banner w">banner</div>
    <div class="main w">主体</div>
</body>
<script>
    //获取元素
    var slider = document.querySelector('.slider-bar');
    var goBack = document.querySelector('.goBack');
    var header = document.querySelector('.header');
    var banner = document.querySelector('.banner');
    var main = document.querySelector('.main');
    //bannerTop就是被卷去头部的大小，一定要写到滚动的外面 mainTop同理
    var mainTop = main.offsetTop;
    var bannerTop = banner.offsetTop;
    var sliderbarTop = slider.offsetTop - bannerTop;
    // 绑定scroll事件
    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= bannerTop) {
            slider.style.position = 'fixed'
            slider.style.top = sliderbarTop + "px"

        } else {
            slider.style.position = 'absolute';
            slider.style.top = "300px"

        }

        if (window.pageYOffset >= mainTop) {
            goBack.style.display = 'block'

        } else {
            goBack.style.display = 'none'
        }
    })

    //当我们点击返回顶部模块，就让窗口滚动至页面的最顶部
    goBack.addEventListener('click', function() {
        animate(window, 0)
    })


    function animate(obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()

        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                // if (callback) {
                //     // 调用函数
                //     callback();
                // }
                callback && callback();
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            // obj.style.left = window.pageYOffset + step + 'px';
            window.scroll(0, window.pageYOffset + step);
        }, 15);
    }
</script>

</html>

    image

    筋斗云案例

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>筋斗云案例</title>
        <script src="animate.js"></script>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;

        }

        body {
            background-color: black;
        }

        .c-nav {
            position: relative;
            width: 900px;
            height: 42px;
            background: #fff url(image/rss.png) no-repeat right center;
            margin: 100px auto;
        }

        .c-nav ul {
            position: absolute;
        }

        .c-nav li {
            float: left;
            width: 83px;
            text-align: center;
            line-height: 42px;
        }

        .c-nav li a {
            color: #333;
            text-decoration: none;
            display: inline-block;
            height: 42px;
        }

        .c-nav li a:hover {
            color: white;
        }


        .cloud {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url(image/cloud.gif) no-repeat;
        }
    </style>
    <body>
        <div id="c_nav" class="c-nav">
            <span class="cloud"></span>
            <ul>
                <li class="current"><a href="#">首页新闻</a></li>
                <li><a href="#">师资力量</a></li>
                <li><a href="#">活动策划</a></li>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">招聘信息</a></li>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">我是佩奇</a></li>
                <li><a href="#">啥是佩奇</a></li>
            </ul>
        </div>
    </body>
    <script>
        //获取事件源
        var c_nav = document.querySelector('#c_nav');
        var cloud = document.querySelector('.cloud');
        var lis = c_nav.querySelectorAll('li');
        console.log(lis)

        //声明current变量作为筋斗云的起始位置
        var current = 0;
        // 给每个li绑定事件
        for (var i = 0; i < lis.length; i++) {
            // 鼠标经过的时候
            lis[i].addEventListener('mouseenter', function() {
                aniamte(cloud, this.offsetLeft)
            })

            // 鼠标离开的时候
            lis[i].addEventListener('mouseleave', function() {
                aniamte(cloud, current)
            })


            // 鼠标点击的时候
            lis[i].addEventListener('click', function() {
                current = this.offsetLeft;
            })

        }
    </script>
</html>

    image

    移动端开发

    触屏事件

    image.png

    <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>移动端触摸事件</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="box"></div>
        <script>
            var box = document.querySelector('.box');
            box.addEventListener('touchstart', function() {
                console.log('touchstar')
            })
            box.addEventListener('touchmove', function() {
                console.log('touchmove')
            })
            box.addEventListener('touchend', function() {
                console.log('touchend')
            })
        </script>
    </body>

</html>

    image

    触摸事件对象

    touchstar touchmove touchend三个事件都会有自己的事件对象

    image.png

    平时都是给元素注册触摸事件 所以重点记住targetTouches

    <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>移动端触摸事件</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="box"></div>
        <script>
            var box = document.querySelector('.box');
            box.addEventListener('touchstart', function(e) {
                console.log(e.targetTouches[0]);
                
            })
            
        </script>
    </body>

</html>

    image.png

    移动端拖动元素

    (1)触摸元素 touchstar:获取手指初始坐标。同时获得盒子原来位置
    (2)移动事件touchmove:获取手指的滑动距离，并且移动盒子
    注意：手指移动也会触发滚动屏幕所以阻止默认的屏幕滚动 e.preventDefault()

    
<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        
        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;
            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(); // 阻止屏幕滚动的默认行为
        });
    </script>
</body>

</html>

    image

    web-api
    已注销
    54 声望3 粉丝

    保持呼吸 坚持学习

    « 上一篇
    Web API(5)
    下一篇 »
    Web API(7)

    引用和评论

    推荐阅读
    头像
    Vue

    已注销阅读 1.2k

    0 条评论
    得票最新