码迷,mamicode.com
首页 > 其他好文 > 详细

通过放大镜放大图片在右边的盒子里显示

时间:2020-12-07 11:56:14      阅读:6      评论:0      收藏:0      [点我收藏+]

标签:火狐   child   ie浏览器   fir   rgb   scrolltop   scroll   listener   png   

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>

/**
*外部引入的js文件,可以直接使用,主要是使用在下面的common.js中 * Created by Administrator on 2016/7/27.
*/ /** * Created by Administrator on 2016/7/21. * * 次文件来自 很牛x的程序员 . * * 作者:无名 */ /* * 该函数是返回的是指定格式的日期,是字符串类型 * 参数:date ----日期 * 返回值: 字符串类型的日期 * */ function getDatetoString(date) { var strDate;//存储日期的字符串 //获取年 var year=date.getFullYear(); //获取月 var month=date.getMonth()+1; //获取日 var day=date.getDate(); //获取小时 var hour=date.getHours(); //获取分钟 var minute=date.getMinutes() //获取秒 var second=date.getSeconds(); hour=hour<10?"0"+hour:hour; minute=minute<10?"0"+minute:minute; second=second<10?"0"+second:second; //拼接 strDate=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;//隐藏问题,关于变量声明的位置 return strDate; } //根据id获取元素对象 function my$(id) { return document.getElementById(id); } /* * * innerText属性IE中支持 * textContent火狐中支持 * dvObj.innerText="您好";设置innerText的值 * console.log(dvObj.innerText);获取innerText的值 * 因为上述原因,inerText有时候需要设置值,有时候需要获取值 * 所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用 * * * */ /* *设置innerText属性的值 * element-----为某个元素设置属性值 * content-----设置的值 * */ function setInnerText(element,content) { if(typeof element.textContent==="undefined"){ //IE浏览器 element.innerText=content; }else{ element.textContent=content; } } /* * 获取innerText属性的值 * element 要获取的元素 * 返回的是该元素的innerText值 * */ function getInnerText(element) { if(typeof element.textContent==="undefined"){ //IE浏览器 return element.innerText; }else{ return element.textContent; } } //获取当前元素前一个元素 function getPreviousElement(element) { if(element.previousElementSibling){ return element.previousElementSibling; }else{ var ele=element.previousSibling; while (ele&&ele.nodeType!==1){ ele=ele.previousSibling; } return ele; } } //获取当前元素的后一个元素 function getNextElement(element) { if(element.nextElementSibling){ return element.nextElementSibling; }else{ var ele=element.nextSibling; while(ele&&ele.nodeType!==1){ ele=ele.nextSibling; } return ele; } } //获取父元素中的第一个元素 function getFirstElementByParent(parent) { if(parent.firstElementChild){ return parent.firstElementChild; }else{ var ele=parent.firstChild; while (ele&&ele.nodeType!==1){ ele=ele.nextSibling; } return ele; } } //获取父元素中的最后一个元素 function getLastElementByParent(parent) { if(parent.lastElementChild){ return parent.lastElementChild; }else{ var ele=parent.lastChild; while(ele&&ele.nodeType!==1){ ele=ele.previousSibling; } return ele; } } //获取兄弟元素 function getsiblings(ele) { if(!ele)return;//判断当前的ele这个元素是否存在 var elements=[];//定义数组的目的就是存储当前这个元素的所有的兄弟元素 var el=ele.previousSibling;//当前元素的前一个节点 while (el){ if (el.nodeType===1){//元素 elements.push(el);//加到数组中 } el=el.previousSibling; } el=ele.nextSibling; while(el){ if(el.nodeType===1){ elements.push(el); } el=el.nextSibling; } return elements; } // //能力检测多个浏览器为同一个对象注册多个事件 var EventTools= { //为对象添加注册事件 addEventListener: function (element, eventName, listener) { if (element.addEventListener) { element.addEventListener(eventName, listener, false); } else if (element.attachEvent) { element.attachEvent("on" + eventName, listener) } else { element["on" + eventName] = listener; } }, //为对象移除事件 removeEventListener: function (element, eventName, listener) { if (element.removeEventListener) { element.removeEventListener(eventName, listener, false); } else if (element.detachEvent) { element.detachEvent("on" + eventName, listener); } else { element["on" + eventName] = null; } }, //获取参数e getEvent: function (e) { return e || window.event; }, getPageX: function (e) { if (e.pageX) { return e.pageX; } else { //有的浏览器把高度设计在了文档的第一个元素中了 //有的浏览器把高度设计在了body中了 //document.documentElement.scrollTop;//文档的第一个元素 //document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; return e.clientX + scrollLeft; } }, getPageY: function (e) { if (e.pageY) { return e.pageY; } else { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; return e.clientY + scrollTop; } } };

 

</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 350px;
      height: 350px;
      margin: 100px;
      border: 1px solid #ccc;
      position: relative;
    }

    .big {
      width: 400px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 360px;
      border: 1px solid #ccc;
      overflow: hidden;
      display: none;
    }

    .mask {
      width: 175px;
      height: 175px;
      background: rgba(255, 255, 0, 0.4);
      position: absolute;
      top: 0px;
      left: 0px;
      cursor: move;
      display: none;
    }

    .small {
      position: relative;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="small"><!--小层-->
    <img src="images/small.png" width="350" alt=""/>
    <div class="mask"></div><!--遮挡层-->
  </div><!--小图-->
  <div class="big"><!--大层-->
    <img src="images/big.jpg" width="800" alt=""/><!--大图-->
  </div><!--大图-->
</div>
<!--导入外部的js文件-->
<script src="common.js"></script>
<script>
  var box=my$("box");
  //获取小层
  var small=box.children[0];
  //获取遮挡层
  var mask=small.children[1];
  //获取大层
  var big=box.children[1];
  //获取大图
  var bigImg=big.children[0];

  //鼠标进入,显示遮挡层和大层
  box.onmouseover=function (){
    mask.style.display="block";
    big.style.display="block";
  };
  //鼠标离开,隐藏遮挡层和大层
  box.onmouseout=function (){
    mask.style.display="none";
    big.style.display="none";
  };
  //鼠标移动遮挡层事件
  mask.onmousemove=function (e){
    //将鼠标的位置定在遮挡层的中间
    var x=e.clientX-mask.offsetWidth/2;
    var y=e.clientY-mask.offsetHeight/2;
    //将遮挡层的margin值消掉
    x=x-100;
    y=y-100;
    //横,纵坐标的最小值
    x=x<0?0:x;
    y=y<0?0:y;
    //横,纵坐标的最大值
    x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
    y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;
    mask.style.left=x+"px";
    mask.style.top=y+"px";

    //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
    //求大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
    //大图的最大移动距离
    var bigImgMaxX=bigImg.offsetWidth-big.offsetWidth;
    var bigImgMaxY=bigImg.offsetHeight-big.offsetHeight;
    //遮挡层的最大移动距离
    var maxX=small.offsetWidth-mask.offsetWidth;
    var maxY=small.offsetHeight-mask.offsetHeight;
    //大图的移动距离
    var moveX=x*bigImgMaxX/maxX;
    var moveY=y*bigImgMaxY/maxY;

    //由于图片的移动不需要脱离文档流,只需要设置margin即可
    bigImg.style.marginLeft=-moveX+"px";
    bigImg.style.marginTop=-moveY+"px";
  };
</script>


</body>
</html>

 

通过放大镜放大图片在右边的盒子里显示

标签:火狐   child   ie浏览器   fir   rgb   scrolltop   scroll   listener   png   

原文地址:https://www.cnblogs.com/feiboy1126/p/14071230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!