js运动上

最新推荐文章于 2024-06-13 14:23:28 发布

qq_45945240

最新推荐文章于 2024-06-13 14:23:28 发布

阅读量68

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45945240/article/details/125387043

版权

运动上

运动是啥

通过改变对应的元素的样式来进行对应的变化称为运动，通过设置定时器使对应的目标达到对应的状态（动画），将这个俩个内容合1就是我们的运动。

匀速运动

通过改变的值每次都是一样的来控制对应的元素匀速运动

运动示例

//1.获取对应的按钮以及相关的div
var btn = document.querySelector('button')
var content = document.querySelector('div')
//2.给按钮添加对应的点击事件
btn.onclick = function(){
    //3.在点击事件里面 控制div的left值的改变
    //3.1 利用定时器在对应的事件里面 每次更改一部分的left值
    var timer = setInterval(() => {
        var left = parseInt(getStyle(content).left)
        content.style.left = left+10+"px"
        //3.2 当我们的left值到达了对应的位置的时候我们就清除定时器
        if(left==490){
            clearInterval(timer)
        }
    }, 100);
}
//获取对应的样式的方法 
function getStyle(el){
    if(window.getComputedStyle){
        return  window.getComputedStyle(el)
    }
    //兼容ie的
    return el.currentStyle
}

缓冲运动

通过改变的值先改的值比较大后面改的值比较小来达到对应的缓冲运动

//缓冲运动的核心就是对应的值的变化越来越少
//1.获取对应的元素 按钮 div
var btn = document.querySelector("button")
var div = document.querySelector("div")
//2.给按钮添加事件
btn.onclick = function(){
    //3.控制div的变化 变化的值越来越小的
    //3.1 定时器控制对应的div的left值发生变化
    var timer = setInterval(() => {
        var currentLeft = parseFloat(getStyle(div).left)
        // 距离越来越小(防止无限取小数)
        var step = (500-currentLeft)/10>1?(500-currentLeft)/10:1
        div.style.left = currentLeft+step+"px"
        //3.2 到达目标位置后 清除的对应的定时器 写大于的问题为他有可能是小数 小数相加可能会大于目标值
        if(currentLeft>=500-step){
            console.log("结束了");
            clearInterval(timer)
        }
    }, 100);
}
//获取对应的样式的方法 
function getStyle(el){
    if(window.getComputedStyle){
        return  window.getComputedStyle(el)
    }
    //兼容ie的
    return el.currentStyle
}

透明度缓动

//1.获取对应的按钮以及相关的div
var btn = document.querySelector('button')
var content = document.querySelector('div')
// 2.给按钮添加对应的事件
btn.onclick = function(){
    // 3.在事件里面进行操作
    // 3.1 加定时器更改对应的透明度
    var timer = setInterval(() => {
        //获取当前的透明度
        var current = parseFloat(getStyle(content).opacity)
        //先把放大 操作更好操作   再缩小
        //判断如果当前步长大于0情况下 我们给他向上取整 如果我们是小于0的情况 我给他向下取整
        var step = (1-current)*100/10 > 0? Math.ceil((1-current)*100/10): Math.floor((1-current)*100/10)
        //目标位置 = 当前位置+步长
        console.log(step);
        content.style.opacity = current+step/100
        // 3.2 判断是否到达对应的目标值 清除对应的定时器
        //当前位置+步长 == 目标
        if(current+step/100==1){
            clearInterval(timer)
        }
    }, 100);

}
//获取对应的样式的方法 
function getStyle(el){
    if(window.getComputedStyle){
        return  window.getComputedStyle(el)
    }
    //兼容ie的
    return el.currentStyle
}