이 기사에서는 이미지의 국소 확대 또는 감소를 달성하기위한 JS 방법에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
<! 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"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> magnifier </title> <style type = "text/css"> width : 500px; 높이 : 696px; 위치 : 절대; 상단 : 100px; 왼쪽 : 250px; 글꼴 크기 : 0; 테두리 : 1px solid #000;} #img {너비 : 500px; 높이 : 696px;} #브라우저 {테두리 : 1px solid #000; Z- 인덱스 : 100; 위치 : 절대; 배경 :#555;}#mag {테두리 : 1px solid#000; 오버플로 : 숨겨진; z-index : 100;} </style> <script type = "text/javaScript"> function getEventObject (w3cevent) {// 이벤트 정규화 된 기능 return w3cevent || window.event;} 함수 getPointerPosition (e) {// 함수 가져 오기 e = e || getEventObject (e); var x = e.pagex || (e.clientx + (document.documentElement.scrollleft || document.body.scrollleft)); var y = e.pagey || (E.Clienty + (Document.DocumentElement.scrolltop || document.body.scrolltop)); return { 'x': x, 'y': y};} 함수 setOpacity (elem, level) {// 투명 값에 대한 호환 브라우저 설정 (elem.filters) {elem.style.filter = 'alpha (exacity =' + level * 100 + '); } else {elem.style.opacity = level; }} 함수 CSS (Elem, Prop) {// CSS 설정 함수는 CSS 값을 쉽게 설정하고 (Var I in Prop) {if (i == '불투명도') {setOpacity (elem, prop [i]); } else {elem.style [i] = prop [i]; }} return elem;} var ingifier = {m : null, init : function (magni) {var m = this.m = magni || {cont : null, // div img 원본 이미지 img : null, scale mag : null, scale frame scale : 15 // 스케일 값, 값이 클수록 확대 할 수 없다면 약간의 흰색 가장자리가 생성되는 문제가 있습니다. CSS (M.Img, { '위치': '절대', '폭': (m.cont.clientWidth * M.Scale) + 'px', // 원래 이미지의 척도 값 '하이이트': css (m.mag, { 'display': 'none', 'width': m.cont.clientwidth + 'px', //m.cont는 원본 이미지이며 원래 이미지와 동일한 너비입니다. '하이트': M.cont.clientHeight + 'px', 'position': 'alplitute', 'left': m.cont.foffsetleft 'PX', // 확대 상자의 위치는 원본 이미지 10px 'top': M.Cont.OffSetTop + 'PX'})) var borderWid = m.cont.getElementsByTagName ( 'div') [0] .OffSetWidth -m.cont.getEtagName ( 'div'] [0] .ClientWidth. // 테두리 CSS의 너비를 가져옵니다 (M.Cont.getEmentsByTagName ( 'div') [0], {//m.cont.getElementsByTagName('Div')=]은 'None': 'none', // settings ': m.cont.clientWidth/M.Scale- Porther +'scalth/'the Width/the Width' 국경 '높이': M.Cont.ClientHeight /M.Scale -BorderWid + 'PX', // 원본 이미지의 높이 /스케일 값 - 경계 '불투명도'의 너비 ': 0.5 // 투명도}) m.IMG.Src = m.cont.getElementsByTagName ('Img ') .Src; // 이미지를 확대하기 위해 원본 이미지의 SRC 값을 보이게합니다. m.cont.style.cursor = 'Crosshair'; m.cont.onmouseover = magifier.start; }, start : function (e) {if (docum } this.onmouseMove = magifier.move; // 이것은 m.cont this.onmouseout = magifier.end를 가리 킵니다. }, 이동 : 함수 (e) {var pos = getPointerPosition (e); // 이벤트 표준화 this.getElementsByTagName ( 'div') [0] .style.display = ''; css (this.getElementsByTagName ( 'div') [0], { 'top': math.min (math.max (pos.y- this.this. this. this. this.getEtlementsByTagName ( 'div') [0] .OffSetHeight) + 'px', 'left': math.min (math.max (pos.x- this.offsetleft -parseint ( 'div') [0] .style.width) / 2,0), this.clientwidth- this.getElementsByTagName ( 'div') [0] .OffSetWidth) + 'px'// left = mouse x -this. this.offsetLeft- 브라우즈 박스 너비/2, math.max 및 math.min을 찾아보기 상자가 이미지를 초과하지 않도록}) mag.mag.style.display = ''; css (magnifier.m.img, { 'top': - (parseint (this.getElementsByTagName ( 'div') [0] .style.top) * magnifier.m.scale) + 'px', 'left': - (parseint (this.getElementsByTagName ( 'div')) [scale.Left) * vagfier.M.CLE.LEFT) * }, end : function (e) {this.getElementsByTagName ( 'div') [0] .style.display = 'none'; MAGIFIER.REMOVEIFRAME (MANIFIER.M.IMG); // iframe magnifier.mag.style.display = 'none'을 파괴합니다. }, createIframe : function (elem) {var layer = document.createElement ( 'iframe'); layer.tabindex = '-1'; layer.src = 'javaScript : false;'; elem.parentNode.AppendChild (레이어); layer.style.width = elem.offsetWidth + 'PX'; layer.style.height = elem.offsetheight + 'px'; }, removeIframe : function (elem) {var layers = elem.parentNode.getElementsByTagName ( 'iframe'); while (layers.length> 0) {레이어 [0] .parentNode.removeChild (레이어 [0]); }}}}}} window.onload = function () {magnifier.init ({cont : docut src = "lib/images/1.jpg"id = "img"/> <div id = "browser"> </div> </div> <div id = "mag"> <img id = "magnifierimg"/> </div> <select style = "위치 : 절대; 상단 : 200px; width : 100px; 덮어 쓰기 </옵션> </select> </body> </html>JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.