我使用背景图片来分解网页上的多个部分.我希望这些图像显示视差效果,即页面内容在图像上流动的速度快于图像本身的移动速度.我想用backpax script美元买这个.
发生魔术的div的超文本标记语言如下所示:
超文本标记语言
<div class="js-parallax"
data-img="url">
</div>
使用数据属性data-img
来参考背景图像.
我已经在代码片段中放置了四个这样的div.后两者有一个空的data-img属性,我想设置.
我有一个文件夹,里面有一系列我可以设置为背景的图片.
我想使用JavaScript来随机使用一张图像作为视差图像.(或多个,如果我用class="js.parallax"
设置了许多div,那么在页面加载上,必须在data-img attribute
后面附加一个指向随机图像的相对URL
我使用的脚本如下所示:(我在这里使用了3个链接来取消开机画面,而不是相对本地文件夹的URL)
当我使用这个脚本时,它只显示具有空data-img属性的那两个div的背景色.
然而,当我在桌面上打开删除工具或调整浏览器窗口大小时,会加载随机图像.然而,不是在这个代码片段中!
这怎麽可能?我的脚本顺序有问题吗?或者DOM还没有加载吗?
我怎样才能解决这个问题,让随机的图片直接加载到页面加载.
new Backpax('.js-parallax')
$(document).ready(function () {
var imagesPara = ['https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80', 'https://images.unsplash.com/photo-1515016454727-48ddf26ac789?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80', 'https://images.unsplash.com/photo-1494396550299-e4eb26401c8b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80'
];
$('.js-parallax').each(function () {
var randomImage = imagesPara[Math.floor(Math.random() * imagesPara.length)];
$(this).attr({
'data-img': '../_assets/img/background-img/' + randomImage + ''
});
});
});
.js-parallax {
background-image: ;
background-color: blue;
height: calc(100vh - 60vh);
}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/backpax@latest/bundle/backpax.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 offset-sm-1" role="main">
<h1>Some Title</h1>
<p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis
unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
<div class="js-parallax" data-img="https://images.unsplash.com/photo-1565275706395-d452122d6cfc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
<p>contents here</p>
</div>
<p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis
unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
<hr>
<p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis
unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
<div class="js-parallax" data-img="https://images.unsplash.com/photo-1533130061792-64b345e4a833?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</div>
<p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis
unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
<hr>
<p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis
unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
<div class="js-parallax" data-img="">
</div>
<p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis
unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
<hr>
<p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis
unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
<div class="js-parallax" data-img="">
</div>
<p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis
unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
</div>
</div>
</div>
</body>