Question

我有一个包含产品列表组的网页。

我要做的是......当观众点击产品V形图时，产品列表向左滑动，产品细节从右侧滑入。然后当用户点击细节雪佛龙时，细节向右滑动，产品列表从左侧滑入。

例如，如果我有一个显示此页面的网页......

Product1 >
Product2 >
Product3 >

当用户点击Product2＆gt;时，详细信息将从右侧滑入，列表将向左滑动。网页看起来像这样。

< Product2
  p2 detail1
  p2 detail2
  p2 detail3

当用户点击＆lt; Product2，细节将向右滑动，产品列表从左侧滑入。

这可能很简单，使用.animate等，肯定是在移动网站上完成的，但我找不到一个好的例子。我已经看到样本水平滑动div，但没有任何内容在页面上滑动。

感谢任何和所有帮助。谢谢。

Answer 1

Here is some boilerplate to get you started. The basic idea is to set left and right to negative values to simulate the element appearing / disappearing off screen.

$('.product').click(function() {
  toggleAnimation.call(this, 'right')
})

$('.product-display').click(function() {
  toggleAnimation.call(this, 'left')
})

function toggleAnimation(dir) {
  $('#products').animate({
    left: dir === 'left' ? '0px' : '-100px'
  }, 1000)

  $('#' + this.id + (dir === 'left' ? '' : '-display')).animate({
    right: dir === 'left' ? '-100px' : '0px'
  }, 1000)
}

.product-display {
  position: absolute;
  right: -100px;
  top: 0;
}

#products {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="products">
  <div id="product-1" class="product">Product 1&gt;</div>
  <div id="product-2" class="product">Product 2&gt;</div>
  <div id="product-3" class="product">Product 3&gt;</div>
</div>

<div id="product-1-display" class="product-display">&lt;Product 1</div>  
<div id="product-2-display" class="product-display">&lt;Product 2</div>
<div id="product-3-display" class="product-display">&lt;Product 3</div>

JQuery - 从右侧onClick事件水平滑动div

1 个答案: