HTML+CSS zum Hinzufügen eines Löschkreuzes und einer Bildlöschschaltfläche in der oberen rechten Ecke des Bildes

Zur Aufzeichnung: Es kann in Zukunft verwendet werden und auch Freunde in Not können es verwenden.

Schluss mit BB, schauen wir uns erstmal die Renderings an

Oben ist das Effektbild. Das Bild oben rechts könnt ihr selbst ändern. Ich lade das Bildmaterial nicht hoch. Ich poste nur den Code. Es handelt sich um recht einfaches CSS und JS. Anfänger sollten es verstehen können.

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.divX
{
    z-Index: 200;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    Zeilenhöhe: 10px;
    Textausrichtung: zentriert;
    Schriftstärke: fett;
    Cursor:Zeiger;
    Schriftgröße: 10px;
	Anzeige: keine;
}
</Stil>
</Kopf>
 
<Text>
	<form id="form" style="margin-top:20px;">
        
        <div id="img_div_1">
            <input Typ="Datei" id="file_input" onchange="addFile(this);" style="display:none" />
            <div style="position: relative;">
            	<img id="file_img" src="add_img.png" width="75" onclick="file_input.click();" height="65" />
            </div>
            <div Klasse="divX" id="img_zindex_div_1" onclick="del()">
            	<img src="Nr.png" width="16" height="16" />
            </div>
        </div>
        
	</form>
</body>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<Skripttyp="text/javascript">
	
	Funktion addFile(ths) {
		var objUrl = getObjectURL(ths.files[0]);
		var links = $('#file_img').position().links;
		var top = $('#file_img').position().top;
		$('#img_zindex_div_1').css({position: "absolute", links: links + 75, oben: oben + 10, Anzeige: "Block" });
		$('#file_img').attr("Quelle", objUrl);
	}
	
	Funktion del() {
		Alarm("Löschen");
	}	
	
	Funktion getObjectURL(Datei) {
		var url = null; 
		if (window.createObjectURL!=undefined) { // einfach
			url = window.createObjectURL(Datei);
		} sonst wenn (window.URL!=undefiniert) { // mozilla(firefox)
			url = Fenster.URL.createObjectURL(Datei);
		} sonst wenn (window.webkitURL!=undefined) { // WebKit oder Chrome
			url = window.webkitURL.createObjectURL(Datei);
		}
		URL zurückgeben;
	}
</Skript>
</html>

Erledigt. Es ist Zeit, Feierabend zu machen. Kopiere den Code und ersetze das Bildmaterial um es direkt zu verwenden

Feierabend. Verlassen

------------------------------------------------------------------------------------------- Wunderschöne Abteilung---------------------------------------------------------------------------------------------

Auffüllen. Da links immer 0 ist

Bekomme es anders

 var objUrl = getObjectURL(ths.files[0]);
		var links = $('#file_img').offset().links;
		var top = $('#file_img').offset().top;
		
		// links ist der äußerste linke Abstand des Standardbilds. Das hinzugefügte Bild kann auf der Breite des Standardbilds basieren - der Breite des gelöschten Ebenenbilds (d. h.: die aktuelle Breite meines Standardbilds ist 75, die Breite des gelöschten Ebenenbilds ist 16, links = 75 - 16, die Position kann ganz rechts im Bild sein! Dasselbe gilt für oben)
		$('#img_zindex_div_1').css({position: "absolute", links: links + 59, oben: oben - 5, Anzeige: "Block" });

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie Sie mithilfe von HTML+CSS ein Löschkreuz und eine Schaltfläche zum Löschen von Bildern in der oberen rechten Ecke eines Bilds hinzufügen. Weitere verwandte Informationen zum Hinzufügen eines Löschkreuzes und einer Schaltfläche zum Löschen von Bildern in der oberen rechten Ecke eines Bilds mithilfe von HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder stöbern Sie weiter in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Einführung und Verwendung von fünf Controllern in K8S

>>: Mit CSS3 erstellter Hover-Zoom-Effekt

So erweitern Sie den Linux-Swap-Speicher

HTML+CSS zum Hinzufügen eines Löschkreuzes und einer Bildlöschschaltfläche in der oberen rechten Ecke des Bildes

So erweitern Sie den Linux-Swap-Speicher

Praktische Methode zum Löschen einer Zeile in einer MySql-Tabelle

CSS3 zum Erzielen von Zeitleisteneffekten

Detaillierte Erklärung der Funktionen jedes Ports von Tomcat

Zusammenfassung der Bereitstellung des Tomcat-Clusters und des Nginx-Lastausgleichs basierend auf Docker

Beispiel für utf8mb4-Sortierung in MySQL

So öffnen Sie Ports zur Außenwelt in Alibaba Cloud Centos7.X

Detaillierte Erläuterung der Konstruktion und Verwendung von Redis5-Clustern unter Linux (Centos7)

Funktionsprinzip und Beispielanalyse des Linux-NFS-Mechanismus

Detaillierte Erklärung der Schleifenverwendung in Javascript-Beispielen

Artikel empfehlen

Beispielanalyse der Verwendung von Dockerfile-Textdateien

Manuelle Implementierung der Instanceof-Methode in JavaScript

Beispielcode für die JS-Funktion „Anti-Shake“ und „Throttling“ zur Entwicklung von Webprojekten

Tutorial zur Oracle-Bereitstellung in einer Linux-Umgebung

Sehr detaillierte JavaScript-Implementierung eines Webseiten-Karussells

Eine kurze Erläuterung des Lazy-Loading-Attributmusters in JavaScript

Lösung für das Problem, dass der Windows Server 2008 R2-Server ohne Grund automatisch neu gestartet wird

MySQL-Datenbankoperationen (Erstellen, Auswählen, Löschen)

WebWorker kapselt JavaScript-Sandbox-Details

Praxis der Verwendung von SuperMap in Vue

Ubuntu 20.04 setzt eine statische IP-Adresse (einschließlich verschiedener Versionen)

Detaillierte Erklärung der Methoden und Eigenschaften von Vue

Lizenzschlüssel für VMware Workstation Pro 16 mit Nutzungs-Tutorial

Ergänzender Artikel zur Front-End-Performance-Optimierung

Erstellen Sie ein privates Docker-Warehouse (selbstsignierte Methode)