기록을 위해, 그것은 미래에 사용될 수 있으며, 도움이 필요한 동료 도교도 사용할 수 있습니다.
아니요, 먼저 렌더링에서
위는 렌더링입니다. 오른쪽 상단 코너의 그림을 혼자서 변경할 수 있습니다. 그림 자료를 넣지 않으므로 코드를 추가하겠습니다. 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.dtdd> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> 제목의 문서 </title> <스타일 유형 = text/css> .divx {z-index : 200; -Moz 국경 Radius : 20px; -webkit-border-radius : 20px; 라인 높이 : 10px; 텍스트 정렬 : 센터; 글꼴 중량 : 대담한; 커서 : 포인터; 글꼴 크기 : 10px; 디스플레이 : none;} </style> </head> <body> <양식 id = form style = margin-top : 20px;> <div id = img_div_1> <입력 유형 = file id = file_input οnchange = addfile (this); 스타일 = 디스플레이 : 없음 /> <div 스타일 = 위치 : 상대;> <img id = file_img src = add_img.png width = 75 οnclick = file_input.click (); 높이 = 65/> </div> <div class = divx id = img_zindex_div_1 οnclick = del ()> <img src = no.png width = 16 height = 16/> </div> </form> </body> <script src = jquery-17.2.js type = text/javascript> </javascript> </javascript> < addfile (ths) {var objurl = getObjecturl (ths.files [0]); var left = $ ( '#file_img'). 위치 (). 왼쪽; var top = $ ( '##file_img'). 위치 (). $ ( '#img_zindex_div_1'). }); $ ( '##file_img'). attr (src, objurl);} 함수 del () {alert (delete);} 함수 getObjectUrl (file) {var url = null; if (winde wind끝내십시오. 작업이 끝났습니다. 코드를 복사하고 이미지 자료를 교체하면 직접 사용할 수 있습니다.
퇴근. 떠나다
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
다시 채우다. 왼쪽이기 때문에 0입니다
다른 방식으로 얻으십시오
var objurl = getObjectUrl (ths.files [0]); var left = $ ( '##file_img'). offset (). left; var top = $ ( '#file_img'). offset (). 상단; // 왼쪽은 기본 이미지의 가장 왼쪽 거리입니다. 추가 된 이미지는 기본 이미지의 너비에 따라 사용할 수 있습니다. 레이어 이미지의 너비를 삭제합니다 (즉, 현재 기본 이미지 너비는 75, 삭제 레이어의 이미지 너비는 16, 왼쪽 = 75-16, 위치는 이미지의 가장 오른쪽면에 도달 할 수 있습니다! 상단) $ ( '#img_zindex_div_1'. 상단 : 상단 -5, 디스플레이 : 블록});요약
이 기사는 삭제 포크 및 이미지 삭제 버튼으로 그림의 오른쪽 상단을 구현하는 HTML+CSS에 대한 기사입니다. 삭제 된 콘텐츠가 포함 된보다 관련된 HTML 사진을 보려면 wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!