消息轮播

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>最新战报</title>
  6 
  7 <style>
  8 div, ul, li, span, img {
  9     margin: 0;
 10     padding: 0;
 11     display: flex;
 12     box-sizing: border-box;
 13 }
 14 .marquee {
 15      100%;
 16     height: 50px;
 17     align-items: center;
 18     color: #3A3A3A;
 19     background-color: #b3effe;
 20     display: flex;
 21     box-sizing: border-box;
 22 }
 23 
 24 .marquee_title {
 25     padding: 0 20px;
 26     height: 30px;
 27     font-size: 14px;
 28     border-right: 1px solid #d8d8d8;
 29     align-items: center;
 30 }
 31 
 32 .marquee_box {
 33     display: block;
 34     position: relative;
 35      60%;
 36     height: 30px;
 37     overflow: hidden;
 38 }
 39 
 40 .marquee_list {
 41     display: block;
 42     position: absolute;
 43     top: 0;
 44     left: 0;
 45 }
 46 .marquee_top {
 47     transition: all 0.5s;
 48     margin-top: -30px
 49 }
 50 
 51 .marquee_list li {
 52     height: 30px;
 53     line-height: 30px;
 54     font-size: 14px;
 55     padding-left: 20px;
 56 }
 57 
 58 .marquee_list li span {
 59     padding: 0 2px;
 60 }
 61 
 62 .red {
 63     color: #FF0101;
 64 }
 65 
 66 </style>
 67 
 68 </head>
 69 <body>
 70 
 71 <div class="vueBox">
 72     <div class="marquee">
 73         <div class="marquee_title">
 74             <span>最新战报</span>
 75         </div>
 76         <div class="marquee_box">
 77             <ul class="marquee_list" :class="{marquee_top:animate}">
 78                 <li v-for="(item, index) in marqueeList">
 79                     <span>{{item.name}}</span>
 80                     <span>在</span>
 81                     <span class="red"> {{item.city}}</span>
 82                     <span>杀敌</span>
 83                     <span class="red"> {{item.amount}}</span>
 84                     <span>万</span>
 85                 </li>
 86             </ul>
 87         </div>
 88     </div>
 89 </div>
 90 
 91 <script type="text/javascript" src="js/vue.min.js"></script>
 92 <script type="text/javascript">
 93     const vm = new Vue({
 94         el: ".vueBox",
 95         data: {
 96             animate: false,
 97             marqueeList: [
 98                 {
 99                     name: '1军',
100                     city: '北京',
101                     amount: '10'
102                 },
103                 {
104                     name: '2军',
105                     city: '上海',
106                     amount: '20'
107                 },
108                 {
109                     name: '3军',
110                     city: '广州',
111                     amount: '30'
112                 },
113                 {
114                     name: '4军',
115                     city: '重庆',
116                     amount: '40'
117                 }
118             ]
119         },
120         created: function () {
121             setInterval(this.showMarquee, 2000)
122         },
123         methods: {
124             showMarquee: function () {
125                 this.animate = true;
126                 setTimeout(()=>{
127                     this.marqueeList.push(this.marqueeList[0]);
128                 this.marqueeList.shift();
129                 this.animate = false;
130             },500)},
131         }
132     });
133 </script>
134 
135 
136 </body>
137 </html>