【案例简介】

图片模拟gif并可以实时访问demo

【案例截图】

【核心代码】

 // 支持保存当前图片状态（以url形式）
    // 读取url参数可以生成url表示的图片状态
    // 图片可以暂停、恢复动画
    const DOM = document.querySelector(".img")

    // 这个是x轴展开的图片
    // 参数二是最大宽度，参数三是每个图片的宽度，参数四是跑一轮需要的时间
    function Animate(DOM, maxSize = 800, perSize = 26.66, timePerRound = 3000) {
        let size = 0
        var currentSize = window.location.search.match(/size=\d+/)
        // 初始化当前帧图片
        if (currentSize) {
            size = Number(currentSize[0].replace('size=', ''))
            console.log(size)
            DOM.style.backgroundPosition = `-${size}px 0`
        }
        let pause = true
        this.pauseOrStart = function () {
            pause = !pause
        }
        this.getSize = function () {
            return size
        }
        setInterval(() => {
            if (pause) {
                return
            }
            size += perSize;
            if (size > maxSize) {
                size = 0
            }
            DOM.style.backgroundPosition = `-${size}px 0`
        }, timePerRound / (maxSize / perSize))
    }