绝对元素粒子重叠其他元素的问题

Absolute elements particles overlapping other elements issue

本文关键字：元素 问题 其他 粒子 重叠      更新时间：2023-09-26

我把这个漂亮的粒子脚本放在我的页面上，以获得有趣的外观，也可以玩更复杂的JS，但我发现，我把一些粒子做得更大，看起来像散焦粒子，它们漂浮在图像链接上，导致它们无法点击，这虽然不是一个大问题，但可能会令人讨厌。

我想知道如何修改这个脚本，使粒子位于图像按钮链接后面。除了脚本在"显示粒子"部分应用css的一个部分外，没有css。

顺便说一句，我试着给图像和链接一个10000的z索引，看看这是否有帮助，但仍然没有成功。

<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>

使用.prepend（而不是.append）

$(document.body).prepend( this.element );

这样，由于自然的Z顺序DOM优先级，您的绝对粒子将位于其他定位的页面元素下方。

根据以上内容，您可以理解，您还需要将position添加到主页面包装器中，以便实现以下功能：

http://jsbin.com/cizut/1/edit?html，css，js，输出

结论：

#mainPageWrapper{
  position:relative;
  /* .....other styles */
}


$(document.body).prepend( this.element );

相关文章：