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


Posted in Javascript onAugust 20, 2016

本文实例讲述了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 相关文章推荐
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
JS获取及验证开始结束日期的方法
Aug 20 #Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 #Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 #Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 #Javascript
JS实现漂亮的时间选择框效果
Aug 20 #Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 #Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 #Javascript
You might like
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
详解Python中break语句的用法
2015/05/14 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
生产车间实习自我鉴定
2013/09/23 职场文书
会计实习自我鉴定
2013/12/04 职场文书
表彰先进的通报
2014/01/31 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
课程改革实施方案
2014/03/16 职场文书
三八节主持词
2014/03/17 职场文书
食品安全宣传标语
2014/06/07 职场文书
导游词400字
2015/02/13 职场文书
新闻报道稿范文
2015/07/23 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL