JavaScript 自行封装的函数库

最新推荐文章于 2022-05-19 13:33:13 发布

八百比晴明

最新推荐文章于 2022-05-19 13:33:13 发布

阅读量531

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_51981718/article/details/123961305

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这篇博客介绍了JavaScript中获取元素的两种方法以及获取元素样式的函数。还详细阐述了一个全面的运动函数animate，该函数支持多种CSS属性的平滑动画效果，包括px单位、opacity和滚动条属性。此外，它还支持多个属性同时运动，并在动画完成后可调用回调函数。

摘要由CSDN通过智能技术生成

获取元素的方法

function $1(selector){// 返回单个元素
    return document.querySelector(selector)
}
function $2(selector){// 返回元素集合
    return document.querySelectorAll(selector)
}
function $(selector){
    var dom = document.querySelectorAll(selector)
    if (dom === null) {// dom = null
        return null
    }
    if (dom.length > 1) {
        return dom
    } else {
        return dom[0]
    }
}

获取元素css样式

function getStyle(dom,style){
    if (dom.currentStyle) {
        return dom.currentStyle[style]
    } else {
        return getComputedStyle(dom)[style]
    }
}

获取元素到body的偏移量（left top）

function offset(dom){
    var l = 0-dom.clientLeft // 累加left偏移值
    var t = 0-dom.clientTop// 累加top偏移值
    while(dom){
        l += dom.offsetLeft + dom.clientLeft
        t += dom.offsetTop + dom.clientTop
        dom = dom.offsetParent
    }
    return {left:l,top:t}
}

运动函数 animate

params {selector} 要运动元素的css选择器
params {options} 要运动的css属性集合
params {callback} 运动完成之后的回调函数，可选参数
功能说明：
1.支持所有带px单位的css属性（left top width fontSize marginLeft …）
2.支持透明度opacity属性
3.支持滚动条scrollLeft scrollTop属性
4.支持同一个元素多个属性同时运动

function animate(selector,options,callback){
    var dom = document.querySelector(selector)

    for (var attr in options){
        // 获取 attr 属性当前的值和目标值
        if (attr === 'opacity') {
            // 当前透明度*100
            var current = getComputedStyle(dom)[attr] * 100
            var target = options[attr] * 100
        } else if (attr === 'scrollTop'||attr === 'scrollLeft'){
            var current = dom[attr]
            var target = options[attr]
        } else {
            var current = parseInt( getComputedStyle(dom)[attr] ) // 当前位置 '567px' -> 567
            var target = options[attr]
        }
        options[attr] = {
            'current': current,
            'target': target
        }
    }

    clearInterval(dom.timer) // 清除计时器
    dom.timer = setInterval(function (){
        for (var attr in options){
            var current = options[attr].current
            var target = options[attr].target

            var speed = (target - current)/10 // 持续变化的速度
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) // 取整

            // 当前位置累加速度
            options[attr].current += speed
            
            // 临界值判断（运动停止条件：剩余运动量<=每次的运动量）
            if (Math.abs(target-current) <= Math.abs(speed)) {
                if (attr === 'opacity') {
                    dom.style[attr] = target/100
                } else if (attr === 'scrollTop'||attr === 'scrollLeft'){
                    dom[attr] = target
                } else {
                    dom.style[attr] = target + 'px' // 到达目标位置 
                }

                delete options[attr] //删除运动完成的属性
                for(var key in options){
                    // 对象有属性时，才会执行到这里面
                    return false
                }

                if (typeof callback === 'function') {
                    callback()
                }
                // typeof callback === 'function'&&callback()

                // 要保证所有属性运动完成再清除计时器
                clearInterval(dom.timer) // 清除计时器

                
            } else {
                // 将累加了速度之后的当前位置赋值给left
                if (attr === 'opacity') {
                    dom.style[attr] = options[attr].current/100
                } else if (attr === 'scrollTop'||attr === 'scrollLeft'){
                    dom[attr] = options[attr].current
                } else {
                    dom.style[attr] = options[attr].current + 'px'
                }
            }
        }
    },20)
}