Heim Web-Frontend js-Tutorial Begrenzte Reichweite, magnetische Adsorption.

Begrenzte Reichweite, magnetische Adsorption.

Jun 23, 2017 am 11:04 AM
范围 限制

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
#wrap {
margin: 50px auto;
position: relative;
border: 1px solid #000;
width: 600px;
height: 500px;
} 
#div {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
</style>
</head>
<body>
<div id="wrap">
<div id="div">文字</div>
</div>
<script type="text/javascript">
(function(){
var div = document.querySelector(&#39;#div&#39;);
var maxX = div.offsetParent.clientWidth - div.offsetWidth;
var maxY = div.offsetParent.clientHeight - div.offsetHeight;
div.addEventListener(&#39;mousedown&#39;, function(e) {
e.preventDefault();
var start = {x: e.clientX,y: e.clientY};
var elOffset = {x: div.offsetLeft,y: div.offsetTop};
document.addEventListener(&#39;mousemove&#39;, move);
document.addEventListener(&#39;mouseup&#39;, end);
function move(e){
var dis  = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
/* 左侧磁性吸附 */
x = x<0?0:(x>maxX?maxX:x);

y = y<0?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
}
function end(e){
document.removeEventListener(&#39;mousemove&#39;, move);
document.removeEventListener(&#39;mouseup&#39;, end);
var dis  = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
/* 左侧磁性吸附 */
x = x<100?0:(x>maxX?maxX:x);
/* 上边磁性吸附 */
y = y<100?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
}
});
})(); 
</script>
</body>
</html>
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonBegrenzte Reichweite, magnetische Adsorption.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie entferne ich Kommentarbeschränkungen für ein Videokonto? Wie hoch ist die Wortbeschränkung für Kommentare zu einem Videokonto? Wie entferne ich Kommentarbeschränkungen für ein Videokonto? Wie hoch ist die Wortbeschränkung für Kommentare zu einem Videokonto? Mar 22, 2024 pm 02:11 PM

Mit der Beliebtheit von Videokonten in sozialen Medien beginnen immer mehr Menschen, Videokonten zu nutzen, um ihr tägliches Leben, ihre Erkenntnisse und Geschichten zu teilen. Bei manchen Benutzern kann es jedoch vorkommen, dass die Kommentare eingeschränkt sind, was zu Verwirrung und Unzufriedenheit führen kann. 1. Wie entferne ich Kommentarbeschränkungen für Videokonten? Um die Einschränkung beim Kommentieren eines Videokontos aufzuheben, müssen Sie zunächst sicherstellen, dass das Konto ordnungsgemäß registriert wurde und die Authentifizierung mit echtem Namen abgeschlossen ist. Für Videokonten gelten Anforderungen für Kommentare. Nur Konten, die die Authentifizierung mit echtem Namen abgeschlossen haben, können Kommentarbeschränkungen aufheben. Wenn es Auffälligkeiten im Konto gibt, müssen diese Probleme behoben werden, bevor die Kommentarbeschränkungen aufgehoben werden können. 2. Halten Sie die Community-Standards des Videokontos ein. Für Videokonten gelten bestimmte Standards für Kommentarinhalte. Wenn der Kommentar illegale Inhalte enthält, wird Ihnen das Sprechen untersagt. Um die Kommentarbeschränkungen aufzuheben, müssen Sie sich an die Community des Videokontos halten

Verwenden Sie die StringBuilder.replace()-Funktion von Java, um einen angegebenen Zeichenbereich zu ersetzen Verwenden Sie die StringBuilder.replace()-Funktion von Java, um einen angegebenen Zeichenbereich zu ersetzen Jul 24, 2023 pm 06:12 PM

Verwenden Sie die StringBuilder.replace()-Funktion von Java, um einen bestimmten Zeichenbereich zu ersetzen. In Java stellt die StringBuilder-Klasse die Methode replace() bereit, mit der ein bestimmter Zeichenbereich in einer Zeichenfolge ersetzt werden kann. Die Syntax dieser Methode lautet wie folgt: publicStringBuilderreplace(intstart,intend,Stringstr) Die obige Methode wird verwendet, um den Indexstern von zu ersetzen

So richten Sie ein CentOS-System ein, um Benutzeränderungen auf Systemprotokolle zu beschränken So richten Sie ein CentOS-System ein, um Benutzeränderungen auf Systemprotokolle zu beschränken Jul 05, 2023 pm 03:43 PM

So richten Sie das CentOS-System ein, um zu verhindern, dass Benutzer das Systemprotokoll ändern. Im CentOS-System ist das Systemprotokoll eine sehr wichtige Informationsquelle. Es zeichnet den Betriebsstatus, Fehlermeldungen, Warnungen usw. auf. Um die Stabilität und Sicherheit des Systems zu schützen, sollten wir Benutzer daran hindern, Systemprotokolle zu ändern. In diesem Artikel wird erläutert, wie Sie das CentOS-System so einrichten, dass die Änderungsberechtigungen des Systemprotokolls eingeschränkt werden. 1. Erstellen Sie Benutzergruppen und Benutzer. Zuerst müssen wir eine Benutzergruppe erstellen, die speziell für die Verwaltung von Systemprotokollen verantwortlich ist, und eine Benutzergruppe für die Verwaltung von Systemprotokollen.

Finden Sie mit C++ Zahlen, die durch keine Zahl in einem Bereich teilbar sind Finden Sie mit C++ Zahlen, die durch keine Zahl in einem Bereich teilbar sind Sep 13, 2023 pm 09:21 PM

In diesem Artikel werden wir das Problem diskutieren, Zahlen zwischen 1 und n (vorgegeben) zu finden, die nicht durch eine Zahl zwischen 2 und 10 teilbar sind. Lassen Sie uns dies anhand einiger Beispiele verstehen: Eingabe: Nummer = 14 Ausgabe: 3 Erläuterung: Es gibt drei Zahlen, 1, 11 und 13, die nicht teilbar sind. Eingabe: Nummer = 21 Ausgabe: 5 Erläuterung: Es gibt fünf Zahlen 1, 11, 13, 17 und 19, die nicht teilbar sind

Wie verwende ich JavaScript, um Bilder zu ziehen und zu zoomen und sie gleichzeitig auf den Container zu beschränken? Wie verwende ich JavaScript, um Bilder zu ziehen und zu zoomen und sie gleichzeitig auf den Container zu beschränken? Oct 20, 2023 pm 04:19 PM

Wie implementiert JavaScript das Ziehen und Zoomen von Bildern und beschränkt sie gleichzeitig auf den Container? Bei der Webentwicklung müssen wir häufig Bilder ziehen und zoomen. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript das Ziehen und Zoomen von Bildern implementieren und Vorgänge innerhalb des Containers einschränken. 1. Ziehen Sie das Bild. Um das Bild zu ziehen, können wir Mausereignisse verwenden, um die Mausposition zu verfolgen und das Bild entsprechend zu verschieben. Das Folgende ist ein Beispielcode: // Holen Sie sich das Bildelement varimage

Anwendungen und Einschränkungen von Inline-Vorlagenfunktionen Anwendungen und Einschränkungen von Inline-Vorlagenfunktionen Apr 28, 2024 pm 02:33 PM

Inline-Vorlagenfunktionen fügen Code direkt in den Aufrufpunkt ein, ohne ein separates Funktionsobjekt zu generieren. Zu den Anwendungen gehören Codeoptimierung, Leistungsverbesserung, ständige Auswertung und Codevereinfachung. Beachten Sie jedoch die Einschränkungen, z. B. längere Kompilierungszeiten, größere Codegröße, verringerte Debugbarkeit und Einschränkungen bei allen Kompilierungseinheiten.

Welche Einschränkungen und Überlegungen gibt es bei der Überladung von C++-Funktionen? Welche Einschränkungen und Überlegungen gibt es bei der Überladung von C++-Funktionen? Apr 13, 2024 pm 01:09 PM

Zu den Einschränkungen bei der Funktionsüberladung gehören: Parametertypen und -reihenfolgen müssen unterschiedlich sein (wenn die Anzahl der Parameter gleich ist), und Standardparameter können nicht zur Unterscheidung von Überladungen verwendet werden. Darüber hinaus können Vorlagenfunktionen und Nicht-Vorlagenfunktionen nicht überladen werden, und Vorlagenfunktionen mit unterschiedlichen Vorlagenspezifikationen können überlastet werden. Es ist erwähnenswert, dass eine übermäßige Funktionsüberladung die Lesbarkeit und das Debuggen beeinträchtigen kann, da der Compiler von der spezifischsten zur unspezifischsten Funktion sucht, um Konflikte zu lösen.

Was soll ich tun, wenn die maximale Größe der Dokumente, die WPS-Mitglieder hochladen können, das Limit überschreitet? Was soll ich tun, wenn die maximale Größe der Dokumente, die WPS-Mitglieder hochladen können, das Limit überschreitet? Mar 20, 2024 pm 06:40 PM

WPS ist eine Office-Software, die umfassende Funktionen integriert. Sie können WPS jetzt zur Nutzung herunterladen. Wenn Sie jedoch mehr Funktionen nutzen möchten, müssen Sie sich als Mitglied registrieren. Manche Leute fragen sich vielleicht, wie groß die maximale Dateigröße ist, die ein WPS-Mitglied hochladen kann. Wenn Sie ein WPS-Mitglied sind, können Sie jedes Mal Dateien bis zu 1 GB hochladen, und alle Dateien können bis zu 365 GB hochladen. Es kann einige Unterschiede bei verschiedenen Terminals geben, aber die Gesamtanzeige ist grundsätzlich ähnlich. Was soll ich tun, wenn ich nicht über das Limit hinaus hochladen kann? Wir werden es als nächstes erklären. 1. Beim Hochladen von Dateien, z. B. Cloud-Dokumenten, ist ein bestimmter Speicherplatz vorhanden. Wenn dieser den Speicherplatz überschreitet, kann er nicht hochgeladen werden. 2. Klicken Sie auf das Mitgliedschaftslogo, erwerben Sie eine Mitgliedschaft entsprechend Ihren Anforderungen und erweitern Sie den Bereich. 3. Gutscheine können gelegentlich erscheinen, vergessen Sie also nicht, sie zu verwenden.

See all articles