我在一页上有一张L形画的大图。我在想要解释的部分绘画上创建了div。当页面加载时，我希望它向下滚动图像的长度，然后移动到图像的左侧，在每个div停止几秒钟。我理解如何让页面在加载时向下滚动，但我不明白如何在到达第一个div时继续滚动。我应该定位数据框而不是类，所以它将继续遍历每个div框？
$(document).ready(function(){
$('html, body').animate({
scrollTop: $(".bird1").offset().top
}, 5000);
});/*font*/
@import url(http://fonts.googleapis.com/css?family=Yellowtail|Calligraffitti|Courgette);
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,300italic);
body {
/*background-color: #fbf2e0;*/
background-color: #fcf5e9;
/*background-color: #fdfbf5;*/
/*background-color: #fefcf8;*/
font-family: Ubuntu, sans-serif;
}
/************************************
HOME PAGE
************************************/
.jumbotronOne {
background:
linear-gradient(
rgba(50,50,50, 0.8),
rgba(50,50,50, 0.8)
),
url(https://scontent-ord1-1.xx.fbcdn.net/hphotos-xft1/v/t1.0-9/11150883_878883265488069_6626923622401519037_n.jpg?oh=d5636fb2a9b2e8365a8c951037d70895&oe=55FDD666);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-top:3.6em;
/*-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
}
.words {
color: #fdf8ef;
padding-top: 9%;
background:linear-gradient;
}
.red {
color:lightcoral;
}
#title {
font-family: Courgette;
text-align: center;
}
#text {
text-align: center;
width: 95%;
padding-top: 5%;
line-height: 150%;
font-size: 25px;
}
/************************************
NAV TRANSPARENT
************************************/
#nav {
padding: 0;
margin: 0;
}
/*** ACTIVE COLOR ***/
.navbar ,.active,.sr-only{
background-color: transparent;
background: transparent;
border-bottom-color: lightcoral;
border-bottom-width: 5px;
border-top: none;
overflow: hidden;
}
.navbar li a {
color: #fff;
}
/*nav color*/
.navbar-header,.collapse, .navbar-collapse , .navbar-toggle, .navbar-right, .dropdown, .dropdown-menu, .navbar-brand,.navbar-brand, .dropdown-toggle, .button {
background-color: rgba(251,251,253, .5);
}
/*IMG SIZING*/
#header img {
width:100%;
height: 100%;
right:100%;
}
.slideIn {
top:-100px;
}
.navbar-fixed-top {
transition:all 1s ease-in-out
}
/*nav font color*/
.navbar-default .navbar-nav>li>a {
/*color: black; */
}
/*hover class text color */
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: inherit;
}
li #activeColor.active {
background-color:red;
}
/************************************
ARTIST PAGE
************************************/
/*profile*/
#noPadding{
padding: 0;
margin: 0;
}
.noPadding {
padding: 0;
margin:0;
}
.profile img {
object-fit:cover;
display: block;
height: 300px;
width: 400px;
margin-top: 15%;
top: 5%;
}
.artistHeader {
/*color: black;*/
margin-top: 7%;
}
.longName {
font-size: 20px;
}
/************************************
MEANING
************************************/
.redBox {
position: absolute;
height: 100%;
/*left:-75px;*/
top:5px;
}
.redBox div {
border-style: solid;
border-color: red;
position: relative;
}
/*.totem .ganesh .bird1 .bird2 .katy .fredia .saar .parks .james .anna .ai .friends1 .friends2 .friends3 .kids .parents .quote{
display: none;
}*/
.meaningImg img {
margin-top: 1.1%;
max-height:1000px;
max-width:1000em;
margin-bottom: 0;
}
.totem {
height: 160px;
width: 60px;
top: 412px;
left: 220px;
display: inline-block;
}
.ganesh {
top: 420px;
left: 210px;
height:140px;
width:80px;
}
.bird1{
top: 287px;
left: 310px;
height:40px;
width:250px;
}
.katy{
top: 160px;
left: 635px;
height:200px;
width:244px;
}
.fredia{
top: 125px;
left: 960px;
height:194px;
width:158px;
}
.saar{
top: -215px;
left: 1150px;
height:194px;
width:158px;
}
.parks{
top: -255px;
left: 1350px;
height:168px;
width:122px;
}
.james{
top: -505px;
left: 1690px;
height:358px;
width:122px;
}
.anna{
top: -780px;
left: 2005px;
height:290px;
width:146px;
}
.andy{
top: -1030px;
left: 2305px;
height:255px;
width:140px;
}
.ai{
top: -1315px;
right: -2500px;
height:249px;
width:514px;
/*508 & 243 */
}
.friends1{
top:-1450px;
right:-3175px;
height:109px;
width:264px;
}
.friends2{
top:-1550px;
right:-3855px;
height:103px;
width:200px;
}
.friends3{
top:-1800px;
right:-3685px;
height:97px;
width:164px;
}
.kids{
top:-1870px;
right:-3185px;
height:109px;
width:295px;
}
.parents{
top:-1890px;
right:-3475px;
height:203px;
width:358px;
}
.quote{
top:-2250px;
right:-4200px;
height:230px;
width:250px;
}
.bird2{
top:-2550px;
right:-3950px;
height:250px;
width:240px;
}
.totem, .ganesh, .bird1, .bird2, .katy, .fredia, .saar, .parks, .james, .anna, .andy, .ai, .friends1, .friends2, .friends3, .kids, .parents, .quote {
opacity:0;
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
-ms-transition:.5s;
transition:.5s;
}
.totem:hover, .ganesh:hover, .bird1:hover, .bird2:hover, .katy:hover, .fredia:hover, .saar:hover, .parks:hover, .james:hover, .andy:hover, .anna:hover, .ai:hover, .friends1:hover, .friends2:hover, .friends3:hover, .kids:hover, .parents:hover, .quote:hover {
opacity:1;
}
.background {
background:
linear-gradient(
rgba(219,253,244, 0.7),
rgba(219,253,244, 0.7)
),
url(http://wallpoper.com/images/00/43/13/34/forest-sunrise-wallpaper-landscape-nature_00431334.jpg);
/*background-size: length;*/
width: 4892px;
/* SINGLE TREE url(http://wallpoper.com/images/00/42/56/25/forest-summer_00425625.jpg);*/
/* TRESS LIGHT GREEN url(http://wallpaperlepi.com/wp-content/uploads/2014/09/Awesome-Nature-Ray-of-Light-Wallpaper.jpg);*/
/* TREES LIGHT GREEN url(http://orig12.deviantart.net/ddf1/f/2012/303/0/0/forest_stock_by_dl_stockandresources-d5jffdv.jpg);*/
/* RED TINT url(http://wallpoper.com/images/00/43/13/34/forest-sunrise-wallpaper-landscape-nature_00431334.jpg);*/
/*
LIGHT GREEN COLOR */
/* rgba(216,74,74, 0.1),
rgba(216,74,74, 0.1)
RED COLOR */
height:50%;
margin-top: 0;
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
/*background-attachment: fixed;*/
}
/************************************
FOOTER
************************************/
#footer {
color: #ED5565;
background-color: #fbf2e0;
/*background-color: #fcf5e9;*/
text-align: center;
/*margin-top: 20em;*/
/*max-height: 1%;*/
/*height:10%;*/
/*padding-bottom: 15;*/
margin-bottom: 0;
}
/*****************************
PIC GALLERY
*****************************/
.fullDrawing {
margin: 0;
padding-left: 0px;
padding-right: 0px;
padding-top: 50px;
max-height:200.750em;/*18.750em;/*height: 300px;*/
max-width:1000em; /*91.500em;*/ /*120px*/
min-height: 13em;
width: 100%;
}
.bottomFullDrawing {
margin: 0;
padding-left: 0px;
padding-right: 0px;
padding-top: 50px;
max-height:200.750em;/*18.750em;/*height: 300px;*/
max-width:1000em; /*91.500em;*/ /*120px*/
min-height: 13em;
width: 100%;
padding-bottom: 2.5em ;
}
.galleryContainer {
width: 90%;
overflow-x:scroll;
overflow-y:hidden;
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
}
.profile {
margin-top: 5%;
}
.galleryContainer img {
/*height: 171px;*/
/*width: 180px;*/
/*margin-top: 100%;*/
/*padding-bottom: 0px;*/
/*height: 515px;*/
}
.galleryContainer img {
height: 300px;
width: 400px;
object-fit:cover;
}
.fullDrawing img{
height: 217.273px;
width:1440px;
}
.list-inline {
white-space:nowrap;
}
.galleryContainer > .row [class*="col-lg"], .galleryContainer > .row [class*="col-md"], .galleryContainer > .row [class*="col-md"] {
float:none;
display:inline-block;
white-space:normal;
vertical-align:top;
}
#main-content > .row {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- totem pole -->
<div class="redBox">
<div class=" box totem">
<span class="hoverTotem" data-box="totem" ></span>
</div>
<!-- ganesh -->
<div class="focus box ganesh">
<span data-box="ganesh" ></span>
</div>
<!-- BIRD 1 -->
<div class="box bird1">
<span data-box="bird1" ></span>
</div>
<!-- KATY -->
<div class="box katy">
<span data-box="katy" ></span>
</div>
<!-- FREDIA -->
<div class="box fredia">
<span data-box="fredia" ></span>
</div>
<!-- sarry -->
<div class="box saar">
<span data-box="saar" ></span>
</div>
<!-- parks -->
<div class="box parks">
<span data-box="parks" ></span>
</div>
<!-- james -->
<div class="box james">
<span data-box="james" ></span>
</div>
<!-- ANNA -->
<div class="box anna">
<span data-box="anna" ></span>
</div>
<!-- ANDY -->
<div class="box andy">
<span data-box="andy" ></span>
</div>
<!-- AI -->
<div class="box ai">
<span data-box="ai" ></span>
</div>
<!-- FRIENDS -->
<div class="box friends1">
<span data-box="friends1" ></span>
</div>
<div class="friends2">
<span data-box="friends2" ></span>
</div>
<div class="box friends3">
<span data-box="friends3" ></span>
</div>
<!-- KIDS -->
<div class="box kids">
<span data-box="kids" ></span>
</div>
<!-- PARENTS -->
<div class="box parents">
<span data-box="parents" ></span>
</div>
<!-- QUOTE -->
<div class="box quote">
<span data-box="quote" ></span>
</div>
<!-- BIRD 2 -->
<div class="box bird2">
<span data-box="box bird2" ></span>
</div>
</div>
<div class="container-fluid">
<div id="" class="row meaningImg">
<div class="background">
<a href="../public/img/TALLPART1.png">
<img class="" src="http://arttreeoflife.com/public/img/TALLPART1.png" class="meaningImg">
</a>
</div>
</div>
</div>
答案 0 :(得分：0)
好的，我的代码可以使用了。
我保持HTML不变，但对我的jQuery进行了一些更改。
igraph_neighbors我想我只需要修改一下我的语法，然后我可以从前几行代码滚动到屏幕的两个部分，但是它会对角滚动。为了让它在每个卷轴之间停止，我必须制作一个新的动画。这就是为什么我认为它有效。
如果有人能够更好地向我解释这一点，那么我不确定我是否关注这里发生的事情。