局部放大。

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();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值