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

2019-11-20 09:11:16

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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,    //装载原始图像的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为原始图像,与原始图像等宽      '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.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',      '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     });}</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程序设计有所帮助。

上一篇：JavaScript第一篇之实现按钮全选、功能

下一篇：JS获取及验证开始结束日期的方法