小编00d*_*dri的帖子

在滚动时沿圆形路径移动 div

我有一个圆形容器 div,其中有多个 div,沿其圆周带有文本。我需要在滚动的任一方向上沿圆周将文本 div 移入和移出视图。

我使用 d3.js 选择并设置了圆形容器 div 的样式,并将其放入一个较小的包装 div 中,overflow-y 设置为 auto。

<div id="circle-out-container-wrapper"><div id="circle-out-container"></div></div>

var radius = Math.floor(document.documentElement.clientHeight * 1.5);
d3.select('#circle-out-container-wrapper')
  .style('overflow-y', 'auto')
  .style('overflow-x', 'hidden')
  .style('width', '80%')
  .style('height', '400px')
  .style('left', '0')
  .style('top', '0')
  .style('position', 'absolute');

d3.select('#circle-out-container')
  .style('background-color', 'transparent')
  .style('position', 'absolute')
  .style('box-sizing', 'border-box')
  .style('display', 'block')
  .style('border', '1px solid #bce8f1')
  .style('border-radius', '50%')
  .style('width', (radius * 2) + "px")
  .style('height', (radius * 2) + "px")
  .style('left', Math.floor(-(radius * 5) / 3) + "px")
  .style('top', Math.floor(-(radius * 2) / 3) + …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery d3.js

6
推荐指数
1
解决办法
1191
查看次数

标签 统计

css ×1

d3.js ×1

javascript ×1

jquery ×1