코드 공유_javascript 기술을 달성하기 위한 JavaScript 이미지 확대 기술(돋보기)

코드 복사 코드는 다음과 같습니다. JavaScript图文放大技术(放大镜)实现代码分享 - www.jb51.net #돋보기{ 너비:342px; 높이:420px; 위치:절대; 상단:100px; 왼쪽:250px; 글꼴 크기:0; 테두리:1px 실선 #000; } #img{ 너비:342px; 높이:420px; } #Browser{ border:1px solid #000; z-색인:100; 위치:절대; 배경:#555; } #mag{ border:1px solid #000; 오버플로:숨김; z-색인:100; } 함수 getEventObject(W3CEvent) {//事件标准化函数 return W3CEvent || 창.이벤트; } 함수 getPointerPosition(e) {//兼容浏览器的鼠标x,y获得函数 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 = 수준; } } 함수 CSS (elem, prop) {// css 设置函数, 可以方便设置 css 值, 并且兼容设置透明值 for (var i in prop) { if(i == 'opacity') { setOpacity(elem,prop[i]); } else { elem.style[i] = prop[i]; } } 요소 반환; } var magnifier = { m : null, init:function(magni){ var m = this.m = magni || { cont : null, //装载하라始图이미지적 div img : null, //큰 이미지 mag : null, //放 : 15 //比例值,设置的值越大放大越大, 但是这里有个问题就是如果不可以整除时,会产生些很작은白边,目前不知道如何解决 } CSS(m.img, { '위치' : '절대', '너비' : (m.cont.clientWidth * m.scale) 'px', //원래始图이미지宽*比例值 '높이': (m.cont.clientHeight * m.scale) 'px' //원래始图이미지상 高*比例值 }) css(m.mag,{ 'display' : 'none', 'width' : m.cont.clientWidth 'px', //m.cont는 원본 이미지입니다. , 원본 이미지와 동일한 너비 'height' : m.cont.clientHeight 'px', 'position' : '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]은 탐색 상자 번째'입니다: m.cont.clientWidth / m.scale - borderWid 'px', 사용 사용 사용 아웃 웨이트 아웃 '' out together out together'' out'' through''''''''''''''''''''ceisece togethercececece together's 'cel togetherce out clean outce out clean outce outce clean outce outce outce outce outce outce outce outce out out outce out out out out of sss out's out's' out'-'그는'-'그는''될 것입니다- be-besss's--to be to trespasses to be t. // 원본 그림의 높이-테두리의 너비 '불투명도': 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){//IE6의 선택 항목을 덮어쓸 수 없는 것을 방지하기 위해 IE에서만 실행됩니다. magnifier.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=mouse 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.style.width = elem.offsetWidth 'px'; layer.style.height = elem.offsetHeight 'px'; }, RemoveIframe:function(elem){ varlayer = elem.parentNode.getElementsByTagName('iframe'); while(layers.length >0){ layers[0].parentNode.removeChild(layers[0]); } } } window.onload = function(){ magnifier.init({ cont : document.getElementById('돋보기') img: document.getElementById('magnifierImg'), mag : document.getElementById('mag'), 규모 : 3 }); } select测试 是否能覆盖

코드 공유_javascript 기술을 달성하기 위한 JavaScript 이미지 확대 기술(돋보기)

관련 기사