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 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 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极大的增强功能和性能
2006/10/09 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
javascript 节点排序 2
2011/01/31 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
js判断密码强度的方法
2020/03/18 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python中的yield浅析
2014/06/16 Python
Python进程间通信用法实例
2015/06/04 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python代码太长换行的实现
2019/07/05 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
python pillow库的基础使用教程
2021/01/13 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
签约仪式主持词
2014/03/19 职场文书
金融管理专业求职信
2014/07/10 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
教你怎么用Python生成九宫格照片
2021/05/20 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL