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
Artikel empfehlen
Responsive Webdesign lernen (2) — Können Videos responsiv gemacht werden?
Rezension der vorherigen Folge: Gestern haben wir...
Verwendung und Unterschied von Js-Modulverpackungsexporten erfordern Import
Inhaltsverzeichnis 1. Commonjs-Exporte und erford...
Umfassendes Verständnis der Überwachung von HTML-Formulareingaben
Heute habe ich einen Blogbeitrag über Eingabeerei...
HTML-Kopfstruktur
Im Folgenden werden die häufig verwendete Kopfstr...
So lösen Sie das Problem, dass die Scroll-Ansicht des WeChat-Applets nicht nach links und rechts verschoben werden kann
Ich arbeite derzeit an einem eigenen kleinen Prog...
Detaillierte Erläuterung der grundlegenden Verwaltung der KVM-Virtualisierung in CentOS7
1. Installieren Sie die KVM-Virtualisierung :::::...
Detaillierte Einführung in den Nobody-Benutzer und Nologin im Unix/Linux-System
Was ist der Nobody-Benutzer in Unix/Linux-Systeme...
Vue-Tutorial zur erweiterten Verwendung dynamischer Komponenten
Inhaltsverzeichnis Grundlegende Beschreibung AST-...
Aufbauprozess des Telnet-Dienstes in CentOS 7.6 (Openssh-Upgrade-Kampf, erste Aufgabe: Aufbau der Backup-Transportleitung)
Wenn ich irgendwelche unklaren Fragen habe, gehe ...
Beim Hochladen von Bildern mit Axios in Vue sind Probleme aufgetreten
Inhaltsverzeichnis Was ist FormData? Eine praktis...
Analyse der Ideen zur Implementierung vertikaler Tabellen auf zwei Arten im Vue-Projekt
Problembeschreibung In unseren Projekten sind hor...
Eine kurze Diskussion darüber, welche Felder in Mysql für die Indizierung geeignet sind
Inhaltsverzeichnis 1 Die allgemeinen Regeln zum E...
8 Möglichkeiten zum manuellen und automatischen Sichern Ihrer MySQL-Datenbank
MySQL ist ein beliebtes Open-Source-Datenbankverw...
Implementierungsprozessdatensatz für benutzerdefinierte Vue-Tabellenspalten
Inhaltsverzeichnis Vorwort Rendern setTable-Kompo...
Analyse der Initialisierung des Quellcodes des Linux-Kernel-Schedulers
Inhaltsverzeichnis 1. Einleitung 2. Grundkonzepte...