1

まず、リンクは次のとおりです (いずれかのタイルをクリックしてください): http://www.google.com/design/#resources

私はコードを調べました

 <svg width="100%" height="100%" overflow="hidden">
  <defs></defs>
    <g>
      <ellipse cx="27.5" cy="189.46875" rx="20" ry="20" stroke="none" fill="white" class="ripple" fill-opacity="0.5" style="-webkit-transform: scale(1); opacity: 0;">
       </ellipse>
    </g>
 </svg>

クリックすると、クリックした時点で上の楕円が生成されます。

クリックした時点で作成する方法を誰でも手伝ってもらえますか?

4

3 に答える 3

2

event.pageXとを使用event.pageYして、イベント ハンドラーでマウス座標を見つけます。これらの値を使用して、円を配置します。

jsfiddle.net/pu8jX

于 2014-06-30T21:49:18.637 に答える
1

このためのプラグインを作成しました。https://github.com/ninox92/Google-material-design-ripple-effect/を取得するために github で入手できます。

プレビュー: http://thomasreynders.com/google-material-design-plugin/

于 2014-07-16T20:48:35.610 に答える