HTML+CSS を使用して、画像の右上隅に削除の十字と画像削除ボタンを追加します。

記録として、将来使用される可能性があり、困っている友人も使用できます。

BBはもうやめて、まずはレンダリングを見てみましょう

上記が効果画像です。右上の画像は自分で変更できます。画像素材はアップロードしません。コードだけ載せておきます。かなりシンプルなCSSとJSです。初心者でも理解できるはずです。

</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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>無題のドキュメント</title>
<スタイル タイプ="text/css">
.divX
{
    zインデックス:200;
    境界線の半径:20px;
    -webkit-border-radius:20px;
    行の高さ:10px;
    テキスト配置:中央;
    フォントの太さ:太字;
    カーソル:ポインタ;
    フォントサイズ:10px;
	表示: なし;
}
</スタイル>
</head>
 
<本文>
	<フォームid="フォーム" スタイル="margin-top:20px;">
        
        <div id="img_div_1">
            <input type="file" 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 class="divX" id="img_zindex_div_1" onclick="del()">
            	<img src="no.png" 幅="16" 高さ="16" />
            </div>
        </div>
        
	</フォーム>
</本文>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
	
	関数 addFile(ths) {
		var objUrl = getObjectURL(ths.files[0]);
		var left = $('#file_img').position().left;
		var top = $('#file_img').position().top;
		$('#img_zindex_div_1').css({位置: "absolute", 左: 左 + 75, 上: 上 + 10, 表示: "block" });
		$('#file_img').attr("src", objUrl);
	}
	
	関数del() {
		アラート("削除");
	}	
	
	関数 getObjectURL(ファイル) {
		var url = null ; 
		if (window.createObjectURL!=undefined) { // 基本
			url = window.createObjectURL(ファイル);
		} そうでない場合 (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(ファイル);
		} else if (window.webkitURL!=undefined) { // webkit または chrome
			url = window.webkitURL.createObjectURL(ファイル);
		}
		URLを返します。
	}
</スクリプト>
</html>

終わり。今日はこれで終わりにします。コードをコピーして画像素材を置き換えて直接使用します

仕事を終える。離れる

------------------------------------------------------------------------------------------- ゴージャスな部門---------------------------------------------------------------------------------------------------------------------

補充します。左は常に0なので

別の方法で入手する

 var objUrl = getObjectURL(ths.files[0]);
		var left = $('#file_img').offset().left;
		var top = $('#file_img').offset().top;
		
		// left はデフォルト画像の左端の距離です。追加される画像は、デフォルト画像の幅 - 削除されたレイヤー画像の幅に基づいて決定されます (つまり、デフォルト画像の現在の幅は 75、削除されたレイヤー画像の幅は 16、left = 75 - 16、位置は画像の右端になります。top についても同様です)
		$('#img_zindex_div_1').css({位置: "absolute", 左: 左 + 59, 上: 上 - 5, 表示: "block" });

要約する

HTML+CSSを使用して画像の右上隅に削除クロスと画像削除ボタンを追加する方法についての記事はこれで終わりです。HTMLを使用して画像の右上隅に削除クロスと画像削除ボタンを追加することに関する関連情報については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: SQLはROW_NUMBER() OVER関数を使用してシーケンス番号を生成します。

>>: CSS3 で作成したホバーズーム効果