zoukankan      html  css  js  c++  java
  • 原生标签实现无限滚动公告

    <template>
      <div style="vertical-align: middle;display:inline-block">
        <div
          v-if="notice"
          class="no-data-background system-broadcast arrow-dialog arrow-dialog-broadcast"
        >
          <div class="arrow" />
          <marquee
            scrollamount="4"
            on-mouseover="this.stop()"
            on-mouseout="this.start()"
          >
            <i class="fa fa-volume-up" />&nbsp;{{ notice }}
          </marquee>
        </div>
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            notice:'',
            token:0
          }
        },
        created() {
          if(!this.token){
            this.getNewestNotice()
            this.token = setInterval(this.getNewestNotice,30000)
          }
        },
        methods: {
            getNewestNotice () {
               // 读取数据
            },
          },
      }
    </script>
    <style scoped>
        .arrow-dialog.arrow-dialog-broadcast {
            /*background-color: #f5f5fa; */
            border-style: solid;
            /*border-color: #b1b1b1;*/
            border-color: #d1d1d1;
            position: relative;
            height: 28px;
             200px;
            border- 1px;
            float: left;
            margin-top: 19px;
            /* color: #415b94; */
            padding: 0 5px;
            border-radius: 5px;
            font-size: 13px;
            color:#222;
        }
    
        .arrow-dialog.arrow-dialog-broadcast .arrow {
            border-left-color: #cccccd;
            transform: translate(0,-50%);
            left: 100%;
            border-top- 5px;
            border-bottom- 5px;
            border-left- 5px;
        }
        .arrow-dialog.arrow-dialog-broadcast .arrow:after {
            content: '';
            height: 0;
             0;
            border-left-color: #f5f5fa;
            transform: translate(0,-50%);
            /*border-top- 2.59px;*/
            /*border-bottom- 2.59px;*/
            /*border-left- 2.59px;*/
            /*margin-left: -5px;*/
            border-top- 3px;
            border-bottom- 3px;
            border-left- 3px;
            margin-left: -5px;
        }
        .arrow-dialog.arrow-dialog-broadcast .arrow, .arrow-dialog.arrow-dialog-broadcast .arrow:after {
            border-top-style: solid;
            border-top-color: transparent;
            border-right: none;
            border-bottom-style: solid;
            border-bottom-color: transparent;
            border-left-style: solid;
            position: absolute;
            top: 50%;
            display: block;
        }
        .arrow {
            z-index: 99;
        }
        .arrow-dialog.arrow-dialog-broadcast marquee {
            height: 100%;
            line-height: 28px;
        }
    </style>

    备注:鼠标移入触发方法最好不要自己写入标签

    扩展:实时更新问题

    1.定时器触发:过度触发问题;

    2.websocket即使通讯:通常在H5游戏中使用

  • 相关阅读:
    【多视图几何】TUM 课程 第5章 双视图重建:线性方法
    【多视图几何】TUM 课程 第4章 同名点匹配
    【多视图几何】TUM 课程 第3章 透视投影
    SpringMVC配置实例
    sqlserver的触发器练习实例
    zTree学习实例
    浅谈JVM与内存分配
    Ajax的简单实用实例
    Sqlserver事务备份和还原实例
    JQueryEasyUI学习简单Demo
  • 原文地址:https://www.cnblogs.com/wheatCatcher/p/13433071.html
Copyright © 2011-2022 走看看