gpt4 book ai didi

jquery - Stellar JS(视差插件)定位问题

转载 作者:太空宇宙 更新时间:2023-11-04 15:23:19 24 4
gpt4 key购买 nike

我正在使用 Stellar JS 创建一个视差网站,但我在“幻灯片”中定位元素时遇到了严重问题。我所有的元素都与给定的 CSS 完美对齐;然而,一旦我向图像添加“data-stellar-ratio”属性,它们的位置就完全搞砸了。扭曲的偏移没有明显的模式,或者我只是调整 css。

这是我的html

<body>
<div id="scrollContainer">
<div id="scroller">

<section data-slide="1" class="slide" id="slide1" > <!-- Home Screen -->
<img class="part" data-stellar-ratio="1.5" src="images/vi.svg" alt="">
<img class="part" data-stellar-ratio="2" src="images/nyl.svg" alt="">
<img class="part" data-stellar-ratio="3" src="images/vibe.svg" alt="">
<img class="part" data-stellar-ratio="2.5" src="images/whitaker.svg" alt="">
<img class="part" data-stellar-ratio="1" src="images/red.svg" alt="">
</section> <!-- END Home -->

每个“section.slide”都设置为“position: relative;”并且子图像设置为绝对。这是我的 CSS

    #scroller
{
text-align: left;
width: 960px;
margin: 0 auto;
padding:0;
}
section.slide { position:relative; width:960px; height: 728px;}
.part { position:absolute; }

section#slide1 {background: #f2f2f2; width:100%;}
section#slide1 .part:first-child { width:524px; left:-297px; top:715px; } /* vi */
section#slide1 .part:nth-child(2) { width:780px; left:159px; top:1072px; /*bottom:-344px;*/} /* nyl */
section#slide1 .part:nth-child(3) { width:395px; left:357px; top: 525px; /*bottom:203px;*/ } /*vibe*/
section#slide1 .part:nth-child(4) { width:641px; left:599px; top: 590px; /*bottom:138px;*/ } /*whitaker*/
section#slide1 .part:nth-child(5) { width:424px; left:28px; top: 842px; /*bottom:-114px;*/ } /*red*/

有人知道合适的解决方案吗?谢谢你的帮助!!我已经搞了3个小时了,试了没找到解决办法,网上也没找到。

最佳答案

我记不清了,但我想我只是通过添加horizo​​ntal Scrolling:false 解决了这个问题。

$.stellar({
horizontalScrolling:false
// other options...
});

关于jquery - Stellar JS(视差插件)定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14331357/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com