jquery - 水平布局中的命名 anchor

Question

在我正在开发的网站中，我有一堆不同大小的图像以水平布局排列。我也有一些命名的 anchor 链接，它们在单击时也会跳转到特定图像。如果单击链接，我需要所选图像位于页面中央，而不是末尾。有什么办法可以给 anchor 添加一些负偏移量吗？

提前致谢

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;
}

这是一个 fiddle :

https://jsfiddle.net/z4524opd/2/

Answer 1

您可以使用 animate :

$('a[href^="#item-"]').on('click', function(e) {
  e.preventDefault();

  // select the carousel-frame
  var divCarousel = $('.carousel-frame');

  // select the corresponding carousel-item
  var objToMove = divCarousel.find(this.getAttribute('href'));

  // compute the new left position
  var newPos = (objToMove.position().left - divCarousel.width())  +  (divCarousel.width() + objToMove.width()) / 2;

  // move to the new position
  divCarousel.animate({left: -newPos}, 2000);
})

.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;
}

a {
  text-decoration: none; font: menu;
  display: inline-block; padding: 2px 8px;
  background: ButtonFace; color: ButtonText;
  border-style: solid; border-width: 2px;
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#item-1"> item 1</a>
<a href="#item-2"> item 2</a>
<a href="#item-3"> item 3</a>
<a href="#item-4"> item 4</a>
<a href="#item-5"> item 5 </a>
<a href="#item-6"> item 6</a>
<a href="#item-7"> item 7</a>
<a href="#item-8"> item 8</a>
<a href="#item-9"> item 9</a>
<a href="#item-10"> item 10</a>
<a href="#item-11"> item 11</a>
<a href="#item-12"> item 12</a>
<a href="#item-13"> item 13</a>
<a href="#item-14"> item 14</a>
<a href="#item-15"> item 15</a>
<a href="#item-16"> item 16</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>