Par souci de record, il peut être utilisé à l'avenir, et les autres taoïstes dans le besoin peuvent également l'utiliser.
Non, d'abord sur le rendu
Ce qui précède est les rendus. Vous pouvez changer l'image dans le coin supérieur droit par vous-même. Je ne mettrai pas le matériel d'image dessus, donc je vais simplement ajouter le code. C'est assez simple, CSS et JS. Les débutants doivent le comprendre.
</ pre> <pren name = code class = html> <! doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><htm xmlns = http: //www.w3.org/1999/xhtml> <adread> <meta http-equiv = content-type content = text / html; charSet = utf-8 /> <tight> UNT intitulé Document </Title> <style type = text / css> .divx {Z-index: 200; -Moz-Border-Radius: 20px; -Webkit-Border-Radius: 20px; Heure de ligne: 10px; Texte-aligne: Centre; Police-poids: Bold; curseur: pointeur; taille de police: 10px; Affichage: Aucun;} </ style> </ head> <body> <form id = form style = margin-top: 20px;> <div id = img_div_1> <input type = file id = file_input οnchange = addfile (this); style = affichage: Aucun /> <div style = position: relatif;> <img id = file_img src = add_img.png width = 75 οnclick = file_input.click (); height = 65 /> </ div> <div class = divx id = img_zindex_div_1 οnclick = del ()> <img src = n ° png width = 16 height = 16 /> </ div> </ form> </ body> <script src = jQuery-1.7.2.js type = text / javascript> </cript> AddFile (ths) {var objurl = getObjectUrl (ths.files [0]); var Left = $ ('# file_img'). position (). Left; var top = $ ('# file_img'). Position (). }); $ ('# file_img'). attr (src, objUrl);} fonction del () {alert (delete);} function getObjectUrl (file) {var url = null; if (window.createObjectUrl! = Undefined) {// basicUrl = window.createObjectUrl (file);} else if (window.url! = Undefined) {// mozilla (firefox) url = window.url.createObjectUrl (file);} else if (window.webKiturl! = Undefined) {// wakit ou chromerl = window.webkiturl.createObjectUrl (fichier);} return url;} </cript> </html>Faites-le. Le travail est terminé. Copiez le code et remplacez le matériau de l'image et vous pouvez l'utiliser directement
Sortez du travail. Partir
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Remplir. Puisque la gauche est 0
Obtenez-le d'une autre manière
var objUrl = getObjectUrl (ths.files [0]); var Left = $ ('# file_img'). offset (). Left; var top = $ ('# file_img'). offset (). top; // gauche est la distance la plus gauche de l'image par défaut. L'image ajoutée peut être utilisée en fonction de la largeur de l'image par défaut - Supprimer la largeur de l'image de calque (c'est-à-dire que la largeur d'image par défaut actuelle est de 75, la largeur d'image de la couche de suppression est de 16, gauche = 75 - 16, la position peut atteindre le côté la plus à droite de l'image! - 5, affichage: bloc}); RésumerIl s'agit de l'article sur HTML + CSS qui implémente le coin supérieur droit de l'image avec un bouton de suppression de fourche et d'image. Pour des images HTML plus liées avec du contenu supprimé, veuillez rechercher des articles précédents de Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!