0
在我正在開發的站點中,我有一堆不同大小的圖像以水平佈局佈置。我也有一些命名的錨鏈接,可以在點擊時跳轉到特定的圖像。如果點擊鏈接,我需要將所選圖像放在頁面的中心,而不是最後。有沒有辦法給錨點添加一些負偏移量?以水平佈局命名的錨點
在此先感謝
HTML:
<a href="#item-9">Link to item 9</a>
<div class="carousel-frame">
<ul>
<li id="item-1" class="carousel-item">
<span>1</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-2" class="carousel-item">
<span>2</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-3" class="carousel-item">
<span>3</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-4" class="carousel-item">
<span>4</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-5" class="carousel-item">
<span>5</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-6" class="carousel-item">
<span>6</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-7" class="carousel-item">
<span>7</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-8" class="carousel-item">
<span>8</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-9" class="carousel-item">
<span>9</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-10" class="carousel-item">
<span>10</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-11" class="carousel-item">
<span>11</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-12" class="carousel-item">
<span>12</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-13" class="carousel-item">
<span>13</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-14" class="carousel-item">
<span>14</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-15" class="carousel-item">
<span>15</span>
<img src="http://placehold.it/200x150" />
</li>
<li id="item-16" class="carousel-item">
<span>16</span>
<img src="http://placehold.it/200x150" />
</li>
</ul>
</div>
CSS:
.carousel-frame {
width: 100%;
margin-bottom: 0.5em;
padding-bottom: 1em;
position: relative;
white-space: nowrap;
}
.carousel-frame ul {
margin: 0;
padding: 0;
height: 100%;
list-style: none;
}
.carousel-frame li.carousel-item {
cursor: pointer;
display: inline-block;
margin: 0 5px 0 0;
padding: 0;
}
.carousel-frame li.carousel-item span {
display: block;
}
這裏有一個小提琴:
https://jsfiddle.net/z4524opd/2/
如果鏈接是一個不同的頁面上,會發生什麼?也就是說,像這樣www.domain.com/page.php#item-n – user1991185
@ user1991185 js和html一起構成一個頁面。如果你打算在不同的頁面上採取行動,我不知道怎麼可能。請更好地解釋你的想法。 – gaetanoM
我在一頁中有一個縮略圖網格,當我點擊其中任何一個頁面時,我想要轉到頁面,所有全尺寸的圖像都與中心點擊的圖像水平佈局。希望我解釋一下自己。 – user1991185