<分区>
标签 javascript jquery html css
我编写了简单的 js 函数，它从 Canvas 区域的随机坐标中的数组输出单词或短语。
但我对我的算法或样式感到困惑，单词出现在随机坐标中并相互覆盖。如何改进我的功能或样式以避免此问题？
$(document).ready(function() {
words();
});
// Words array
function words() {
var words = ["lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet"];
$.each(words, function(index, value) {
// console.log( index + ": " + value );
$('#words_block').append('<div class="word"><span>' + value + '</span></div>');
});
// callback wuth check
if (typeof wordsCloud != 'undefined' && $.isFunction(wordsCloud)) {
return wordsCloud();
} else {
alert('wordsCloud() does not exist');
}
}
// Words effects
function wordsCloud() {
var maxDelay = 2000;
var minSpeed = 2500;
var maxSpeed = 4000;
$('#words_block .word').each(function() {
var delay = Math.ceil(Math.random() * maxDelay);
var speed = maxSpeed + Math.ceil(Math.random() * (minSpeed - maxSpeed));
var random_num_two = Math.floor(Math.random() * 101);
var random_num_three = Math.floor(Math.random() * (0 - 700) + 700);
var random_text_size = Math.floor(Math.random() * (14 - 55) + 55);
$(this).delay(delay).css({
"font-size": random_text_size + 'px',
top: random_num_three + 'px',
left: random_num_two + '%'
// opacity from .1 to .6
}).fadeTo(speed, (Math.random() * (0.1 - 0.7) + 0.7).toFixed(2));
});
}body {
background-color: black;
color: white;
}
#words_block {
cursor: default;
position: relative;
height: 700px;
width: 900px;
}
#words_block .word {
text-transform: uppercase;
position: absolute;
opacity: 0;
}
#words_block .word:hover {
z-index: 10;
opacity: 1 !important;
}
#words_block .word:hover span {
background-color: red !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="words_block"></div>最佳答案
您可以存储每个“随机”位置字符串的位置，并通过检查冲突确保它们不重叠。
function(rect1_x, rect1_y, rect1_w, rect1_h,
rect2_x, rect2_y, rect2_w, rect2_h)
{
// top-left corner
if ( this.PointInRect(rect1_x, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
// top-right corner
if ( this.PointInRect(rect1_x + rect1_w - 1, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
// bottom-right corner
if ( this.PointInRect(rect1_x + rect1_w - 1, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
// bottom-left corner
if ( this.PointInRect(rect1_x, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
// Check to see if rectangle 2 is hit any part of rectanlge 1
// top-left corner
if ( this.PointInRect(rect2_x, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
// top-right corner
if ( this.PointInRect(rect2_x + rect2_w - 1, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
// bottom-right corner
if ( this.PointInRect(rect2_x + rect2_w - 1, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
// bottom-left corner
if ( this.PointInRect(rect2_x, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
// If there is no collision
return false;
}
或者您可以在不透明度设置为 25% 的情况下在每个字符串周围绘制一个实心框，这将覆盖它后面的其他字符串，这可能会提供更好的感觉和样式。
关于javascript - 如何改进我的 "random words cloud"函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32367813/