0

我知道这个问题令人困惑，但让我解释一下我想要实现的目标。

假设我有以下 css 和 html。

<style>  
   body{ height: 10000px;}  
   #revolve{ border: 1px solid red; width: auto; height: auto;}  
</style>

<body>  
  <div id="revolve">  
    <ul>  
      <li> one </li>  
      <li> two </li>  
      <li> three </li>  
    </ul>
  </div>
</body>

因为正文设置为一万像素，所以在正常使用滚轮时，整个页面将正常向下滚动。

我希望能够更改 <ul> 元素的位置，以便当鼠标光标位于“revolve”div 元素上时，使用滚轮交换元素的位置，而不是滚动 10000px 页面。我还需要我的所有 <li> 元素始终可见，并且 div 能够在需要时容纳任何其他 <li> 元素。

（最终我想要的结果将是 < li> 元素的以下顺序） 

<li>  two </li>  
<li>  three </li>  
<li>  one  </li>

现在将 div 元素设置为某个高度和“溢出：滚动；” 不会给我想要的结果。我想到了一个漫长而复杂的方法来做到这一点，但也许有经验丰富的人可以向我展示一种很好而优雅的方式来实现它。

4

2 回答 2

1

您可以尝试position: fixed; top: 20px; left: 20px;在#revolve 中，以始终保持在页面上让我向您展示如下示例，

<style>  
   body{ height: 10000px;}  
   #revolve{ position: fixed; top: 20px; left: 20px; border: 1px solid red; width: auto; height: auto;}  
</style>

<body>  
  <div id="revolve">  
    <ul>  
      <li> one </li>  
      <li> two </li>  
      <li> three </li>  
    </ul>
  </div>
</body>

你可以使用jQuery函数来改变位置<li>如下

您可以使用 jQuery 的 .after() 来移动元素。我克隆了其中一个，因此原件可以保留为占位符。这就像如果你想切换变量 a 和 b，你需要第三个临时变量。

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    this.after(other.clone());
    other.after(this).remove();
};

你的代码是：$("#revolve ul li:eq(1)").exchangePositionWith("#revolve ul li:eq(3)");

我希望这会有所帮助。

于 2012-08-04T01:22:23.457 回答
1

实现这一目标的唯一方法是使用 javascript。更改 DOM 元素的顺序需要编写脚本，如果您希望它在滚轮上做出反应，则需要编写脚本。请注意，这将是一种意想不到的行为，可能会使您的用户感到困惑，并可能使他们感到困惑。在实际实施之前，我会三思而后行。

始终保持 div 可见并不复杂。只需查看使用 css 的固定定位（位置：固定；顶部：#px；左侧：#px；）。

于 2012-08-04T01:29:43.927 回答