首页 > 其他分享 >day17 运动（下）

day17 运动（下）

时间：2022-10-23 15:55:07浏览次数：71  
标签：target element current wrap day17 key var 运动

day17 运动（下）

链式动画

动画执行完接另一个动画不断进行链接。

封装进行（通过传入回调函数完成链式运动）
//缓冲运动封装
//element表示当前的元素 target表示目标对象 callbackFn表示传入的回调函数
function bufferAnimation(element, targetObj,callbackFn) {
    //如果element为undefined就直接报错
    if(!element){
        throw new Error('元素不能缺少')
    }
    //给元素对象添加一个属性为timer他是一个定时器
    element.timer = setInterval(() => {
        var flag = true
        //遍历对象
        for (let key in targetObj) {
            //取出当前值
            let current = parseFloat(getStyle(element)[key])
            //取出目标值
            let target = targetObj[key]
            //判断当前如果是位置的变化及对应的宽度高度的变化
            if(key=='width' || key == 'height' || key == 'left' || key == 'top'){
                //步长 负值向下取整 正值向上取整
                var step = target-current>0?Math.ceil((target - current) / 10):Math.floor((target - current) / 10)
                current += step
                element.style[key] = current + 'px'
            }
            //如果是透明度的变化
            if(key == 'opacity'){
                //步长 负值向下取整 正值向上取整
                var step = target-current>0?Math.ceil((target - current) * 1000 / 10):Math.floor((target - current)*1000 / 10)
                current += step / 1000
                element.style[key] = current
            }
            //如果是层高直接赋值
            if(key == 'zIndex'){
                element.style[key] = target
            }
            //如果没有完成就是false
            if(current != target){
                flag = false
            }
        }
        //如果全部走完了就清除
        if(flag){
            clearInterval(element.timer)
            //调用回调函数 如果传入的参数是函数
            if(typeof callbackFn == 'function'){
                callbackFn()
            }
        }
    },20)
}
示例（先变化div的宽度和高度 再变化他的位置）
<div></div>
<button></button>
<script src="./move.js"></script>
<script>
    //先让div宽度和高度变化 再改变他的位置
    //获取div
    var div = document.querySelector('div')
    document.querySelector('button').onclick = function () {
        //调用缓冲动画 (俩个异步操作 你不知道对应的异步什么时候走完)
        //可以进行二次封装 通过回调函数来解决异步的问题 （使异步变同步代码）
        bufferAnimation(div, {
            width: 200,
            height: 300
        }, () => {
            //变化位置
            bufferAnimation(div, {
                left: 500
            }, () => {
                //变化位置
                bufferAnimation(div, {
                    left: 100
                })
            })
        })
    }
</script>

轮播图

核心

  • 对应图的切换
  • 滚动切换 （更改的是对应大盒子的位置）
  • 透明度切换 （更改的时候对应图片的透明度）
  • 简单图片切换 （直接变化对应的图片）

滚动切换

  • 对应大盒子里面容纳多个图片
  • 图片的大小和显示盒子的大小一致
  • 对应的大盒子的大小超出了对应的显示盒子（溢出隐藏）
  • 根据对应的切换的下标来控制对应的大盒子的位置
