局部放大。

茶卡丶小雨

已于 2023-05-11 13:57:02 修改

阅读量58

点赞数

分类专栏： js、笔记案例实现文章标签： css html css3

于 2022-07-24 19:55:36 首次发布

本文链接：https://blog.csdn.net/qq_67674653/article/details/125963254

版权

js、笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

案例实现

7 篇文章 0 订阅

订阅专栏

1. html :

<!DOCTYPE html>
<html lang="en">
<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>图片放大器</title>
</head>
<body>
    <div class="sample">
        <!-- 左边图  搜索的位置图 -->
        <div class="box">
            <img class="imgLeft" src="./img/max_01.jpg">
            <samp class="mask"></samp>
        </div>
        <!-- 大图  原始图 -->
        <div class="imgA">
            <img class="imgsAl" src="./img/big_01.jpg">
        </div>
        <!-- 选择图  -->
        <ul class="imgSo">
            <li style="border: 1px solid aqua;"><img src="./img/1 (1).jpg"></li>
            <li><img src="./img/1 (2).jpg"></li>
            <li><img src="./img/1 (3).jpg"></li>
            <li><img src="./img/1 (4).jpg"></li>
            <li><img src="./img/1 (5).jpg"></li>
        </ul>
    </div>
    <!-- <button class="btu">点击查看</button> -->
</body>
</html>

2. css:


        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .sample{  /* 大盒子div */
            width: 600px;   
            position: relative;
            top: 30px;
            left: 120px;
            /* overflow: hidden; */
        }
        .sample .box{   /* 第一个div */
            position: relative;
            width: 100%;
            height: 600px;
            border: 2px solid aqua;
        }
        .sample .box .imgLeft{
            width: 100%;
            height: 100%;
        }
        .sample  .box .mask{
            width: 150px;
            height: 150px;
            background: rgba(0, 217, 255, 0.409);
            position: absolute;
            top: 0;
            left: 0;
            cursor: crosshair;
        }
        .sample .imgSo{
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .sample .imgSo>li{
            width: 55px;
            height: 55px;
            margin: 0 10px;
            box-sizing: border-box;
        }
        .sample .imgSo>li>img{
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .sample .imgA{
            width: 850px;
            height: 850px;
            border: 1px solid red;
            position: absolute;
            left: 650px;
            top: 0;
            cursor: pointer;
            overflow: hidden;
            display: none;
        }
        .sample .imgA .imgsAl{
            right: 0;
            top: 0;
            position: absolute;
        }

3. 原生js:



    // 1. 获取元素
    let sample = $('.sample'); // 大盒子
    let box = $('.box'); // 第一个小盒子
    let imgLeft = $('.box img');  // 第一个小盒子的图片
    let mask = $('.mask');  // 十字光标

    let imgA = $('.imgA');  // 原始图 的盒子
    let imgsAl = $('.imgA img');  // 原始图
    
    let imgAll = all_$('.imgSo li') // 可选择的小图片
    // console.log(imgsoAll[1]);

    // 鼠标事件 
    box.addEventListener('mouseover',function(){
    //1. 鼠标移入后展示的效果
        mask.style.display = 'block';
        imgA.style.display = 'block';

    //2. 滑块跟随
        box.addEventListener('mousemove',function(e){

    // 2.1 计算偏移量 计算的是 X Y 
    //     也就是距离顶部 和 左边多少的距离
    //     0.5 是滑块的一半
            let x = e.pageX - sample.offsetLeft - mask.offsetWidth * 0.5;
            let y = e.pageY - sample.offsetTop - mask.offsetHeight *0.5;

    // 2.1.1 限制滑块的移动范围
            if(x<0){
                x = 0;
            }else if(x>box.offsetWidth - mask.offsetWidth){
                x = box.offsetWidth - mask.offsetWidth -2;
            }
            if(y<0){
                y = 0;
            }else if(y>box.offsetHeight - mask.offsetHeight){
                y = box.offsetHeight - mask.offsetHeight -2;
            }

    // 2.2 让 mask 动起来
                mask.style.left = x + 'px';
                mask.style.top = y + 'px';
    // 2.3 大图动起来

            imgsAl.style.left = -x/(box.offsetWidth/imgA.offsetWidth)+ 'px';
            imgsAl.style.top = -y/(box.offsetHeight/imgA.offsetHeight) + 'px';

        })  
    })
    //  复原
    box.addEventListener('mouseout', function () {
    //1. 鼠标移出后的展示效果
        mask.style.display = 'none';
        imgA.style.display = 'none';
    })

    // 4. tabs 选项设置

    for(let i = 0;i< imgAll.length;i++){
        imgAll[i].onclick = function(){
            for(let j = 0;j< imgAll.length;j++){
                imgAll[j].style.border = 'none';
            }
            this.style.border = '1px solid aqua';
                // 给小图片点击功能
            imgLeft.setAttribute('src',`./img/max_0${i+1}.jpg`);
            imgsAl.setAttribute('src',`./img/big_0${i+1}.jpg`);



            // imgLeft.setAttribute('src', `./img/max_0${i + 1}.jpg`);
            // imgLeft.setAttribute('src', `./img/max_0${i + 1}.png`);
        }
    }

            // console.log();