数据可视化项目开发

发表于 | 分类于

数据可视化项目开发

  • To Learn More

    边框图片

    边框图片使用场景

  • 盒子的大小不一，边框样式相同
  • border-image

边框图片的切图原理（重要）

  • 把四个角切出去（九宫格的由来-四个角、四条边、中间部分），中间部分可以铺排、拉伸或者环绕
  • 按照上右下左顺序切割（保证四个角的完整性）

边框图片的使用语法

  • border-image-source 边框图片的路径
  • border-image-slice 指定图像的边界向内偏移（裁剪的尺寸，一定不要加单位，上右下左顺序）
  • border-image-width 图片边框的宽度（需要加单位）不回挤压文字（不是边框的宽度是边框图片的宽度）默认是boder宽度，
  • border-image-repeat 于图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）默认拉伸
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="panel">
      <div class="inner">aaaa</div>
    </div>
    .panel {
      position: relative;
      width: 300rpx;
      height: 200rpx;
      border: 20rpx solid pink;
      border-width: 51rpx 38rpx 20rpx 132rpx;
      border-image-source: url('../../../static/icon/bd.png');
      border-image-slice: 51 38 20 132;
      .inner {
        position: absolute;
      }
    }

无缝滚动

无缝滚动原理

  • 先克隆marquee里面所有的行（row）

    1
    2
    3
    4
    $('.marquee-view .marquee').each(function () {
      let rows = $(this).children().clone();
      $(this).append(rows);
    })

  • 通过CSS3动画滚动marquee

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .marquee-view .marquee {
      animation: move 15s linear infinite;
    }
    @keyframes move {
      0% {

      }
      100% {
        transform: translateY(-50%);
      }
    }

  • 鼠标经过marquee就停止动画啊

    • animation-play-state: running | paused (指定动画是否正在运行或已暂停)
      1
      2
      3
      .marquee-view .marquee:hover {
        animation-play-state: paused;
      }