JavaScript 이미지 확대 기술(돋보기)

[권장] JavaScript 이미지 확대 기술(돋보기) 샘플 코드 - www.webdm.cn #돋보기{ 너비:342px; 높이:420px; 위치:절대; 위쪽:100px; 왼쪽:250px; 글꼴 크기:0; 테두리:1px 단색 #000; } #img{ 너비:342px; 높이:420px; } #Browser { 테두리:1px 솔리드 #000; z-index:100; 위치:절대; 배경:#555; } #mag{ 테두리: 1px 솔리드 #000; 오버플로:hidden; z-index:100; } function getEventObject(W3CEvent) {//이벤트 정규화 함수 return W3CEvent || window.event; } function getPointerPosition(e) {//브라우저 호환 마우스 x, y get 함수 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 }; } function setOpacity(elem,level) {//호환되는 브라우저에 대한 투명 값 설정 if(elem.filters) { elem.style.filter = 'alpha(opacity=' + level * 100 + ') '; } else { elem.style.opacity = level; } } function css(elem,prop) { //css 값을 편리하게 설정할 수 있는 css 설정 함수 , 그리고 투명 값 설정과 호환 가능 for(var i in prop) { if(i == 'opacity') { setOpacity(elem,prop[i]); } else { elem.style[i] = prop[i]; } } return elem; } var magnifier = { m : null,

init:function(magni){ var m = this.m = magni || { cont : null, //원본 이미지를 로드하는 div img : null, / /확대된 이미지 mag : null, //배율 상자 scale : 15 //Scale 값은 설정한 값이 클수록 배율이 커지는데, 여기서 문제는 나누어지지 않으면 , 약간의 흰색 가장자리가 생성됩니다. 현재로서는 어떻게 해결해야 할지 모르겠습니다. }

css(m.img,{ 'position' : 'absolute', 'width' : (m.cont.clientWidth * m.scale ) + 'px', //원본 이미지의 너비*비율 값 'height' : (m.cont.clientHeight * m.scale ) + 'px' //원본 이미지의 높이*비율 값 } )

css(m.mag,{ 'display' : 'none', 'width ' : m.cont.clientWidth + 'px', //m.cont는 원본 이미지, 원본 이미지와 너비가 동일 'height' : m.cont.clientHeight + 'px', '위치 ' : 'absolute', 'left' : m.cont.offsetLeft + m.cont .offsetWidth + 10 + 'px', //확대 상자의 위치는 원본 이미지에서 오른쪽으로 10px입니다. 'top' : m.cont.offsetTop + 'px' })

var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName( 'div')[0].clientWidth; //테두리 너비 가져오기

css(m .cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div ')[0]은 탐색 상자입니다 'display' : 'none', //보이지 않도록 설정 시작 'width' : m.cont.clientWidth / m.scale - borderWid + 'px', / /원본 이미지의 너비/비율 값 - 테두리의 너비 'height' : m.cont.clientHeight / m .scale - borderWid + 'px',//원본 이미지의 높이/비율 값 - 테두리 너비 'opacity' : 0.5//투명도 설정 })

m.img.src = m.cont.getElementsByTagName('img')[0].src;// 확대된 이미지에는 원본 이미지의 src 값을 부여하도록 합니다 m.cont.style.cursor = 'crosshair';

m .cont.onmouseover = magnifier.start; }, start:function(e){ if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖 돋보기 .createIframe(magnifier.m.img); } this.onmousemove = magnifier.move;//this指向m.cont this.onmouseout = magnifier.end; } , move:function(e){ var pos = getPointerPosition(e); //事件标准化 this.getElementsByTagName('div')[0].style.display = ''; css(this.getElementsByTagName('div')[0],{ 'top' : Math.min(Math.max(pos.y - this.offsetTop -parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px', 'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName(') div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=鼠标x - this.offsetLeft -浏览框宽/2,Math.max와Math.min让浏览框不会超출图이미지 }) magnifier.m.mag.style.display = ''; css(magnifier.m.img,{ 'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px', '왼쪽' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px' }) }, end:function(e){ this.getElementsByTagName('div')[0].style.display = 'none'; magnifier.removeIframe(magnifier.m.img); //销毁iframe magnifier.m.mag.style.display = 'none'; }, createIframe:function(elem){ var layer = document. createElement('iframe'); layer.tabIndex = '-1'; layer.src = 'javascript:false;'; elem.parentNode.appendChild(layer); layer.style.width = elem.offsetWidth + 'px'; layer.style.height = elem.offsetHeight + 'px'; }, removeIframe:function(elem){ var 레이어 = elem.parentNode.getElementsByTagName('iframe'); while(layers.length >0){ layers[0].parentNode.removeChild(layers[0]); } } } window.onload = function(){ magnifier.init({ cont : document.getElementById('magnifier'), img : document. getElementById('magnifierImg'), mag : document.getElementById('mag'), scale : 3 }); } select测试 是否能覆盖

JavaScript 이미지 확대 기술(돋보기)

관련 기사