在http://classicorthodoxbible.com/words.html，我有一个部分破碎的动画;一致的跨浏览器（Mac）测试会引发相同的行为。
目的是将令牌移动到随机位置，然后将它们设置为适当的位置;您可以在当前主页的http://classicorthodoxbible.com中按字符查看此功能。
引擎在两者之间基本相似，位于words.html页面：
function journey(index, starting_x, starting_y, target_x,
target_y, starting_opacity, target_opacity, delay, radix) {
if (isNaN(starting_x) || isNaN(starting_y) || isNaN(target_x) || isNaN(target_y)) {
/* console.log('starting_x: ' + starting_x +
' starting_y: ' + starting_y + ' target_x: ' +
target_x + ' target_y: ' + target_y); */
console.log('Returning...');
return;
}
/* console.log(target_x - starting_x + ', ' + (target_y -
starting_y)); */
if (Math.abs(starting_x - target_x) + Math.abs(starting_y - target_y) < 2) {
// console.log(index);
jQuery('#text_' + index).css({
'left': target_x,
'top': target_y,
'opacity': target_opacity,
'-ms-filter':
'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + target_opacity * 100,
'filter': 'alpha(opacity=' + target_opacity * 100,
'position': 'absolute'
});
} else {
if (starting_x - target_x > 0) {
var new_x = (target_x + Math.floor((starting_x - target_x) * radix));
} else {
var new_x = (target_x + Math.ceil((starting_x - target_x) * radix));
}
if (starting_y - target_y > 0) {
var new_y = (target_y + Math.floor((starting_y - target_y) * radix));
} else {
var new_y = (target_y + Math.ceil((starting_y - target_y) * radix));
}
var new_opacity = target_opacity + (starting_opacity - target_opacity) * radix;
jQuery('#text_' + index).css({
'left': new_x,
'top': new_y,
'opacity': new_opacity,
'-ms-filter':
'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + new_opacity * 100,
'filter': 'alpha(opacity=' + new_opacity * 100,
'position': 'absolute'
});
setTimeout(function () {
journey(index, new_x, new_y, target_x, target_y,
new_opacity, target_opacity, delay, radix);
}, delay);
}
}
function start_fade_in() {
var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible">The Classic Orthodox Bible</a> is a complete Bible that includes Sir Lancelot Brenton\'s translation of the Septuagint (also known as the LXX), the Greek Old Testament as it was known to Christ and many of the earliest Church Fathers. Missing verses and the New Testament are taken from the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a>, whose style and quality are imitated by Sir Brenton. His translation is available in tiny, hard-to-read letters in the margins of <a href="http://tinyurl.com/brenton-septuagint">Hendrickson\'s Septuagint</a>, more of a shorthand convenience to scholars reading the Greek than genuinely intended for devotional use. Readers wishing for a complete English translation of the Septuagint in a regular Bible, and who appreciate the beauty, grandeur, and meticulous word-for-word accuracy of the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a> will find the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a> a delight.</p> <p>If you only buy ONE version of the Bible to help you understand Holy Orthodoxy, without a doubt, buy the <a href="http://tinyurl.com/orthodox-study-bible">Orthodox Study Bible</a>...</p> <p>But if you buy two, as there is good reason to do, you might consider the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a>.</p>';
var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible">The Classic Orthodox Bible</a> a complete Bible like the <a href="http://tinyurl.com/complete-parallel-bible">King James Version</a> that includes the <a href="http://tinyurl.com/brenton-septuagint">Septuagint</a>, and is completely uncensored.</p> <p>Readers wishing for a complete English translation of Orthodox Bible including the Septuagint in a regular Bible, and who appreciate the beauty, grandeur, and meticulous accuracy of the <a href="http://tinyurl.com/complete-parallel-bible">King James</a> will find it a delight.</p> <p>If you only buy ONE version of the Bible to help you understand Holy Orthodoxy, without a doubt, buy the <a href="http://tinyurl.com/orthodox-study-bible">Orthodox Study Bible</a>...</p> <p>But if you buy two, as there is good reason to do, you might consider the <a href="http://tinyurl.com/classic-orthodox-bible">Classic Orthodox Bible</a>.</p>';
var split_message = message.split(/(<.*?>|)/);
var split_message = '<p><a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_0">The</span> <span id="text_1">Classic</span> <span id="text_2">Orthodox</span> <span id="text_3">Bible</span></a> <span id="text_4">a</span> <span id="text_5">complete</span> <span id="text_6">Bible</span> <span id="text_7">like</span> <span id="text_8">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_9">King</span> <span id="text_10">James</span> <span id="text_11">Version</span></a> <span id="text_12">that</span> <span id="text_13">includes</span> <span id="text_14">the</span> <a href="http://tinyurl.com/brenton-septuagint"><span id="text_15">Septuagint,</span></a> <span id="text_16">and</span> <span id="text_17">is</span> <span id="text_18">completely</span> <span id="text_19">uncensored.</span></p> <p><span id="text_20">Readers</span> <span id="text_21">wishing</span> <span id="text_22">for</span> <span id="text_23">a</span> <span id="text_24">complete</span> <span id="text_25">English</span> <span id="text_26">translation</span> <span id="text_27">of</span> <span id="text_28">Orthodox</span> <span id="text_29">Bible</span> <span id="text_30">including</span> <span id="text_31">the</span> <span id="text_32"><a href="http://tinyurl.com/brenton-septuagint">Septuagint</span></span> <span id="text_33">in</span> <span id="text_34">a</span> <span id="text_35">regular</span> <span id="text_36">Bible,</span> <span id="text_37">and</span> <span id="text_38">who</span> <span id="text_39">appreciate</span> <span id="text_40">the</span> <span id="text_41">beauty,</span> <span id="text_42">grandeur,</span> <span id="text_43">and</span> <span id="text_44">meticulous</span> <span id="text_45">accuracy</span> <span id="text_46">of</span> <span id="text_47">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_48">King</span> <span id="text_49">James</span></a> <span id="text_50">will</span> <span id="text_51">find</span> <span id="text_52">it</span> <span id="text_53">a</span> <span id="text_54">delight.</span></p> <p><span id="text_55">If</span> <span id="text_56">you</span> <span id="text_57">only</span> <span id="text_58">buy</span> <span id="text_59">ONE</span> <span id="text_60">version</span> <span id="text_61">of</span> <span id="text_62">the</span> <span id="text_63">Bible</span> <span id="text_64">to</span> <span id="text_65">help</span> <span id="text_66">you</span> <span id="text_67">understand</span> <span id="text_68">Holy</span> <span id="text_69">Orthodoxy,</span> <span id="text_70">without</span> <span id="text_71">a</span> <span id="text_72">doubt,</span> <span id="text_73">buy</span> <span id="text_74">the</span> <a href="http://tinyurl.com/orthodox-study-bible"><span id="text_75">Orthodox</span> <span id="text_76">Study</span> <span id="text_77">Bible</span></a><span id="text_78">...</span></p> <p><span id="text_79">But</span> <span id="text_80">if</span> <span id="text_81">you</span> <span id="text_82">buy</span> <span id="text_83">two,</span> <span id="text_84">as</span> <span id="text_85">there</span> <span id="text_86">is</a> <span id="text_87">good</span> <span id="text_88">reason</span> <span id="text_89">to</span> <span id="text_90">do,</span> <span id="text_91">you</span> <span id="text_92">might</span> <span id="text_93">consider</span> <span id="text_94">the</span> <a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_94">Classic</span> <span id="text_95">Orthodox</span> <span id="text_96">Bible</span></a><span id="text_97">.</span></p>';
var counter = 0;
var filtered_message = '<div class="adjusted">';
var message = '<p><a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_0">The</span> <span id="text_1">Classic</span> <span id="text_2">Orthodox</span> <span id="text_3">Bible</span></a> <span id="text_4">a</span> <span id="text_5">complete</span> <span id="text_6">Bible</span> <span id="text_7">like</span> <span id="text_8">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_9">King</span> <span id="text_10">James</span> <span id="text_11">Version</span></a> <span id="text_12">that</span> <span id="text_13">includes</span> <span id="text_14">the</span> <a href="http://tinyurl.com/brenton-septuagint"><span id="text_15">Septuagint,</span></a> <span id="text_16">and</span> <span id="text_17">is</span> <span id="text_18">completely</span> <span id="text_19">uncensored.</span></p> <p><span id="text_20">Readers</span> <span id="text_21">wishing</span> <span id="text_22">for</span> <span id="text_23">a</span> <span id="text_24">complete</span> <span id="text_25">English</span> <span id="text_26">translation</span> <span id="text_27">of</span> <span id="text_28">Orthodox</span> <span id="text_29">Bible</span> <span id="text_30">including</span> <span id="text_31">the</span> <span id="text_32"><a href="http://tinyurl.com/brenton-septuagint">Septuagint</span></span> <span id="text_33">in</span> <span id="text_34">a</span> <span id="text_35">regular</span> <span id="text_36">Bible,</span> <span id="text_37">and</span> <span id="text_38">who</span> <span id="text_39">appreciate</span> <span id="text_40">the</span> <span id="text_41">beauty,</span> <span id="text_42">grandeur,</span> <span id="text_43">and</span> <span id="text_44">meticulous</span> <span id="text_45">accuracy</span> <span id="text_46">of</span> <span id="text_47">the</span> <a href="http://tinyurl.com/complete-parallel-bible"><span id="text_48">King</span> <span id="text_49">James</span></a> <span id="text_50">will</span> <span id="text_51">find</span> <span id="text_52">it</span> <span id="text_53">a</span> <span id="text_54">delight.</span></p> <p><span id="text_55">If</span> <span id="text_56">you</span> <span id="text_57">only</span> <span id="text_58">buy</span> <span id="text_59">ONE</span> <span id="text_60">version</span> <span id="text_61">of</span> <span id="text_62">the</span> <span id="text_63">Bible</span> <span id="text_64">to</span> <span id="text_65">help</span> <span id="text_66">you</span> <span id="text_67">understand</span> <span id="text_68">Holy</span> <span id="text_69">Orthodoxy,</span> <span id="text_70">without</span> <span id="text_71">a</span> <span id="text_72">doubt,</span> <span id="text_73">buy</span> <span id="text_74">the</span> <a href="http://tinyurl.com/orthodox-study-bible"><span id="text_75">Orthodox</span> <span id="text_76">Study</span> <span id="text_77">Bible</span></a><span id="text_78">...</span></p> <p><span id="text_79">But</span> <span id="text_80">if</span> <span id="text_81">you</span> <span id="text_82">buy</span> <span id="text_83">two,</span> <span id="text_84">as</span> <span id="text_85">there</span> <span id="text_86">is</a> <span id="text_87">good</span> <span id="text_88">reason</span> <span id="text_89">to</span> <span id="text_90">do,</span> <span id="text_91">you</span> <span id="text_92">might</span> <span id="text_93">consider</span> <span id="text_94">the</span> <a href="http://tinyurl.com/classic-orthodox-bible"><span id="text_94">Classic</span> <span id="text_95">Orthodox</span> <span id="text_96">Bible</span></a><span id="text_97">.</span></p>';
jQuery('.display').html(message);
var initial_coordinates = [];
for (var index = 0; index < 100; ++index) {
if (jQuery('#text_' + index).size()) {
var coordinates = jQuery('#text_' + index).offset();
initial_coordinates.push({
'index': index,
'left': coordinates['left'],
'top': coordinates['top']
});
}
}
for (var index = 0; index < initial_coordinates.length; ++index) {
if (jQuery('#text_' + initial_coordinates[index]['index']).size()) {
var radius = Math.random() * (jQuery(window).width() + jQuery(window).height());
var angle = Math.random() * 2 * 3.1415926535;
var starting_x = (
initial_coordinates[index]['left'] + Math.cos(angle) * radius);
// console.log('starting_y: ' + starting_x);
var starting_y = (
initial_coordinates[index]['top'] + Math.sin(angle) * radius);
// console.log('starting_x: ' + starting_y);
journey(initial_coordinates[index]['index'],
starting_x, starting_y,
initial_coordinates[index]['left'],
initial_coordinates[index]['top'], Math.random(),
1, 1, .9);
}
}
}
start_fade_in();
连连呢？我查看了在动画之前用于填充DIV的最后一个字符串，我看不出我是如何设法将最后5或10个单词发送到与其他80或90完全不同的行为。
谢谢，
答案 0 :(得分：3)
获得错误结局位置的是因为它们位于另一个元素内部，因此它们的偏移量基于其父元素。
例如＃text_86有子元素，但由于它有一个位置：绝对且子元素的位置为：absolute，因此子元素的位置基于父元素的左上角，在本例中为＃text_86的左上角
您需要在此处拥有算法因子，将子元素从容器中取出，或仅移动该元素而不是子元素
答案 1 :(得分：0)
＃text_86
标记中有拼写错误/错误<span id="text_86">is</a>
后面的元素计算为text_86的子元素。