Проблема с частицами абсолютных элементов, перекрывающими другие элементы

Я поместил этот изящный скрипт частиц на свою страницу для интересного вида, а также для того, чтобы поиграть с более сложным 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>

person kylebellamy    schedule 13.11.2014    source источник


Ответы (1)


person    schedule
comment
Пробовал, а они до сих пор плавают по ссылкам. Это может быть глупый вопрос, но должен ли я помещать JS в заголовок страницы, чтобы он также загружался первым? В настоящее время он находится внизу страницы. - person kylebellamy; 13.11.2014
comment
@kylebellamy вы уже используете document.ready, так что нет большой разницы - person Roko C. Buljan; 13.11.2014
comment
@kylebellamy, как я уже сказал ... просто используйте prepend и сделайте #container (или оболочку главной страницы) элементом positioned, например: position:relative; - person Roko C. Buljan; 13.11.2014
comment
@kylebellamy отредактировал мой ответ, чтобы сделать его более точным. - person Roko C. Buljan; 13.11.2014
comment
Это сделало это! Извините за задержку с ответом, работа, работа, работа и все такое. - person kylebellamy; 13.11.2014
comment
Ваше редактирование отлично прояснило это для меня, кстати. Я также обнаружил, что после редактирования вашего CSS-файла ДЕЙСТВИТЕЛЬНО помогает сохранить его... лол - person kylebellamy; 13.11.2014