js+css 父div，里面有很多子div，当子div在父div中放不下时候，自动滚动子div，向左横向滚动，循环展示子div信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #parentDiv {
            width: 300px;
            overflow: hidden;
            white-space: nowrap;
        }

        #childContainer {
            display: inline-block;
        }

        .childDiv {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin-right: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="parentDiv">
        <div id="childContainer">
            <div class="childDiv">1</div>
            <div class="childDiv">2</div>
            <div class="childDiv">3</div>
            <div class="childDiv">4</div>
            <div class="childDiv">5</div>
            <!-- 添加更多子div根据需要 -->
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var parentDiv = document.getElementById('parentDiv');
            var childContainer = document.getElementById('childContainer');

            var childWidth = document.querySelector('.childDiv').offsetWidth;
            var totalWidth = childWidth * document.querySelectorAll('.childDiv').length;

            // 判断子div总宽度是否超过父div宽度
            if (totalWidth > parentDiv.offsetWidth) {
                // 设置子div容器宽度，确保子div在一行显示
                childContainer.style.width = totalWidth + 'px';

                // 将滚动的动画时长设置为总宽度除以100，确保速度适中
                var animationDuration = totalWidth / 100;
                document.styleSheets[0].insertRule('@keyframes scrollAnimation { 0% { transform: translateX(0); } 100% { transform: translateX(-' + totalWidth + 'px); } }', 0);
                document.styleSheets[0].insertRule('#childContainer { animation: scrollAnimation ' + animationDuration + 's linear infinite; }', 1);

                // 鼠标悬停和离开事件处理
                parentDiv.addEventListener('mouseover', function () {
                    childContainer.style.animationPlayState = 'paused';
                });

                parentDiv.addEventListener('mouseout', function () {
                    childContainer.style.animationPlayState = 'running';
                });
            }
        });
    </script>
</body>
</html>
posted @ 2024-02-02 11:15  小小菜鸟04  阅读(13)  评论(0)    收藏  举报