JavaScript——DOM高级（动画函数）

一、简单封装动画函数

var div = document.querySelector("div")
div.onclick = function () {
    animate(div,"left",500)
}
function animate(ele, attr, target) {
    // var l = ele.offsetLeft
    var currentStyle = window.getComputedStyle(ele)[attr]
    //得到的是字符串，转为数字
    currentStyle = parseInt(currentStyle)
    var timer = setInterval(function () {
        currentStyle += 2
        if (currentStyle >= target) {
            clearInterval(timer)
        }
        ele.style.left = currentStyle + "px"
    }, 16)
}

二、封装多属性动画函数

var div = document.querySelector(".box");
div.onclick=function(){
    animate(div,{"left":200,"top":300})
}
function animate(ele, obj) {
    // 为了不让后面的定时器覆盖前面的，将var改为let
    for (let key in obj) {
        let target = obj[key]
        var currentStyle = window.getComputedStyle(ele)[key]
        //得到的是字符串，转为数字
        currentStyle = parseInt(currentStyle)
        // 为了能将所有定时器都结束掉，将var改为let
        let timer = setInterval(function () {
            //计算比例 - 每次运动剩余距离的 1/10
            var speed = (target - currentStyle) / 10
//距离目标越来越近，但每次移动剩余距离的1/10是永远到不了目标位置的，所以要向上取整-向右运动;
//比例为-0.1，如果向上取整为0，相当于没有移动；向下取整移动了-1，然后才能到目标位置-向左运动
            speed>0?speed=Math.ceil(speed):speed=Math.floor(speed)
            currentStyle += speed
            if (currentStyle == target) {
                clearInterval(timer)
            }
            ele.style[key] = currentStyle + "px"
        }, 16)
    }
}

三、+透明度处理的函数

var div = document.querySelector(".box");
div.onclick=function(){
    animate(div,{"left":200,"top":300,opacity:0.5})
}
function animate(ele, obj) {
    // 为了不让后面的定时器覆盖前面的，将var改为let
    for (let key in obj) {
        let target = obj[key]
        let currentStyle = window.getComputedStyle(ele)[key]
        //当key是透明度的时候，当前样式应该转为浮点数，为了方便计算我们可以先*100，后面得到的结果再/100
        if (key == "opacity") {
            currentStyle = parseFloat(currentStyle) * 100
            target=target*100
        } else {
            //得到的是字符串，转为数字
            currentStyle = parseInt(currentStyle)
        }
        // 为了能将所有定时器都结束掉，将var改为let
        let timer = setInterval(function () {
            //计算比例 - 每次运动剩余距离的 1/10
            var speed = (target - currentStyle) / 10
//距离目标越来越近，但每次移动剩余距离的1/10是永远到不了目标位置的，所以要向上取整-向右运动;
//比例为-0.1，如果向上取整为0，相当于没有移动；向下取整移动了-1，然后才能到目标位置-向左运动
            speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed)
            currentStyle += speed
            if (currentStyle == target){
                clearInterval(timer)
            }
            if (key == "opacity") {
                ele.style[key] = currentStyle/100
            } else {
                ele.style[key] = currentStyle + "px"
            }
        }, 16)
    }
}

四、动画结束处理函数

var div = document.querySelector("div")
div.onclick = function () {
    animate(div, {
        left: 500
    }, function () {
        animate(div, {
            top: 500
        }, function () {
            animate(div, {
                left: 0
            }, function () {
                animate(div, {
                    top: 0
                })
            })
        })
    })
}
function animate(ele, obj, end = function () { }) {
    // 为了不让后面的定时器覆盖前面的，将var改为let
    for (let key in obj) {
        var num = 0
        num++
        console.log(num)
        let target = obj[key]
        let currentStyle = window.getComputedStyle(ele)[key]
        //当key是透明度的时候，当前样式应该转为浮点数，为了方便计算我们可以先*100，后面得到的结果再/100
        if (key == "opacity") {
            currentStyle = parseFloat(currentStyle) * 100
            target = target * 100
        } else {
            //得到的是字符串，转为数字
            currentStyle = parseInt(currentStyle)
        }
        // 为了能将所有定时器都结束掉，将var改为let
        let timer = setInterval(function () {
            //计算比例 - 每次运动剩余距离的 1/10
            var speed = (target - currentStyle) / 10
            //距离目标越来越近，但每次移动剩余距离的1/10是永远到不了目标位置的，所以要向上取整-向右运动;比例为-0.1，如果向上取整为0，相当于没有移动；向下取整移动了-1，然后才能到目标位置-向左运动
            speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed)
            currentStyle += speed
            if (key == "opacity") {
                ele.style[key] = currentStyle / 100
            } else {
                ele.style[key] = currentStyle + "px"
            }
            if (currentStyle == target) {
                clearInterval(timer)
                if (--num == 0) {
                    end && end()
                }
            }
        }, 16)
    }
}

五、swiper的使用

• 官网：https://www.swiper.com.cn/

• 看文档，配置选项

1. 自动轮播

autoplay: {
    delay: 1000,//1秒切换一次
},

2. 轮播方向

direction: 'horizontal',

3. 是否循环

var mySwiper = new Swiper('.swiper', {
    loop: true,
})

4. 移入停止移出继续

var container = document.querySelector('.swiper-container')
container.onmouseenter = function(){
    mySwiper.autoplay.stop();
}
container.onmouseleave = function(){
    mySwiper.autoplay.start();
}

5. 过渡时，阻止重复切换前进切换的操作

var mySwiper = new Swiper('.swiper', {
    loop: true,
    loopPreventsSlide: true,//默认true，阻止
})