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 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
JS获取本地地址及天气的方法实例小结
May 10 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 array_merge下进行数组合并的代码
2008/07/22 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
房屋出租协议书
2014/04/10 职场文书
学校宣传标语
2014/06/18 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
详解CSS故障艺术
2021/05/25 HTML / CSS
python scrapy简单模拟登录的代码分析
2021/07/21 Python
nginx结合openssl实现https的方法
2021/07/25 Servers
python全面解析接口返回数据
2022/02/12 Python
python字符串的一些常见实用操作
2022/04/06 Python
Nginx跨域问题解析与解决
2022/08/05 Servers