この記事では、パズル効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 要件:ページが更新されるたびに、フラグメント画像が右側のコンテナにランダムに配置されます。マウスを押して左にドラッグします。正しい座標の一定範囲内で、画像が自動的に吸着されます。配置されたフラグメントはドラッグできなくなります。 まずは効果を見てみましょう: jsコード: //初期関数init()を実行します。 関数init() { //フラグメント コンテナーを作成します。var frag = document.createDocumentFragment(); document.body.style.margin = "0px"; // 左の画像コンテナを作成する var ul=createE("ul",{ 幅: "260px", 高さ: "400px", 背景画像: "url(./img/3.jpg)", borderRight: "1px 実線 #000", borderBottom: "1px 実線 #000", リストスタイル: "なし", パディング: "0px", マージン: "0px", 不透明度: ".3", 位置: 「絶対」 }) //画像に境界線を表示するための li を作成します var li=createE("li",{ 幅: "51px", 高さ: "79px", borderLeft: "1px 実線 #000", borderTop: "1px 実線 #000", パディング: "0px", マージン: "0px", フロート: "左" }) //ループし、li をコピーして ul に挿入します for (i = 0; i < 25; i++) { ul.appendChild(li.cloneNode(false)); } //フラグメント コンテナーに ul を挿入します。frag.appendChild(ul); // 右側に画像コンテナを作成します。img は body に対して相対的に配置する必要があるため、その親コンテナには配置属性を設定できません var div = createE("div",{ 幅: "302px", 高さ: "302px", 境界線: "1px 実線 #000", 左余白: "400px" }) //画像タグを作成する for (var j = 0; j < 5; j++) { (var k = 0; k < 5; k++) の場合 { var img = createE("img",{ 幅: "52px", 高さ: "80px", 位置: "絶対"、 左: Math.floor(Math.random() * 250) + 400 + "px", 上: Math.floor(Math.random() * 220) + "px" }) img.src = "./img/img" + j + "-" + k + ".jpg"; //画像は mouseHandler イベントをリッスンします。img.addEventListener("mousedown", mouseHandler); div.appendChild(画像); } } // div をフラグメント コンテナーに挿入し、次に frag を body に挿入します。frag.appendChild(div); document.body.appendChild(フラグ); } //マウスイベント関数mouseHandler(e) { スイッチ (e.type) { ケース「マウスダウン」: // クリック後に画像を移動するデフォルトの効果をクリアします。e.preventDefault(); console.log(this.src.match(/img\/img(.*)\.jpg/)) //画像パス内の番号を取得し、画像の正しい位置座標を計算します。var imgSrc = this.src.match(/img\/img(.*)\.jpg/)[1].split("-"); var rightL=imgSrc[1]*52; var rightTop=imgSrc[0]*80; //画像が正しく配置されている場合は、直接ジャンプします if (this.style.left===rightL+"px" && this.style.top===rightTop+"px") return; //現在の画像の Z インデックスを最大値に設定します。this.style.zIndex = "999"; //e.offsetX、e.offsetY、および現在クリックされている画像オブジェクトをドキュメントに保存します。document.x = e.offsetX; ドキュメント.y = e.offsetY; ドキュメント.elem = これ; ドキュメントの右L = 右L; document.rightTop=右上; //ドキュメントは mousemove イベントと mouseup イベントをリッスンします。document.addEventListener("mousemove", mouseHandler); document.addEventListener("mouseup"、mouseHandler); 壊す; ケース「マウス移動」: //自動吸着距離 var gap = 20; //現在の画像をマウスに合わせて移動するように設定します。let x=e.clientX - this.x; y = e.clientY - this.y とします。 this.elem.style.left = x + "px"; this.elem.style.top = y + "px"; //現在の画像の位置座標が特定の範囲内にある場合、自動的に吸着させる if (x>=this.rightL-gap &&x<=this.rightL+gap&& y>=this.rightTop-gap &&y<=this.rightTop+gap) { this.elem.style.left = this.rightL + "px"; this.elem.style.top = this.rightTop + "px"; } 壊す; ケース「マウスアップ」: //マウスが放されたら、現在の画像の Z インデックスを減らします。this.elem.style.zIndex = "10"; //マウスを放した後、ドキュメントの mousemove イベントと mouseup イベントを削除し、データをクリアして、コンテンツの漏洩を防ぎます。this.removeEventListener("mousemove", mouseHandler); this.removeEventListener("mouseup", mouseHandler); this.elem=null; 壊す; } } //タグを作成する function createE(elem,styleData){ var elem = document.createElement(elem); for(var prep in styleData){ elem.style[準備]=styleData[準備]; } 要素を返します。 } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux /etc/network/interfaces 設定インターフェース方法
>>: MySQLデータベーステーブルの容量を確認する方法の例
目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...
目次序文コンセプト安定意味使用シナリオコードVueでの使用スロットリング意味使用シナリオコードVue...
LIKE 演算子は、列内の指定されたパターンを検索するため、WHERE 句で使用されます。文法: 列...
最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...
パラメータを渡すために href が必要で、パラメータが中国語の場合、文字化けした文字が表示されます...
この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
導入RANGE パーティション分割は、指定された連続した間隔範囲に基づいています。RANGE の初期...
目次1. 解凍コマンド1.1 構文1.2 オプション2. 例1. 解凍コマンドunzip コマンドは...
docker-compose-monitor.yml バージョン: '2' ネットワ...
目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...
ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...
最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...
目次基本的な指示1. 現在のマシンのコンテナステータスを確認する2. イメージをダウンロードまたは取...
0x0 はじめにまず、ハッシュアルゴリズムとは何でしょうか?メッセージやセッション項目など、一部のデ...
目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...