无缝滚动实现

最新推荐文章于 2022-10-16 11:45:00 发布

annuchao0059

最新推荐文章于 2022-10-16 11:45:00 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/muqiao/p/9711211.html

版权

CSS动画实现无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css无缝滚动</title>
    <style>
        .partner {
            width: 100%;
            margin: 20px auto;
            overflow: hidden;
        }

        .partner ul {
            display: flex;
            width: 2946px;
            list-style: none;
            animation: ec-marquee-move 6s infinite linear;
        }

        .partner ul li {
          padding: 20px;
        }

        .partner ul:hover {
            animation-play-state: paused;
        }

        @keyframes ec-marquee-move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(-800px);
            }
        }
    </style>
</head>
<body>
<div class="partner">
    <ul class="partner__item">
      <li>国家能源投资集团有限责任公司</li>
      <li>中国电力科学研究院有限公司</li>
      <li>华东勘测设计研究院有限公司</li>
      <li>中国电力建设集团有限公司</li>
      <li>中国节能环保集团有限公司</li>
      <li>中南勘测设计研究院有限公司</li>
      <li>中国能源建设股份有限公司</li>
      <li>中机国能电力工程有限公司</li>
      <li>昆明勘测设计研究院有限公司</li>
      <li>中国电力工程顾问集团有限公司</li>
      <li>北京勘测设计研究院有限公司</li>
      <li>贵阳勘测设计研究院有限公司</li>
    </ul>
</div>
</body>
</html>

j'Query 实现无缝滚动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
    ul,
    li {
      margin: 0;
      padding: 0;
    }
    .content { 
      width: 1020px;
      height: 60px;
      overflow: hidden; 
      border: #4e83c2 solid 1px; 
      margin:50px auto;
    }
    .content ul{
      display: flex;
      flex-direction: row;
      width: 100%; 
      overflow: hidden;
    }
    .content ul li {
      width: 400px; 
      height:80px;
      margin: 20px;
      list-style: none;
    }

</style>
<body>
<div class="content">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
</ul>
</div>
</body>
</html>
<script>
  window.onload = function () {
    function scroll(){
    $(".content ul").animate({"margin-left":"-300px"},function(){
        $(".content ul li:eq(0)").appendTo($(".content ul"))
        $(".content ul").css({"margin-left":0})
    })
    }
      setInterval(scroll,2000)
  }
</script>

转载于:https://www.cnblogs.com/muqiao/p/9711211.html