Question

好的，伙计们，我试图复制这种效果：http://lab.hakim.se/kort/ 基本上，我有一个ul有10个绝对定位的列表项。因为，最后一个列表项始终位于顶部，我知道我正在盘旋它并希望将其余的lis向右或向左移动，具体取决于它们是奇数还是偶数。我试图像这样实现检测：

function reshuffleCards(e) {
  if (e.target.nodeName === 'LI') {
    if (e.target == e.target.parentNode.children[9]) {
      e.target.className = 'active';
    } else {
      var oddItems = document.querySelectorAll('ul li:nth-child(odd)');
      oddItems.style.webkitTransform = 'translateY(-100px)';  
    }
  }
}

我想这不是问题最优雅的解决方案，所以任何评论和建议都会受到欢迎。

这是我笔的链接： http://codepen.io/gbnikolov/pen/rLzwo

Answer 1

我用css进行所有转换，如下所示：

$('#perspective').on('mousemove', function(e) {
   var x = e.pageX,
       w = $(this).outerWidth(),
       lis = $(this).children('li'),
       child = Math.floor(x/w * lis.size()/2);

   lis.removeClass('active');
   $(this).children('li:nth(' + child + ')').addClass('active');
})

http://codepen.io/anon/pen/nCqFa

甚至更多 - 使用悬停式刷卡：http://codepen.io/anon/pen/pnlrd

使用Javascript在鼠标悬停时随机浏览列表项

1 个答案: