DOM操作实现鼠标移入图片放大

Go future

已于 2022-03-01 22:20:24 修改

阅读量778

点赞数

文章标签： css javascript html

于 2022-03-01 20:07:11 首次发布

本文链接：https://blog.csdn.net/weixin_51509116/article/details/123213970

版权

这里我所引用的图片地址可能跟你们的不一样，需要自己导入图片。

先看看实际效果：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;    //基础操作，先清除外边距和内边距
            padding: 0;
        }

        body>div:first-of-type {
            height: 810px;
            width: 810px;
            display: flex;

        }

        .first_div {
            height: calc(1080px /5);
            width: calc(1920px /5);
            margin-right: 20px;
            position: relative;

        }

        .first_div>nav {
            height: 75px;
            width: 75px;
            background-color: rgba(0, 255, 255, 0.6);
            left: 0;
            top: 0;
            position: absolute;
            display: none;
        }

        .first_div>img {
            height: calc(1080px /5);
            width: calc(1920px /5);
        }

        .second_div {
            height: calc(75px *5);
            width: calc(75px *5);
            overflow: hidden;
            position: relative;
        }
        .second_div>img{
          position: absolute;
          left: 0;
          top: 0;
        }
        
    </style>
</head>
  
<body> //由于实现的是简易的放大，这里就只用了一个div盒子来包裹它
    <div>
        <div class="first_div">
            <nav></nav>
            <img src="../img/R-C (1).jpg" alt="">

        </div>
        <div class="second_div">
            <img src="../img/R-C (1).jpg" alt="" height="1080px" width="'1920px" id="img">
        </div>
    </div>
    <script>
       //设计思路，我们要实现鼠标移入放大，当然需要先获取到，我们所要移入的盒子，并给他
     // 分别添加鼠标绑定事件  onmousemove(这里是鼠标在移动所产生的事件) 
     //当然我们鼠标移出之后，肯定要清楚我们之前的事件这里就需要用到 onmouseout
     
        const first_div = document.querySelector('.first_div'); //获取第一个div
        const nv = document.querySelector('nav')//获取nav添加鼠标事件
        const imgs =document.querySelector('#img');
        console.log(imgs);
        
      //当获取到第一个盒子的时候，给他添加绑定事件
        first_div.onmousemove = function (e) {//这里因为用的是句柄式，设置一个形参，可以获取事件对象
            nv.style.display = 'block'  //由于之前设置它内部的div盒子隐藏了，现在给他显示出来
          
            
  //要想我们所设置的小盒子始终在鼠标中央 ，这里需要考虑到它的偏移量
   //e是我们的形参，clientX，clientY返回鼠标位置相对于 浏览器窗口左上角 的坐标，单位为像素
   //clientHeight：本身的高度+上下内边距  clientWidth：本身的宽度+左右内边距;	
   //但是这样设计的话，当top<=0,或者top过大，这样的话就会超出盒子来显示，所以需要设计一个条件语句   
            let top = e.clientY - nv.clientHeight/2 
            let left = e.clientX - nv.clientHeight/2 
          
           if(top<=0){
              top=0   
           }
            if(top>=first_div.clientHeight-nv.clientHeight){  
                top=first_div.clientHeight-nv.clientHeight
               //这里的意思是top的偏移量如果大于了，大盒子的高度-它自身盒子的长度时，他会溢出，
               //所以当他大于的时候给他一个固定的值，让他始终不会溢出显示，left如下
            }
            if(left<=0){
                left=0
            }
            if(left>=first_div.clientWidth-nv.clientWidth){
                left=first_div.clientWidth-nv.clientWidth
            }
            nv.style.top = top+'px';  //注意我们的top偏移是需要px单位的，上面得出的数据是
    //number类型，并没有带单位，所以需要拼接一个px
            nv.style.left = left+'px';
    //由于我们右边的图片会放大不是因为，真的放大，而是一个原来很大的图片，我们给他设置了
    //overflow:hidden   ，那我们要实现移动到一个区域让他放大，就让这个图片脱离文档流
    //并设置top 和left 的偏移量就可以了，注意我们鼠标往右移动的时候，图片实际是往左移动
    //鼠标往下移动的时候，图片实际是往上移动，所以要去负值
    //而且，我们现在这个图片是之前的5倍，如果还是移动那么多，对于这个图片没有什么效果，所以
   //最高偏移量放大相应的倍数
            imgs.style.top = -top*5 +'px';
            imgs.style.left = -left*5+'px';

        }

        first_div.onmouseleave = function () {
            nv.style.display = 'none'
        }