zoukankan      html  css  js  c++  java
  • 微信小程序 跑马灯效果

    js : 

    /**
       * 页面的初始数据
       */
      data: {
        marquee: {
           '',
          text: ''
        },
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        const houseString = '马马马马马马马马马马马马';
        var pre = 0;
        for (var i = 0; i < houseString.length; i++) {
          if (houseString.charCodeAt(i) > 255) {// charCode大于255是汉字
            pre++;
          } else {
            pre += 0.5;
          }
        }
        this.setData({
          [`${'marquee'}.text`]: houseString,
          [`${'marquee'}.width`]: pre
        })
      },

    wxml: 

    <view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em">
      <view class="marquee_text">{{marquee.text}}</view>
    </view> 

    wxss:

    /*跑马灯*/
    @keyframes around {
        from {
          margin-left: 100%;
        }
        to {
          margin-left: var(--marqueeWidth--);/* var接受传入的变量*/
        }
      }
    
    .marquee_container{
      line-height: 40rpx;
      background-color: #F8F8F8;
      height: 1.2em;
      position: relative;
      width: 100%;
    }
    .marquee_container:hover{
      animation-play-state: paused; /*不起作用*/
    }
    .marquee_text{
      font-size: 25rpx;
      display: inline-block;
      white-space: nowrap;
      animation-name: around;
      animation-duration: 8s;
      animation-iteration-count: infinite;
      animation-timing-function:linear;
    }

    1

  • 相关阅读:
    前端主页
    配置站点
    前台
    数据库配置
    后台:Django项目创建
    虚拟环境的搭建
    pip安装源
    AngularJS Scope(作用域)
    scala中的匿名函数 ==> 简单示例
    scala中的内部类 ==> 简单示例
  • 原文地址:https://www.cnblogs.com/Skate0rDie/p/12321662.html
Copyright © 2011-2022 走看看