animation.js

 

完整的代码, 可以复制引用

新建animation.js文件

        const Animation = {
        // 中奖排行榜ranking('meque', 'meque_text', -1)
        /**
         * @description 中奖排行榜滚动
         * @function ranking
         * @param {string} meques - 文本滚动的容器元素ID
         * @param {string} text - 要滚动的文本内容元素ID
         * @param {number} speed - 滚动速度, 负数表示向上滚动，正数表示向下滚动
         */
        ranking(meques, text, speed) {
            // 获取要滚动的文本内容和其容器的DOM元素
            let [
                mequeText = document.getElementById(text), // 要滚动的文本内容元素
                meque = document.getElementById(meques),   // 文本滚动的容器元素
                timer = null                               // 用于控制滚动的定时器
            ] = []

            // 判断文本内容的高度是否小于容器的高度，如果是，则不进行滚动
            if (parseInt(this.getStyle(mequeText, 'height')) < parseInt(this.getStyle(meque, 'height'))) {
                return false
            }

            // 为实现无限滚动，将文本内容复制一遍
            mequeText.innerHTML = mequeText.innerHTML + mequeText.innerHTML

            // 清除之前的定时器
            clearInterval(timer)

            // 设置新的定时器，每40毫秒调用一次notice函数进行滚动
            timer = setInterval(notice, 40)
            notice()

            // 滚动函数
            function notice() {
                // 如果文本内容向上滚动到一半时，重置位置到初始状态
                if (mequeText.offsetTop < -mequeText.offsetHeight / 2) {
                    mequeText.style.top = 0
                }

                // 根据速度值更新文本内容的位置
                mequeText.style.top = mequeText.offsetTop + speed + 'px'
            }

            // 当鼠标悬停在文本内容上时，停止滚动
            mequeText.onmouseover = function() {
                clearInterval(timer)
            }

            // 当鼠标移出文本内容时，继续滚动
            mequeText.onmouseout = function() {
                timer = setInterval(notice, 40)
            }

            // 当鼠标按下并拖动文本内容时，可以手动控制文本内容的位置
            mequeText.onmousedown = function(ev) {
                var ev = ev || window.event
                var disY = ev.clientY - this.offsetTop
                mequeText.onmousemove = function(ev) {
                    var ev = ev || window.event
                    mequeText.style.top = ev.clientY - disY + 'px'
                }

                // 当鼠标释放时，停止手动滚动
                document.onmouseup = function() {
                    mequeText.onmousemove = null
                }
            }
        },

        /*运动框架move(this,{height:111,width:200,opacity:30}, 8, fn)*/
        /**
         * @description 运动框架，用于控制DOM元素的动画效果
         * @function move
         * @param {Object} obj - 需要进行动画的DOM对象
         * @param {Object} json - 动画的目标属性和值，例如：{width:200, height:100}
         * @param {number} speed - 动画的速度，该速度决定了动画运动的快慢
         * @param {Function} fn - 动画完成后的回调函数
         */
        move(obj, json, speed, fn) {
            // 清除之前的动画定时器，确保每次只有一个动画在运行
            clearInterval(obj.timer)

            // 启动一个新的定时器，用于控制动画的执行
            obj.timer = setInterval(() => {
                // 标志位，用于检测所有属性是否都达到了目标值
                var mStop = true

                // 遍历所有要改变的属性
                for (var attr in json) {
                    // 获取当前属性的值
                    var com = 0
                    if (attr == 'opacity') {
                        // 如果属性是透明度，则特殊处理，将其乘以100变为整数
                        com = parseInt(parseFloat(this.getStyle(obj, attr)) * 100)
                    } else {
                        // 其他属性直接获取其值
                        com = parseInt(this.getStyle(obj, attr))
                    }

                    // 计算每次动画改变的速度
                    var iSpeed = (json[attr] - com) / speed
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)

                    // 如果当前属性值还没有达到目标值，设置mStop为false
                    if (com != json[attr]) {
                        mStop = false
                    }

                    // 根据属性进行赋值
                    if (attr == 'opacity') {
                        // IE浏览器下的透明度设置
                        obj.style.filter = 'alpha(opacity:' + (com + iSpeed) + ')'
                        // 标准浏览器下的透明度设置
                        obj.style.opacity = (com + iSpeed) / 100
                    } else {
                        // 其他属性设置
                        obj.style[attr] = com + iSpeed + 'px'
                    }
                }

                // 如果所有属性都达到了目标值，清除定时器
                if (mStop) {
                    clearInterval(obj.timer)
                    // 如果存在回调函数，则执行
                    if (fn) {
                        fn()
                    }
                }
            }, 30)
        },

        // 滚动公告  notice('meque', 'meque_text', -1)
        /**
         * @description 滚动公告功能
         * @function notice
         * @param {string} meques - 公告外部容器的ID
         * @param {string} text - 实际滚动的公告内容的ID
         * @param {number} speed - 滚动速度，通常为负值，表示向左滚动
         */
        notice(meques, text, speed) {
            // 通过ID获取对应的DOM元素
            let [
                mequeText = document.getElementById(text),  // 公告内容
                meque = document.getElementById(meques),    // 外部容器
                timer = null                                // 定时器
            ] = []

            // 判断公告内容的宽度是否小于外部容器的宽度，如果是，则不需要滚动
            if (parseInt(this.getStyle(mequeText, 'width')) < parseInt(this.getStyle(meque, 'width'))) {
                return false
            }

            // 设置公告内容的初始位置，使其完全在外部容器的右侧
            mequeText.style.left = meque.offsetWidth + 'px'

            // 清除之前可能存在的定时器
            clearInterval(timer)

            // 创建一个新的定时器，用于控制滚动效果
            timer = setInterval(notice, 20)
            // notice()
            // 主滚动函数
            function notice() {
                // 如果公告内容的左边界已经完全超出了外部容器的左侧
                if (mequeText.offsetLeft < -mequeText.offsetWidth) {
                    // 重新设置公告内容的位置，使其回到外部容器的右侧
                    mequeText.style.left = meque.offsetWidth + 'px'
                }

                // 实现滚动效果
                mequeText.style.left = mequeText.offsetLeft + speed + 'px'
            }

            // 当鼠标悬停在公告内容上时，停止滚动
            mequeText.onmouseover = function() {
                clearInterval(timer)
            }

            // 当鼠标离开公告内容时，继续滚动
            mequeText.onmouseout = function() {
                timer = setInterval(notice, 20)
            }

            // 当鼠标按下时，可以拖动公告内容
            mequeText.onmousedown = function(ev) {
                var ev = ev || window.event

                // 计算鼠标与公告内容左边界的距离
                var disX = ev.clientX - this.offsetLeft

                // 鼠标移动时，公告内容跟随鼠标移动
                mequeText.onmousemove = function(ev) {
                    var ev = ev || window.event
                    mequeText.style.left = ev.clientX - disX + 'px'
                }

                // 鼠标松开时，停止拖动公告内容
                document.onmouseup = function() {
                    mequeText.onmousemove = null
                }
            }
        },


        /*
        * 获取属性兼容ie，current
         * @param {HTMLElement} obj - 需要获取属性值的DOM元素对象
         * @param {string} attr - 需要获取的样式属性名称，如 'width'、'height'、'opacity' 等
         * @returns {string} 返回指定样式属性的值
        */
        getStyle(obj, attr) {
            // 在IE浏览器中，元素对象有一个 `currentStyle` 属性，该属性包含了元素的所有计算后样式
            if (obj.currentStyle) {
                return obj.currentStyle[attr]
            } else {
                // 对于非IE浏览器，可以使用 `getComputedStyle` 方法来获取元素的计算后样式
                // 第二个参数通常传递 `false`，除非在处理伪元素时
                return getComputedStyle(obj, false)[attr]
            }
        }

    }

    export default Animation