JavaScript实现京东放大镜效果

本文实例为大家分享了JavaScript实现京东放大镜展示的具体代码,供大家参考,具体内容如下

实现效果:

1.鼠标放到图片上显示放大镜和详细图,鼠标离开时什么都不显示(效果消失)
2.鼠标一直在放大镜的中间,且放大镜随鼠标移动
3.放大镜不能出缩列图的盒子
4.鼠标放在详细图上详细图消失

实现细节:/p>

 1.大盒子虽然比详细图的盒子宽度小,但是在逻辑上详细图的盒子属于大盒子
 2.详细图不能使用浮动,因为盒子下面一般会有文字内容
 3.以父盒子来定位详细图的盒子
 4.放大镜鼠标选中为十字形
 5.对图片进行定位才能使图片移动
 6.使用var evt = event || window.event; //兼容性写法
 7.用放大镜顶点在盒子中的位置根据比例找到图片的位置,来显示图片
 8.图片在详细图中的定位为负值

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>京东放大镜</title>
 <style>
 .box{  /*大盒子虽然比详细图的盒子宽度小,但是在逻辑上详细图的盒子属于大盒子*/
  width: 350px;
  height: 350px;
  position: relative;
    margin: 100px;
    border: 1px solid #aaa;
 }
 .box .detailed{ /*详细图不能使用浮动,因为盒子下面一般会有文字内容*/
  width: 450px;
  height: 450px;
  border: 1px solid #aaa;
  position: absolute;
  overflow: hidden;
  left: 365px;   /*以父盒子来定位*/ 
  top: 0;
  /*初始设置为不可见*/
  display: none;
 }
 .box .normal .magnfier{
   width: 150px;
   height: 150px;
   top: 0;
   left: 0;
   position: absolute;
   background-color: rgba(0, 0, 255, 0.2);/*也可以用opacity来设置透明度*/
   cursor: move;  /*鼠标选中为十字*/
   display: none; /*初始设为不可见*/
 }
 .detailed img{  /*对图片进行定位使图片移动*/
   position: absolute;
   top: 0;
   left: 0;
 }
 </style>
 <script>
  function $(id){
  return document.getElementById(id);
  }
  window.onload = function(){
  var box = $("box");
  var normal = box.children[0];
  var margnfier = normal.children[1];//获取放大镜的Dom对象,document.getElementsByClassName来获取。
  var detailed = box.children[1];//获得缩略图DOM对象也可以用document.getElementsByClassName("zoom")[0];
  var detailedImg = box.children[1].children[0];
  normal.onmouseover = function(){//不能给box注册onmousever事件,否则快速移到详细图上是详细图也不会消失,
   margnfier.style.display = "block";
   detailed.style.display = "block";
  }
  normal.onmouseout = function(){
   margnfier.style.display = "none";
   detailed.style.display = "none";
  }
  var x = 0;
  var y = 0;
  //控制zoom放大镜部分在normal里面的移动
  normal.onmousemove = function(event){
   var evt = event || window.event;
   //兼容性写法
   x = evt.clientX - box.offsetLeft - margnfier.offsetWidth / 2;
   y = evt.clientY - box.offsetTop - margnfier.offsetHeight / 2; 
   //判断鼠标是不是溢出了normal的区域,
   if(x < 0){
    x = 0; 
   }else{
    if(x > box.offsetWidth - margnfier.offsetWidth){
    x = box.offsetWidth - margnfier.offsetWidth;
    }
    }
    if(y < 0){
    y = 0;
    }else{
    if(y > box.offsetHeight - margnfier.offsetHeight){
     y = box.offsetHeight - margnfier.offsetHeight;
    }
    }
   margnfier.style.left = x + "px";
   margnfier.style.top = y + "px";
   var detailedX = -x * 800 / this.offsetWidth;
   var detailedY = -y * 800 / this.offsetHeight;
   //用放大镜顶点在盒子中的位置根据比例找到图片的位置,来显示图片
   //改变图片位置
   detailedImg.style.left = detailedX + "px";
   detailedImg.style.top = detailedY + "px";
  } 
  }
 </script>
</head>
<body>
 <div id="box" class="box"> <!--包含详细图和缩略图的盒子-->
 <div class="normal">
  <img src="imgs/show.jpg" alt="">
  <div class="magnfier"></div>
 </div>
 <div class="detailed">
  <img src="imgs/detail.jpg" alt="">
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。