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停止输出代码
Jul 20 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
详解jQuery中的easyui
Sep 02 jQuery
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
如何在PHP中使用数组
2020/06/09 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
vue如何判断dom的class
2018/04/26 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
python中 logging的使用详解
2017/10/25 Python
python字典操作实例详解
2017/11/16 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python按照多个条件排序的方法
2019/02/08 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
详解Python流程控制语句
2020/10/28 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis