JS实现图片局部放大或缩小的方法

本文实例讲述了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">#magnifier{width:500px;height:696px;position:absolute;top:100px;left:250px;font-size:0;border:1px solid #000;}#img{width:500px;height:696px;}#Browser{border:1px solid #000;z-index:100;position:absolute;background:#555;}#mag{border:1px solid #000;overflow:hidden;z-index:100;}</style><script type="text/javascript">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,//装载原始图像的divimg : 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为原始图像,与原始图像等宽"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; //获取border的宽css（m.cont.getElementsByTagName（"div"）[0],{//m.cont.getElementsByTagName（"div"）[0]为浏览框"display" : "none",//开始设置为不可见"width" : m.cont.clientWidth / m.scale - borderWid + "px", //原始图片的宽/比例值 - border的宽度"height" : m.cont.clientHeight / m.scale - borderWid + "px", //原始图片的高/比例值 - border的宽度"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无法覆盖magnifier.createIframe（magnifier.m.img）;}this.onmousemove = magnifier.move; //this指向m.contthis.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","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）; //销毁iframemagnifier.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 }）;}</script></head><body><div id="magnifier"><img src="lib/images/1.jpg" id="img" /><div id="Browser"></div></div><div id="mag"><img id="magnifierImg" /></div><select style="position:absolute;top:200px;left:650px;width:100px;"><option>select测试</option><option>是否能覆盖</option></select></body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。