Я поместил этот изящный скрипт частиц на свою страницу для интересного вида, а также для того, чтобы поиграть с более сложным JS, но обнаружил, что некоторые из частиц, которые я увеличил, чтобы они выглядели как пятнышки боке, плавают над ссылками на изображения, из-за чего они не -кликабельно, что, хотя и не является большой проблемой, может раздражать.
Мне интересно, как изменить этот скрипт, чтобы частицы находились за ссылками кнопки изображения. CSS отсутствует, за исключением одного раздела, где он применяется скриптом в разделе «Отображение частицы».
Кстати, я попытался присвоить изображению и ссылке z-индекс 10000, просто чтобы посмотреть, поможет ли это, но все равно не помогло.
<script type="text/javascript">
function Particle() {
this.path = '../static/images/';
this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png'];
// Randomly Pick a Particle Model
this.image = this.images[randomInt(this.images.length)];
this.file = this.path + this.image;
// Create a Particle DOM
this.element = document.createElement('img');
this.speed().newPoint().display().newPoint().fly();};
// Generate Random Speed
Particle.prototype.speed = function() {
this.duration = (randomInt(10) + 5) * 1100;
return this;
};
// Generate a Random Position
Particle.prototype.newPoint = function() {
this.pointX = randomInt(window.innerWidth - 100);
this.pointY = randomInt(window.innerHeight - 100);
return this;
};
// Display the Particle
Particle.prototype.display = function() {
$(this.element)
.attr('src', this.file)
.css('position', 'absolute')
.css('top', this.pointY)
.css('left', this.pointX);
$(document.body).append(this.element);
return this;
};
// Animate Particle Movements
Particle.prototype.fly = function() {
var self = this;
$(this.element).animate({
"top": this.pointY,
"left": this.pointX,
}, this.duration, 'linear', function(){
self.speed().newPoint().fly();
});
};
function randomInt(max) {
// Generate a random integer (0 <= randomInt < max)
return Math.floor(Math.random() * max);
}
$(function(){
var total = 30;
var particles = [];
for (i = 0; i < total; i++){
particles[i] = new Particle();
}
});
</script>