css3+jsvascript 制作图片跑马灯

最新推荐文章于 2024-09-03 13:10:35 发布

MR·Feng

最新推荐文章于 2024-09-03 13:10:35 发布

阅读量1.1k

点赞数

分类专栏： html css css3 js 文章标签： css3 javascript 动画

本文链接：https://blog.youkuaiyun.com/weihaifeng163/article/details/78437832

版权

js 同时被 3 个专栏收录

20 篇文章

订阅专栏

html

11 篇文章

订阅专栏

css

6 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css3+jsvascript 制作图片跑马灯</title>
        <style type="text/css">
            * { transition: .1s; list-style: none; }
            .list { position: relative; width: 800px; height: 100px; background-color: #FEFEF2; border: 1px solid #999; margin: 20px auto; overflow: hidden; }
            .list .rowup{ position: relative; width: 1600px; height: 100px; -webkit-animation: 20s rowup linear infinite normal; animation: 20s rowup linear infinite normal; }
            .ss { width: 800px; height: 100px; float: left; }
            li { float: left; width: 100px; height: 100px; }
            li img { width: 95px; height: 90px; padding: 5px 2.5px; }
        </style>
    </head>
    <body>
        <div class="list">
            <div class="cc"></div>
        </div>


        <script type="text/javascript">
            // 设置keyframes属性
            function addKeyFrames(y){
                var style = document.createElement('style');
                style.type = 'text/css';
                var keyFrames = `
                @-webkit-keyframes rowup {
                    0% {
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }
                    100% {
                        -webkit-transform: translate3d(A_DYNAMIC_VALUE, 0, 0);
                        transform: translate3d(A_DYNAMIC_VALUE, 0, 0);
                    }
                }
                @keyframes rowup {
                    0% {
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }
                    100% {
                        -webkit-transform: translate3d(A_DYNAMIC_VALUE, 0, 0);
                        transform: translate3d(A_DYNAMIC_VALUE, 0, 0);
                    }
                }`;
                style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
                document.getElementsByTagName('head')[0].appendChild(style);
            }


            function init(){    
                var data = `
                    <li><img src="./images/img_1.jpg"></li>
                    <li><img src="./images/img_1.jpg"></li>
                    <li><img src="./images/img_1.jpg"></li>
                    <li><img src="./images/img_1.jpg"></li>
                    <li><img src="./images/img_1.jpg"></li>
                    <li><img src="./images/img_1.jpg"></li>
                    <li><img src="./images/img_1.jpg"></li>
                    <li><img src="./images/img_1.jpg"></li>`;


                var html = '<div class="ss">'+ data + '</div>';
                document.querySelector('.list .cc').innerHTML = html + html;
                var width = document.querySelector('.list .ss').offsetWidth;
                addKeyFrames( '-' + width + 'px' );
                document.querySelector('.list .cc').className += ' rowup';
            }
            init();
        </script>
    </body>
</html>