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+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
咖啡店自主创业商业计划书
2014/01/22 职场文书
2014年安全生产责任书
2014/07/22 职场文书
教代会闭幕词
2015/01/28 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
postgresql中如何执行sql文件
2023/05/08 PostgreSQL