0

我有一个水平的图像列表，只能在 x 方向滚动。在右侧的末尾有一个 css 渐变，以表明有更多的内容。（滚动条将被删除，可能不明显是可滚动的内容）

我已将光标更改为列表项上的指针，以表明如果单击它们将指向不同的页面。渐变后面的右侧被光标更改阻挡，z-index 无法解决问题。

任何帮助深表感谢！

.gradient{
    /*background: -moz-linear-gradient(left center, transparent, white);*/
          /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );

这里的例子

4

2 回答 2

2

pointer-events: none您可以在渐变 div 上设置 css 属性。这应该解决它。

于 2013-01-11T22:12:14.723 回答
0

我认为最简单的解决方案可能是 joeltine 建议向渐变添加点击事件，然后确定图像是否低于渐变上的点击点并触发该事件。

另一种解决方案是：

  • 在每个列表元素中放置一个绝对定位的渐变（在图像上方）
  • 给列表元素溢出：隐藏（因此渐变被剪裁在 li 内）
  • 然后根据滚动位置根据列表元素的位置更新列表元素内的所有渐变位置。

这种方法的缺点是渐变位置将使用 js 而不是 css 更新，这意味着它在滚动时可能会滞后一瞬间，并且拥有大量图像可能会影响性能，因为每个图像都有自己的渐变。

只需从您的 html 中删除渐变 div，然后将 li css 更改为：

li {
  display:inline-block;
  cursor: pointer;
  overflow: hidden;
  position:relative;
}

并添加以下脚本：

function setupGradient($ul) {
  var gradientWidth = 250;

  $ul.find("li").each(function(){
    $("<div/>").addClass("gradient")
               .css("width", gradientWidth)
               .appendTo($(this));
  });

  var setGradient = function(){
    $ul.find("li").each(function() {
      $(this).find("div")
         .css("left", $ul.width() - $(this).position().left - gradientWidth);
    });
  };

  $ul.bind("scroll", setGradient);
  setGradient();
}

setupGradient($("ul"));

这是一个工作演示（仅在 Chrome 中测试）：

http://jsfiddle.net/yFG5W/

于 2013-01-11T23:09:49.770 回答