前端小白--marquee无缝滚动

吴维炜

于 2017-12-13 19:25:05 发布

阅读量1.6w

点赞数 3

分类专栏：前端就那么回事文章标签： marquee marquee无缝滚 marquee无限滚 js实现无缝滚动

本文链接：https://blog.csdn.net/qq_38209578/article/details/78795826

版权

前端就那么回事专栏收录该内容

115 篇文章 18 订阅 ¥19.90 ¥99.00

订阅专栏

本文主要是通过原生js实现无缝滚动marquee

###案例图片
这里写图片描述

Tips:早期的css不过优雅，所以如需引用自行完善
####前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .marquee-wrap{
            width: 1000px;
            height: 150px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
            border: 1px solid red;
        }
        .marquee-wrap ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        .marquee-wrap ul li{
            float: left;
            width: 200px;
            height: 150px;
            list-style: none;
        }

了解本专栏