天天看点
返回

原生js放大镜效果

index.html页面

<!DOCTYPE html>
<html  dir="ltr">
<head>
  <meta charset="utf-8">
  <title>放大镜</title>
  <script src="index.js"></script>     
  <link rel="stylesheet" href="index.css" target="_blank" rel="external nofollow" >
</head>

<body>
  <div class="box">
    <div class="small">
      <span class="slider"></span>
      <img src="img.jpg" alt="" />
    </div>
    <div class="big_pic">
      <img class="img" src="img.jpg" width="720" height="1000" alt="" />
    </div>
  </div>
</body>

</html>

index.css外链样式

* {
   margin: 0;
 }

 .small {
   width: 360px;
   height: 500px;
 }

 .small img {
   width: 100%;
   height: 100%;
 }

 .slider {
   width: 180px;
   height: 250px;
   opacity: 0.5;
   background-color: #d5d5d5;
   position: absolute;
   top: 0;
   left: 0;
   cursor: move;
   display: none;
 }

 .big_pic {
   position: absolute;
   left: 370px;
   top: 0;
   overflow: hidden;
   width: 360px;
   height: 500px;
   border: 1px solid #333;

 }

 .img {
   position: absolute;
 }

index.js事件操作

window.onload = function() {
      var box = document.getElementsByClassName('box');
      var small = document.getElementsByClassName('small')[0];
      var slider = document.getElementsByClassName('slider')[0];
      var samll_da = document.getElementsByClassName('big_pic')[0];
      var samllImg = document.getElementsByClassName('img')[0];
      //移出
      small.onmouseout = function() {
        slider.style.display = "none";
        samll_da.style.display = "none";
      }
      //移入。
      small.onmousemove = function() {
        slider.style.display = "block";
        samll_da.style.display = "block";
        var left = event.clientX - slider.offsetWidth / 2;
        var top = event.clientY - slider.offsetHeight / 2;
        if (left < 0) {
          left = 0;
        } else if (left > (small.offsetWidth - slider.offsetWidth)) {
          left = small.offsetWidth - slider.offsetWidth;
        }
        if (top < 0) {
          top = 0;
        } else if (top > (small.offsetHeight - slider.offsetHeight)) {
          top = small.offsetHeight - slider.offsetHeight;
        }
        slider.style.left = left + 'px';
        slider.style.top = top + 'px';
        samllImg.style.left = -(left * 2) + 'px';
        samllImg.style.top = -(top * 2) + 'px';
      }
    }
div+css javascript 前端
上一篇: js 图片放大镜效果
下一篇: 原生JS实现京东放大镜效果

继续阅读