3
我試圖使這個圓的角度來看（檢查小提琴鏈接）。我嘗試了CSS屬性，但它顯示不尋常的行爲。
/*
using:
circular positioning code:
http://stackoverflow.com/a/10152437/1644202
point at:
http://pointat.idenations.com/api
depends on:
jquery
https://github.com/thomas-dotworx/jqrotate (pointat)
*/
function createFields() {
$('.field').remove();
var container = $('#container');
for(var i = 0; i < +$('input:text').val(); i++) {
$('<div/>', {
'class': 'field',
'text': i + 1,
}).appendTo(container);
}
}
function distributeFields(deg) {
deg = deg || 0;
var radius = 200;
var fields = $('.field:not([deleting])'), container = $('#container'),
width = container.width(), height = container.height(),
angle = deg || Math.PI*3.5, step = (2*Math.PI)/fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
if(window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
}
$('input').change(function() {
createFields();
distributeFields();
initPointAt();
});
var timer = null,
timer2 = null;
$('#addone').click(function() {
// do not append to current, otherwise you see it moving through the container
$('.field').addClass('moveAni');
$('<div/>', {
'class': 'field',
'text': $('.field').length +1
})
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'})
.addClass('moveAni')
.appendTo('#container')
.pointat({
target: "#center",
defaultDirection: "down"
});
distributeFields();
// without css:
//$('.field').pointat("updateRotation");
// with css: for css move animation
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
\t $('.field').pointat({
target: "#center",
defaultDirection: "down"
\t \t }); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
\t clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field').length);
});
$('#delone').click(function() {
$('#container .field:not([deleting]):last')
.attr('deleting', 'true')
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'
})
.fadeOut(400, function() {
$(this).remove();
});
\t \t // do distribiution as if the currently out-animating fields are gone allready
distributeFields();
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
\t clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field:not([deleting])').length); // update yet
});
createFields();
distributeFields();
initPointAt();
function initPointAt() {
$('.field').pointat({
target: "#center",
defaultDirection: "down",
xCorrection: -20,
yCorrection: -20
});
}body { padding: 2em; }
#container { width: 600px; height: 600px; border: 1px solid #000; position: relative; border-radius: 50%;}
#center { width: 10px; height: 10px; position: absolute; left: 295px; top: 295px; background: #000; border-radius: 50%; }
.field { position: absolute; background: #f00; }
#crosshair-x { width: 600px; height: 1px; background: #000; position: absolute; left: 0; top: 300px; }
#crosshair-y { width: 1px; height: 600px; background: #000; position: absolute; left: 300px; top: 0; }
.field {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.moveAni {
transition: left 400ms ease-out, top 400ms ease-out;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//pointat.idenations.com/jquery.pointat.min.js"></script>
<script src="//pointat.idenations.com/jquery.rotate-1.0.1.min.js"></script>
Number of fields: <input type="text" value="4" />
<button id="addone">++</button>
<button id="delone">--</button>
<div id="container">
<div id="center"></div>
<div id="crosshair-x"></div>
<div id="crosshair-y"></div>
</div>然後我插入內側容器的圖像TAD和嘗試添加圖像標籤內場。
我使用three.js實現了這個功能，但不想在其中執行此操作，因爲它需要太多時間來加載。