JavaScript image magnification technology (magnifying glass) to achieve code sharing_javascript skills

Copy code The code is as follows: JavaScript图片放大技术(放大镜)实现代码分享 - www.jb51.net #magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } #img{ width:342px; height:420px; } #Browser{ border:1px solid #000; z-index:100; position:absolute; background:#555; } #mag{ border:1px solid #000; overflow:hidden; z-index:100; } function getEventObject(W3CEvent) {//事件标准化函数 return W3CEvent || window.event; } function 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 = 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 //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决 } 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 is the original image, Same width as the original image 'height' : m.cont.clientHeight 'px', 'position' : 'absolute', 'left' : m.cont.offsetLeft m.cont.offsetWidth 10 'px', //The position of the magnification box is 10px to the right of the original image 'top' : m.cont.offsetTop 'px' }) var borderWid = m.cont .getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth; //Get the width of the border css(m.cont.getElementsByTagName(' div')[0],{ //m.cont.getElementsByTagName('div')[0] is the browsing box th' : m.cont.clientWidth / m.scale - borderWid 'px', using using using out out way out's'' out 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 out out outce out out out out out out of sss out's’’s out’s' out's'-'he's'-'he's''be's-to-be-besss’s--to be to trespasses to be t. , // The height of the original picture-the width of the border 'Opacity': 0.5 // Set transparency }) m.img.src = m.cont.getelementsbytagname ('' '' ' img')[0].src;//Let the src value of the original image be given to the enlarged image m.cont.style.cursor = 'crosshair'; m.cont.onmouseover = magnifier.start ; }, start:function(e){ if(document.all){//Only executed under IE, mainly to avoid IE6’s select being unable to be overwritten magnifier.createIframe(magnifier.m.img); } this.onmousemove = magnifier.move;//this points to m.cont this.onmouseout = magnifier.end; }, move:function(e){ var pos = getPointerPosition(e); //Event normalization 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 - browsing box width/2, Math.max and Math.min keep the browsing box from exceeding the image }) magnifier.m.mag.style.display = ''; css(magnifier.m.img,{ 'top' : - (parseInt(this.getElementsByTagName ('div')[0].style.top) * magnifier.m.scale) 'px', 'left' : - (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 layers = 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 image magnification technology (magnifying glass) to achieve code sharing_javascript skills

Related articles