<!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>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .showBox,li{
                width: 400px;
                height: 250px;
            }
            li>img{
                width: 100%;
            }
            .showBox{
                margin: 200px auto;
                /* 溢出隐藏 */
                /* overflow: hidden; */
            }
            ul{
                width: 700%;
                position: relative;
            }
            ul>li{
                list-style: none;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="showBox">
            <ul class="wrap">
                <li><img src="./images/slidepic1.jpg" alt=""></li>
                <li><img src="./images/slidepic2.jpg" alt=""></li>
                <li><img src="./images/slidepic3.jpg" alt=""></li>
                <li><img src="./images/slidepic4.jpg" alt=""></li>
                <li><img src="./images/slidepic5.jpg" alt=""></li>
                <li><img src="./images/slidepic6.jpg" alt=""></li>
                <li><img src="./images/slidepic7.jpg" alt=""></li>
            </ul>
        </div>
        <script src="./move.js"></script>
        <script>
            //获取显示盒子
            var showBox = document.querySelector('.showBox')
            //获取显示盒子的宽度
            var showWidth = parseFloat(getStyle(showBox).width)
            //获取ul（需要切换位置的容器）
            var wrap = document.querySelector('.wrap')
            //封装一个autoMove的函数
            function autoMove(){
                //切换图片的定时器
                var i = 0
                var timer = setInterval(()=>{
                    i++ //这个i就是控制对应的位置的下标
                    //到达最后 切换到第一个
                    if(i==wrap.children.length){
                        i = 0
                    }
                    //移动对应的ul 0 -400 -800
                    //距离等于 当前下标*对应显示盒子的宽度*-1
                    var distance = i * showWidth * -1
                    bufferAnimation(wrap,{left:distance})
                },2000)
                }
            //调用自动移动的方法
            autoMove()
        </script>
    </body>
</html>

透明度切换

  • 所有的图叠在一起
  • 将前面的图片的透明度设置0 当前图片透明度设置1
<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .showBox,li{
            width: 400px;
            height: 250px;
        }
        li>img{
            width: 100%;
        }
        .showBox{
            margin: 200px auto;
            /* 溢出隐藏 */
            /* overflow: hidden; */
        }
        ul>li{
            list-style: none;
            position: absolute;
            opacity: 0;
        }
        ul>li:nth-child(1){
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="showBox">
        <ul class="wrap">
            <li><img src="./images/slidepic1.jpg" alt=""></li>
            <li><img src="./images/slidepic2.jpg" alt=""></li>
            <li><img src="./images/slidepic3.jpg" alt=""></li>
            <li><img src="./images/slidepic4.jpg" alt=""></li>
            <li><img src="./images/slidepic5.jpg" alt=""></li>
            <li><img src="./images/slidepic6.jpg" alt=""></li>
            <li><img src="./images/slidepic7.jpg" alt=""></li>
        </ul>
    </div>
    <script src="./move.js"></script>
    <script>
        //获取ul（需要切换位置的容器）
        var wrap = document.querySelector('.wrap')
        //封装一个autoMove的函数
        function autoMove(){
            //切换图片的定时器 
            var i = 0
            var timer = setInterval(()=>{
                //改透明度 将之前的全部设置为0 
                bufferAnimation(wrap.children[i],{opacity:0},function(){
                    i++ //这个i就是控制对应的位置的下标
                    //到达最后 切换到第一个
                    if(i==wrap.children.length){
                        i = 0
                    }
                    // 再将自己的透明度改为1
                    bufferAnimation(wrap.children[i],{opacity:1})
                })
            },2000)
        }
        //调用自动移动的方法
        autoMove()
    </script>
</body>
</html>

图片切换

  • 根据下标的变化 切换对应的图片
<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .showBox{
            width: 400px;
            height: 250px;
            margin: 200px auto;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="showBox">
        <img src="./images/slidepic1.jpg" alt="">
    </div>
    <script src="./move.js"></script>
    <script>
        //获取图片
        var img = document.querySelector('.showBox>img')
        //封装一个autoMove的函数
        function autoMove(){
            //切换图片的定时器 
            var i = 1
            var timer = setInterval(()=>{
                i++
                if(i==7){
                    i = 1
                }
                //设置图片的src
                img.src = `./images/slidepic${i}.jpg`
            },2000)
        }
        //调用自动移动的方法
        autoMove()
    </script>
</body>
</html>

无缝轮播（滚动轮播的进阶）

  • 拷贝第一张到最后
  • 判断是否到达最后一张 如果到达立马设置对应的位置为第一张的位置
<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .showBox,
        li {
            width: 400px;
            height: 250px;
        }

        li>img {
            width: 100%;
        }

        .showBox {
            margin: 200px auto;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        ul {
            width: 800%;
            position: relative;
        }

        ul>li {
            list-style: none;
            float: left;
        }
    </style>
</head>

<body>
    <div class="showBox">
        <ul class="wrap">
            <li><img src="./images/slidepic1.jpg" alt=""></li>
            <li><img src="./images/slidepic2.jpg" alt=""></li>
            <li><img src="./images/slidepic3.jpg" alt=""></li>
            <li><img src="./images/slidepic4.jpg" alt=""></li>
            <li><img src="./images/slidepic5.jpg" alt=""></li>
            <li><img src="./images/slidepic6.jpg" alt=""></li>
            <li><img src="./images/slidepic7.jpg" alt=""></li>
        </ul>
    </div>
    <script src="./move.js"></script>
    <script src="./carousel.js"></script>
    <script>
        //获取显示盒子
        var showBox = document.querySelector('.showBox')
        //获取显示盒子的宽度
        var showWidth = parseFloat(getStyle(showBox).width)
        //获取ul（需要切换位置的容器）
        var wrap = document.querySelector('.wrap')
        //拷贝第一张图加到最后
        //克隆第一个li
        var firstLi = wrap.children[0].cloneNode(true)
        var i = 0
        //将克隆的元素加入到ul
        wrap.appendChild(firstLi)
        //封装一个autoMove的函数
        function autoMove() {
            //切换图片的定时器
            var timer = setInterval(() => {
                move(wrap, showWidth)
            }, 2000)
        }
        // //调用自动移动的方法
        autoMove()
        //抽取方法 x轴移动 移动的元素 变化i值 移动的宽度 对应的方向（默认为正方向）
        function move(element, showWidth, isAsc = true) {
            if (isAsc) {
                i++
            } else {
                i--
            }
            //移动对应的ul 0 -400 -800
            //距离等于 当前下标*对应显示盒子的宽度*-1
            var distance = i * showWidth * -1
            //执行动画
            bufferAnimation(element, {
                left: distance
            }, () => {
                //到达最后下标
                if (i == element.children.length - 1 && isAsc) {
                    //i的值重新变成0
                    i = 0
                }
                if (i == 0 && !isAsc) {
                    //立即设置位置 到第一张设置位置为最后一张
                    i = element.children.length - 1
                }
                //设置位置
                element.style.left = i * showWidth * -1 + 'px'
            })
        }
    </script>
</body>

</html>

升级版带焦点的轮播

html代码
<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .showBox,
        li {
            width: 400px;
            height: 250px;
        }

        li>img {
            width: 100%;
        }

        .showBox {
            position: relative;
            margin: 200px auto;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        ul {
            width: 800%;
            position: relative;
        }

        ul>li {
            list-style: none;
            float: left;
        }

        .cirList {
            position: absolute;
            right: 20px;
            bottom: 10px;
            width: 150px;
        }

        .cirList>li {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin: 0 5px;
        }

        .cirList .selected {
            background-color: red;
        }
        .arrow{
            display: none;
        }
        .arrow>a{
            display: block;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            margin-top: -25px;
        }
        .arrow>.prev{
            background: url(./images/prev.png) no-repeat center;
            background-size: contain;
            left: 0;
        }
        .arrow>.next{
            background: url(./images/next.png) no-repeat center;
            background-size: contain;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="showBox">
        <ul class="wrap">
            <li><img src="./images/slidepic1.jpg" alt=""></li>
            <li><img src="./images/slidepic2.jpg" alt=""></li>
            <li><img src="./images/slidepic3.jpg" alt=""></li>
            <li><img src="./images/slidepic4.jpg" alt=""></li>
            <li><img src="./images/slidepic5.jpg" alt=""></li>
            <li><img src="./images/slidepic6.jpg" alt=""></li>
            <li><img src="./images/slidepic7.jpg" alt=""></li>
        </ul>
        <!-- 焦点 -->
        <ul class="cirList">
        </ul>
        <div class="arrow">
            <a href="" class="prev"></a>
            <a href="" class="next"></a>
        </div>
    </div>
    <script src="./move.js"></script>
    <script src="./carousel.js"></script>
</body>

</html>
js代码
主体代码
//获取显示盒子
var showBox = document.querySelector('.showBox')
//获取显示盒子的宽度
var showWidth = parseFloat(getStyle(showBox).width)
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//获取焦点的盒子
var cirList = document.querySelector('.cirList')
//获取箭头的盒子
var arrow = document.querySelector('.arrow')
//变化的下标
var i = 0
//焦点取值的下标
var index = 0
//定时器
var timer
//调用init的方法
init()
//调用自动移动的方法
autoMove()
//给showBox添加移入事件
showBox.onmouseenter = function () {
    //清除定时器
    clearInterval(timer)
    //显示箭头的盒子
    arrow.style.display = 'block'
}
//移出继续执行
showBox.onmouseleave = function () {
    //调用轮播
    autoMove()
    //隐藏
    arrow.style.display = 'none'
}
//给箭头添加事件
Array.from(arrow.children).forEach((v, i) => {
    v.onclick = (e) => {
        e = e || window.event
        //禁止a标签默认行为
        e.preventDefault();
        move(wrap, showWidth, i)
    }
})
//给cirList下面的li添加点击事件 事件委托机制
cirList.onclick = function (e) {
    e = e || window.event
    //判断当前操作的元素是否为li
    if (e.target.tagName == 'LI') {
        //获取当前点击的li的下标
        let clcikIndex = Array.from(cirList.children).findIndex((v) => {
            //如果当前操作的对象是遍历的对象那么返回出去
            return v == e.target
        })-1
        //改变对应位置及下标
        index = clcikIndex
        i = clcikIndex
        //调用move移动
        move(wrap, showWidth)
    }
}
//初始化生成焦点的方法
function init() {
    //拷贝之前生成对应的焦点
    Array.from(wrap.children).forEach((v, i) => {
        //在第一个焦点添加一个class名字为selected
        if (i == 0) {
            cirList.innerHTML += `<li class='selected'></li>`
        } else {
            //生成对应的焦点加入到cirList里面
            cirList.innerHTML += `<li></li>`
        }
    })
    //拷贝第一张图加到最后
    //克隆第一个li
    var firstLi = wrap.children[0].cloneNode(true)
    //将克隆的元素加入到ul
    wrap.appendChild(firstLi)
}
//封装一个autoMove的函数
function autoMove() {
    //切换图片的定时器
    timer = setInterval(() => {
        move(wrap, showWidth)
    }, 2000)
}
//封装一个焦点变化的函数 传入的index表示当前要设置的焦点
function changeCir(index) {
    //排他思维
    //先将所有的class清除
    Array.from(cirList.children).forEach((li) => {
        li.className = ''
    })
    //再给自己添加对应的样式
    cirList.children[index].className = 'selected'
}
//抽取方法 x轴移动 移动的元素 变化i值 移动的宽度 对应的方向（默认为正方向）
function move(element, showWidth, isAsc = true) {
    //先检索区间
    rangeCheck(element, isAsc)
    //再进行i值变化
    if (isAsc) {
        i++
        index++
    } else {
        i--
        index--
    }
    //焦点切换及区间检索
    rangeCheckCir(element)
    //执行动画
    //移动对应的ul 0 -400 -800
    //距离等于 当前下标*对应显示盒子的宽度*-1
    var distance = i * showWidth * -1
    bufferAnimation(element, {
        left: distance
    }, () => {

    })
}
//区间检索i下标
function rangeCheck(element, isAsc) {
    //到达最后下标
    if (i >= element.children.length - 1 && isAsc) {
        //i的值重新变成0
        i = 0
    }
    if (i <= 0 && !isAsc) {
        //立即设置位置 到第一张设置位置为最后一张
        i = element.children.length - 1
    }
    //设置位置
    element.style.left = i * showWidth * -1 + 'px'
}
//区间检索对应的焦点下标值
function rangeCheckCir(element) {
    //判断焦点下标
    if (index < 0) { //8张图 下标为 0-7 7个焦点 下标 0-6
        index = element.children.length - 2
    }
    if (index > element.children.length - 2) {
        index = 0
    }
    //更改焦点
    changeCir(index)
}
辅助代码
//缓冲运动封装
//element表示当前的元素 target表示目标对象 callbackFn表示传入的回调函数
function bufferAnimation(element, targetObj,callbackFn) {
    //如果element为undefined就直接报错
    if(!element){
        throw new Error('元素不能缺少')
    }
    //清除上一个定时器影响 (保证只有一个定时器)
    clearInterval(element.timer)
    //给元素对象添加一个属性为timer他是一个定时器
    element.timer = setInterval(() => {
        var flag = true
        //遍历对象
        for (let key in targetObj) {
            //取出当前值
            let current = parseFloat(getStyle(element)[key])
            //取出目标值
            let target = targetObj[key]
            //判断当前如果是位置的变化及对应的宽度高度的变化
            if(key=='width' || key == 'height' || key == 'left' || key == 'top'){
                //步长 负值向下取整 正值向上取整
                var step = target-current>0?Math.ceil((target - current) / 10):Math.floor((target - current) / 10)
                current += step
                element.style[key] = current + 'px'
            }
            //如果是透明度的变化
            if(key == 'opacity'){
                //步长 负值向下取整 正值向上取整
                var step = target-current>0?Math.ceil((target - current) * 1000 / 10):Math.floor((target - current)*1000 / 10)
                current += step / 1000
                element.style[key] = current
            }
            //如果是层高直接赋值
            if(key == 'zIndex'){
                element.style[key] = target
            }
            //如果没有完成就是false
            if(current != target){
                flag = false
            }
        }
        //如果全部走完了就清除
        if(flag){
            clearInterval(element.timer)
            //调用回调函数 如果传入的参数是函数
            if(typeof callbackFn == 'function'){
                callbackFn()
            }
        }
    },0)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, '')
    } else {
        return element.currentStyle
    }
}

重点

  • 逻辑的掌握
  • dom操作
  • 定时器操作
  • 错误的解决
  • 定时器里面套定时器 ( 如果外面的执行时间要比里面的短 会导致里面的定时器无法被清除 (定时器的作用范围内要清除对应的定时器) )
  • 知识点的运用
  • 封装 (函数封装 抽取共同点)
  • 同步和异步 (通过回调函数解决 定时器是异步的 事件也是异步的)

第三方动画的js

move.js

github地址

<div class="box"></div>
<div class="mybox"></div>
<script src='https://cdn.bootcdn.net/ajax/libs/move.js/0.5.0/move.js'></script>
<script>
      move('.box')
            .to(500, 200) //位置改变 x为500 y为200
            .rotate(180) //旋转180deg
            .scale(.5) //缩小0.5倍
            .set('background-color', '#888')//背景颜色
            .set('border-color', 'black')//边框颜色
            .duration('2s')//执行时间
            .skew(50, -10) //偏移
            .then() //成功
            // .set('opacity', 0) //透明度为0
            .duration('0.3s') //时间
            .scale(0.1) //缩小
            .pop() //加上他才能执行颜色设置相关的内容
            .end(); //动画结束
        //背景颜色变成绿色
        // 位置 变成 300 300
        // 旋转 180deg
        // 上面做完 放大2倍
        move('.mybox')
        .to(300,300)
        .set('background-color', '#f0f')
        .rotate(180)
        .duration('3s')
        .then().scale(2).duration('10s').pop().end()
</script>
animated.css (封装了css3的动画效果)
cdn
https://cdn.staticfile.org/animate.css/4.1.1/animate.min.css

官网地址

swiper.js (封装轮播图)

swiper官网

标签：target,element,current,wrap,day17,key,var,运动
From： https://www.cnblogs.com/zmfhtml5/p/16818734.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99