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%) 2. svg の円 (cx) が動きを制御し、円の cx は setAtrrivute によって制御されます。 3. **Promise.then()** は完了後に clearInterval を保証するために使用されます 4.circle は、mousemove、mouseup、mousedownイベントをリッスンします。 mousedown イベントがトリガーされると、clicked が true に設定され、move イベントがリセットされます。 5. mouseupとmouseleave はclicked を false に設定し、移動イベントのリセット (停止) をトリガーできなくなります。 6. 停止状態の場合、原点が左側にあるか右側にあるかを判断します。アニメーション: 左半分にある場合は、setInterval を使用して、フレームごとに 10 ミリ秒ごとに 1.5 ピクセルずつ移動し、開始点または終了点に到達したら停止します。 7. 次にスタイルを切り替えます。 すべてのコードは私が作成したオリジナルですので、ご自由にコピーしてください。コードは整理されておらず、無効な変数が含まれている可能性があります。これらは私のアイデアを表しているだけです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法の詳しい説明
>>: サイトマップをウェブページの下部に配置するメリットと例
目次序文インライン要素の中央揃えテキストを垂直に中央揃え要素を水平方向に中央揃えにするブロックレベル...
共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...
MySQL データベースには増分バックアップ メカニズムはありませんが、マスター データベース内のす...
目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...
失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...
両側に隙間なし、各列間に隙間あり 幅: 100%; 表示: グリッド; グリッドテンプレート列: r...
目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...
序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...
プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...
以前、会社で小さな機能に取り組んでいたとき、特定の状況でデータがいくつあるかを数えてから問題を修正し...
接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...
ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...
最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS ...
この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考ま...
ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レ...