jsでアドレス帳のインデックススライド表示効果とスライド表示アンカーポイント効果を実装します

以下のエディターは、アドレス帳のインデックススライド表示効果とスライド表示アンカーポイント効果を実装するためのjs記事を提供します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

実装のみ。 。パフォーマンスの最適化は考慮されていません。ということで、後からスペシャルカードを実装しました。

1つ目は、アドレス帳の右側にあるインデックスバーをスライドすると、該当する文字のアンカーポイントにジャンプします。

アイデア: touchmove イベントをリッスンし、clientX と clientY を取得して、elementFromPoint に渡し、要素を取得した後に click() を実行します。

ここで問題が発生します。つまり、ページ内にマスクレイヤーなどのトップレベルの要素がある場合、その要素の display:none が役に立たない場合でも、その pointer-events:none を設定してください。真実を教えます。あなたはそれを試すことができます。

indexはインデックスpのIDです

$("#index").get(0).addEventListener('touchmove',function(event){
   var a = document.elementFromPoint(event.touches[0].clientX,event.touches[0].clientY).parentNode;
   a.click();
  });

次に、ページが特定の文字の位置にスライドしたときに文字を表示して点滅させたいです。

アイデア: スクロール イベントをリッスンし、elementFromPoint を使用して必要な位置にある対応する要素を取得し、表示効果を実行します。

追記: 私は weui を使っています

$(window).scroll(function(){
  var a = document.elementFromPoint(0,0);
  if($(a).hasClass("weui_cells_title"))
  {
   $(".weui_toast_content_my").html($(a).attr("name"));
   $("#toast").show(0);
   $("#toast").slideUp(300);
  }
 });

さて、終わりました。

上記のアドレス帳のインデックススライド表示効果とスライド表示アンカー効果のjs実装は、編集者が共有した内容ですので、ご参考になれば幸いです。また、PHP中国語ウェブサイトをサポートしていただければ幸いです。

アドレス帳のインデックススライド表示効果とスライド表示アンカーポイント効果のjs実装の詳細については、PHP中国語Webサイトに注目してください。

関連記事：

phpでオンラインアドレス帳機能を実装（ソースコード付き）、アドレス帳ソースコード

指定した複数人の情報を取得するHTML5アドレス帳のサンプルコードを詳しく解説

作成XMLデータアイランドとDomを組み合わせたアドレス帳のコード例を詳しく解説