在滚动条上沿圆形路径移动div

我有一个圆形容器div，其中有多个div，文本沿着它的圆周。我需要在滚动的任一方向上沿圆周移动和移出文本div。在滚动条上沿圆形路径移动div

我选择并使用d3.js设置了圆形容器div，并将其放在一个较小的wrapper 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) + "px");

然后我添加文本divs并将它们与转换位置。

var params = []; 
for (var i = 30; i >= 0; i--) { 
    params.push(i); 
} 

var nums = d3.select("#circle-out-container") 
    .selectAll("div.nums") 
    .data(params) 
    .enter() 
    .append("div") 
    .attr("class", "circle") 
    .style("transform", function(d, i) { 
    var angle = 20 - (i + 1) * (70/(params.length + 1)); 
    return "rotate(" + angle + "deg) translate(" + radius + "px, 0) rotate(" + -angle + "deg)"; 
    }) 
    .text(function(d) { return d });

这是我如何滚动文本的div：

$('#circle-out-container-wrapper').scroll(function() { 
    b.style("transform", function(d, i) { 
    var scroll = $('#circle-out-container-wrapper').scrollTop(); 
    var angle = scroll - (i + 1) * (40/(params.length + 1)); 
    return "rotate(" + angle + "deg) translate(" + radius + "px, 0) rotate(" + -angle + "deg)"; 
    }) 
});

容器圈必须是静态的，其中只有大约一半的它显示。在滚动文本div移动的同时，您还可以向下滚动圆形容器div并显示所显示的弧线。我如何保持一切就位，并在滚动时只沿圆形路径移动文本div？

这是一个小提琴：http://jsfiddle.net/00drii/etnkLkL3/3/圆是在模态。

来源

2015-11-23 00dri

我从来没有使用过d3.js，但你需要把包含你需要滚动的容器外的数字的div。

<div id="app"> 
    <!-- container --> 
    <div id="scroll-container"> 
     <!-- content of the scroll --> 
     <div class="content"></div> 
    </div> 

    <!-- the numbers should be inside this div --> 
    <div id="canvas"> 
    </div> 
</div>

Here you have an example code适应您的需求。

来源

2015-11-30 13:13:18 ElChiniNet

在滚动条上沿圆形路径移动div

回答

相关问题