シンプルな画像ドラッグ効果を実現する 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設定の詳細な説明
推薦する
LinuxでSVNサーバーを構築する方法
1: SVNをインストールする yum インストール -y サブバージョン2. 倉庫を作る1: 倉庫...
MySQL パラメータ関連の概念とクエリ変更方法
序文：以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...
JSでHTML本文のスタイルを変更する
目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...
CSS3の3D効果を使って立方体を作成する
CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...
MySQLデータのエクスポートとインポートに関する知識ポイントの簡単な分析
多くの場合、ローカル データベースのデータをエクスポートしたり、他のデータベースからデータをインポー...
nginx が動的と静的の分離を実装する方法の例
目次server1にnginxをデプロイするサーバーにlnmpを展開するノード3にhttpdをデプロ...
Ubuntu にグラフィック ドライバーが正常にインストールされたかどうかを確認する方法
次のコマンドを実行します: glxinfo | grep レンダリング結果が「はい」の場合、グラフィ...
MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]
この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...
MySQL マルチテーブルクエリ例の詳しい解説 [リンククエリ、サブクエリなど]
この記事では、例を挙げて MySQL のマルチテーブル クエリについて説明します。ご参考までに、詳細...
Vue3 Vue CLI マルチ環境設定
目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...
複数の Tomcat を展開して起動し、プロジェクトを移行する方法を 1 つの記事で学習します。
目次tomcatをデプロイする1.ダウンロードして解凍する2. 設定ファイルを変更する移植プロジェク...
VMware は Centos7 システムの PXE+kickstart 無人インストールの詳細なプロセスを実装します
目次PXEはサーバーの無人バッチ展開を実装します1. PXEの概要1.1 PXEとは何か1.2 キッ...
element.style インライン スタイルを変更する方法のチュートリアル
序文上記の Web ページ スタイルを記述しているときに、スタイルの値をどのように変更しても、ページ...
Mysql系SQLクエリ文の書き順と実行順を詳しく解説
目次1. 完全なSQLクエリステートメントの記述順序2. 完全なSQL文の実行順序3. select...
MySQL はリレーショナルデータベースですか?
MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...