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

最も簡単な解決策は、グラデーションにクリックイベントを追加し、画像がグラデーションのクリックされたポイントより下にあるかどうかを判断し、そのイベントを発生させるというジョエルティンの提案だと思います。

別の解決策は次のとおりです。

  • 各リスト要素（画像の上）に絶対配置グラデーションを配置します
  • リスト要素のoverflow: hiddenを与える（グラデーションがliの内側でクリップされる）
  • 次に、スクロール位置に基づいて、リスト要素の位置に基づいてリスト要素内のすべてのグラデーション位置を更新します。

このアプローチの欠点は、グラデーションの位置が css ではなく js で更新されることです。つまり、スクロール時に一瞬遅れる可能性があり、各画像には独自のグラデーションがあるため、多くの画像があるとパフォーマンスが低下する可能性があります。

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 に答える