スライドボタン効果を実現するネイティブJS

スライドボタン効果を実現するネイティブJS

Jsで作ったスライドボタンの具体的なコードは参考までに。具体的な内容は以下のとおりです

まずエフェクト画像を貼り付けます

ソースコードをもう一度貼り付けます

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>

    <div スタイル="位置: 相対;幅: 100vw;高さ: 100vh">
        <div id="コンテナ">
            <svg スタイル="幅:継承;高さ:継承">
                <circle id="c" cx="25" cy="25" r="23" style="fill:white;stroke:gray;stroke-width:2;"
                
                onmousedown="ダウン(イベント)"
                onmouseup="up(イベント)"
                onmouseleave="up(イベント)"
               />
            </svg>
        </div>
         </div>
         <!-- <スクリプト>
             setTimeout(関数() {
                c = document.querySelector('circle');
                コンソールログ(c.parentNode.parentNode.style)
                 
               },500)
            
         </script> -->
  
  <スタイル>
      体{
          マージン:0;
          背景色:紺碧;
      }
      #容器{
          位置:絶対;
          左: 50%; 上: 50%; 
          変換: translateX(-50%) translateY(-50%);
          幅: 200ピクセル;
          高さ: 50px;
          背景色: 黒;
          境界線の半径: 50px;
      }
      
  </スタイル>
  <スクリプト>
      円を document.getElementById('c') とします。
          クリック = false、
       
          x=0、y=0;
          
      円.addEventListener("mousemove",関数(e){
      x = e.offsetX;
      
      
      if(クリック){

          円.setAttribute("cx",x)
      }

      
      })
      関数t(e){
        円に属性を設定します("cx",e.offsetX);
      }
      関数ダウン(e){
       クリック = true;
      }
      関数 up(){
      if(クリック){
          フラグを立てます。
     x <= 100の場合
      新しいPromise(function(resolve,reject){
     フラグ = setInterval(関数(){
          x = 2;

          円に属性を設定します。
          x <= 25の場合{

              円.setAttribute("cx",25)
              円.setAttribute("style","塗りつぶし:白; ストローク:グレー; ストローク幅:2;")
              解決("OK")
          }
      })
      }).then(res => {
        clearInterval(フラグ)
      })
      それ以外 
      新しいPromise(function(resolve,reject){
     フラグ = setInterval(関数(){
          x + = 2;
          円に属性を設定します("cx",x);
          x >= 175の場合{
              円に属性を設定します("cx",175);
              円.setAttribute("style","塗りつぶし:黒; ストローク:グレー; ストローク幅:2;")
              解決("OK")
          }
      })
      }).then(res => {
        clearInterval(フラグ)
      })
      }
      クリック = false;
      
      }
     
  </スクリプト>
    
</本文>
</html>

知識ポイント、制作アイデア、手順

1. 基本レイアウト(親と子、左:50%、上:50%、変換:translateX(-50%)
Y座標を-50%で変換します。

2. svg の円 (cx) が動きを制御し、円の cx は setAtrrivute によって制御されます

3. **Promise.then()** は完了後に clearInterval を保証するために使用されます

4.circle は、mousemove、mouseup、mousedownイベントをリッスンします。 mousedown イベントがトリガーされると、clicked が true に設定され、move イベントがリセットされます。

5. mouseupmouseleave はclicked を false に設定し、移動イベントのリセット (停止) をトリガーできなくなります。

6. 停止状態の場合、原点が左側にあるか右側にあるかを判断します。アニメーション: 左半分にある場合は、setInterval を使用して、フレームごとに 10 ミリ秒ごとに 1.5 ピクセルずつ移動し、開始点または終了点に到達したら停止します。

7. 次にスタイルを切り替えます。

すべてのコードは私が作成したオリジナルですので、ご自由にコピーしてください。コードは整理されておらず、無効な変数が含まれている可能性があります。これらは私のアイデアを表しているだけです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • カプセル化されたリストを右にスライドしてお気に入りボタンを削除する JS を実装する方法
  • JSをベースに、モバイル端末で左にスライドすると削除ボタン機能が表示される
  • js は、QQ で連絡先を左にスライドして削除ボタンをスライドアウトする操作を模倣します。
  • jsはボタンの表示スタイルを変更することでボタンのスライド効果を実現します

<<:  フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法の詳しい説明

>>:  サイトマップをウェブページの下部に配置するメリットと例

推薦する

CSS で要素を中央揃えにする N 通りの方法

目次序文インライン要素の中央揃えテキストを垂直に中央揃え要素を水平方向に中央揃えにするブロックレベル...

Linux で仮想コンソール セッションをロックする方法

共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...

MySQLデュアルマシンホットスタンバイと負荷分散の実装手順の詳細説明

MySQL データベースには増分バックアップ メカニズムはありませんが、マスター データベース内のす...

Element-ui レイアウト (行と列コンポーネント) の実装

目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...

CSS のオーバーフロー:hidden エラーの解決方法

失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...

グリッド共通レイアウトの実装

両側に隙間なし、各列間に隙間あり 幅: 100%; 表示: グリッド; グリッドテンプレート列: r...

Vueカスタムディレクティブの詳細

目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...

Linux サーバーに埋め込まれた ddgs および qW3xT.2 マイニング ウイルスの対処の実践記録

序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...

MySQL テーブルにはどのくらいの量のデータを保存できますか?

プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...

MySQL の NOT IN 充填ピットの NULL 列の問題の解決方法

以前、会社で小さな機能に取り組んでいたとき、特定の状況でデータがいくつあるかを数えてから問題を修正し...

Mysql接続数の設定と取得方法

接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...

LinkedIn がウェブサイト閲覧を簡素化するためにリニューアル

ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...

Office ファイルのオンライン プレビュー用の Vue サンプル コード

最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS ...

JavaScriptはフォームデータの非同期送信を実装します

この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考ま...

固定、流動的、柔軟なウェブページレイアウトの長所と短所の分析

ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レ...