シンプルな画像ドラッグ効果を実現する js
|
この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。
// 画像は自分でインポートする必要があります<!doctype html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>現在の表示領域でクリックできない小さな四角を実現する</title>
<スタイル>
div{位置:固定;幅:100px;高さ:100px;
背景画像:url(images/xiaoxin.gif);
背景サイズ:100%;
}
</スタイル>
</head>
<本文>
<div id="pop"></div>
<スクリプト>
pop = document.getElementById("pop") とします。
// 画像がマウスの動きに追従するかどうかを制御するスイッチ変数を定義します。let canMove = false;
//ドラッグを開始するときに、div の左上隅からのマウスの相対位置を保存します。let offsetX,offsetY;
//マウスがポップ上で押されたとき、pop.onmousedown=function(e){
//ドラッグを開始できます canMove=true;
オフセットX = e.offsetX;
オフセットY=e.offsetY;
}
//マウスがウィンドウ内で移動したとき window.onmousemove=function(e){
//ポップが移動できる場合のみ if(canMove==true){
//ポップをマウスの動きに追従させる //ドラッグを開始すると、すぐにマウスの相対位置を画像の左上隅に取得する //ポップの上部と左側を見つける
left=e.clientX-offsetX とします。
top=e.clientY-offsetY とします。
//ポップの上部と左の属性を設定します。pop.style.left=left+"px";
pop.style.top=top+"px";
}
}
//マウスボタンがポップ時に離されると、pop.onmouseup=function(){
//ドラッグを停止 canMove=false
}
</スクリプト>
</本文>
</html>効果画像:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: nginxリバースプロキシwebSocket設定の詳細な説明
推薦する
MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
npm 淘宝ミラー変更説明
1. トップレベルの使用法1. cnpmをインストールする npm i -g cnpm --regi...
今日、今週、今月、先月のMySQLクエリデータ
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
Springboot および Vue プロジェクトの Docker デプロイメントの実装手順
目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...
MacにHomebrewをインストールする際の注意点
最近、Xiao Ming は新しい Mac を購入し、独自のブログ Web サイトを構築したいと考え...
Docker を使用して pypi プライベート リポジトリを構築する方法
1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...
入力ボックスのオートコンプリート機能をオフにする
これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...
最もよく使われるHTMLエスケープシーケンス
HTML では、<、>、& などは特別な意味を持ち (<、> はリン...
Linux で MySQL をインストールして設定する
システム: Ubuntu 16.04LTS 1\公式サイトからmysql-5.7.18-linux-...
JavaScriptを使用して独自のAjax関数を定義する
ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...
Html、sHtml、XHtml の違いのまとめ
たとえば、<u>には終了文字がなく、ブラウザはそれを認識します。 SHTML は Ser...
ウェブデザインにおけるテキスト入力ボックスのパラメータの説明
<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われていま...
コード例を通してページ置換アルゴリズムの原理を理解する
ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...
Nginxを再コンパイルしてモジュールを追加する方法
Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...
VMware は Centos7 システムの PXE+kickstart 無人インストールの詳細なプロセスを実装します
目次PXEはサーバーの無人バッチ展開を実装します1. PXEの概要1.1 PXEとは何か1.2 キッ...