1

我目前正在制作一个 fullPage.js 应用程序。在给定的页面上，我想要一张带有指向图片的盒装箭头的图片。现在我已经设法做到了这一点，问题是我需要在一个页面上使用多个这些框和图片元素，因此我希望能够滚动浏览给定页面上的元素。

这是 JS，我清楚地包含了 scrollOverflow 属性。

$(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['Home', 'AboutMe', 'Education','Skills','Achievements','Portfolio','ContactMe'],
                slidesColor: ['purple', '#CA1E1E', '#F07A1A','#E7BC25', '#147727', '#1A77B4','#96A399'],
                'scrollOverflow': true, css3: true              
            });
        });

这是我的 HTML：

<div class="section" id="section2">
    <div class="intro">
                <h1  style="position:absolute;top:8%;left:45%;font-size:2em;" class="font2">consectetur</h1>

                <div style="position:absolute;top:20%;left:12.5%;width:65%">

                    <img  style="border-radius:50%;width:10%;border:5px solid #ffba00;position:absolute;left:0%;" src="images/plain.jpg">


                    <div class="arrow_box" style="left:15%;margin-top:-1%;padding:1.5%;border-radius:5px;color:white;font-family: 'Open Sans Light' !important;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco derit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>

                <div style="position:absolute;top:44%;left:12.5%;width:65%">
                    <img  style="border-radius:50%;border:5px solid #ffba00;width:10%;position:absolute;left:0%;font-family: 'Open Sans Light' !important;" src="images/plain.jpg">

                    <div class="arrow_box" style="left:15%;margin-top:-1%;padding:1.5%;border-radius:5px;color:white;font-family: 'Open Sans Light' !important;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco derit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>

                <div style="position:absolute;top:68%;left:12.5%;width:65%">
                    <img  style="border-radius:50%;width:10%;border:5px solid #ffba00;position:absolute;left:0%;font-family: 'Open Sans Light' !important;" src="images/plain.jpg">

                    <div class="arrow_box" style="left:15%;margin-top:-1%;padding:1.5%;border-radius:5px;color:white;font-family: 'Open Sans Light' !important;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco derit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>

                <div style="position:absolute;top:92%;left:12.5%;width:65%">
                    <img  style="border-radius:50%;width:10%;border:5px solid #ffba00;position:absolute;left:0%;font-family: 'Open Sans Light' !important;" src="images/plain.jpg">

                    <div class="arrow_box" style="left:15%;margin-top:-1%;padding:1.5%;border-radius:5px;color:white;font-family: 'Open Sans Light' !important;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco derit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>

    </div>
</div>

不幸的是，我不断收到以下信息：

在此处输入图像描述

滚动没有开始，我不确定为什么？为什么是想法？理想情况下，第 4 个框和图像元素应该以可滚动的方式出现

4

1 回答 1

0

这听起来像是position:absolute在每个元素中使用造成的。尽量避免它，反正你不应该需要它。

您的代码包含 HTML 错误，这也很容易成为原因。你可以在这里看到它们的红色：http: //jsfiddle.net/gGL9V/

于 2014-04-24T23:48:13.673 回答