在滾動條上沿圓形路徑移動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

回答

相關問題