Vue实现天气预报无缝滚动

绝地灬酷狼 2021-10-23 12:46 603阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>天气情况公告</title>
      <style>
       *{
         margin: 0;
         padding: 0;
       }
        .marquee {
          width: 100%;
          height: 50px;
          align-items: center;
          color: #3A3A3A;
          background-color: #f5f5f5;
          display: flex;
          box-sizing: border-box;
        }
    
        .marquee_title {
          padding: 0 20px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          font-weight: bold;
          border-right: 1px solid #d8d8d8;
          align-items: center;
        }
    
        .marquee_box {
          display: block;
          position: relative;
          width: 60%;
          height: 30px;
          overflow: hidden;
        }
    
        .marquee_list {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
        }
        .marquee_top {
          transition: all 0.5s;
          margin-top: -30px
        }
    
        .marquee_list li {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          padding-left: 20px;
        }
    
        .marquee_list li span {
          padding: 0 2px;
        }
    
        .red {
          color: #FF0101;
        }
        .blue{
          color: blue;
        }
    
      </style>
    
    </head>
    <body>
    
    <div class="vueBox">
      <div class="marquee">
        <div class="marquee_title">
          <span>天气预报</span>
        </div>
        <div class="marquee_box">
          <ul class="marquee_list" :class="{marquee_top:animate}">
            <li v-for="(item, index) in marqueeList">
              <span>{
       {item.name}}</span>
              <span>-</span>
              <span class="red"> {
       {item.city}}</span>
              <span>-</span>
              <span class="blue"> {
       {item.amount}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: ".vueBox",
        data: {
          animate: false,
          marqueeList: [
            {
              name: '北京',
              city: '晴',
              amount: '10℃'
            },
            {
              name: '西安',
              city: '多云',
              amount: '20℃'
            },
            {
              name: '上海',
              city: '小雨',
              amount: '15℃'
            },
            {
              name: '重庆',
              city: '阴',
              amount: '40℃'
            }
          ]
        },
        created: function () {
          setInterval(this.showMarquee, 2000)
        },
        methods: {
          showMarquee: function () {
            this.animate = true;
            setTimeout(()=>{
              this.marqueeList.push(this.marqueeList[0]);
              this.marqueeList.shift();
              this.animate = false;
            },500)},
        }
      });
    </script>
    
    
    </body>
    </html>

效果图：

![20190814145128130.png][]

### [程序员学习书籍推荐][Link 1]（点击查看） ###

[20190814145128130.png]: /images/20211023/7ffd25792d5a490682ae51ce6fe4d5f0.png
[Link 1]: https://gitee.com/black-programmer