jQuery放大镜的实现

最新推荐文章于 2023-01-14 21:47:59 发布
ddydyt
最新推荐文章于 2023-01-14 21:47:59 发布
阅读量142
点赞数
分类专栏：啊哦额
本文链接：https://blog.youkuaiyun.com/qq_39088411/article/details/103739398
版权
啊哦额专栏收录该内容
25 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../../../BootStrap/assets/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding:0;
        }
    .picContainer{
        width: 450px;
        height: 420px;
        border: 1px solid red;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: inline-block;
    }
    .posix{
        width: 450px;
        height: 420px;
        border: 1px solid red;
        display: inline-block;
        display: none;
        background-repeat: no-repeat;
    }
    .picList{
        margin-top: 5px;
        width: 450px;
        display: flex;
        justify-content: space-between;
    }
    .picList>img{
        width: 80px;
        height: 80px;
    }
    .picList>img:hover{
        border: 2px solid #000;
        box-sizing: border-box;
    }
    .cover{
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid ;
        background-color: rgba(98,94,89,0.2);
        position: absolute;
    }

    #showDialog{
        width: 900px;
        height: 600px;
        background-color: #ccefec;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: none;
    }
    .left{
        width: 80%;
        height: 100%;
        display: inline-block;
        background-color: black;
        text-align: center;
    }
    .right{
        width: 20%;
        height: 100%;
        float: right;
        height: 20%;
        margin-top: 50px;
    }
    .showPIC{
        display: inline-block;
        width: 77%;
        height: 100%;
        background-color: red;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 1;
    }
    button{
        -webkit-appearance: none;
        background-color: rgba(67,98,89,0.6);
        border: none;
        color: #fff;
        position: absolute;
        font-size: 20px;
        width: 30px;
        height: 50px;
        outline: none;
        cursor: pointer;
    }
    .lt{
        top: calc(50% - 25px);
        left: 30px;
    }
    .gt{
        top: calc(50% - 25px);
        right: 210px;
    }
    .close{
        position: absolute;
        top: 0;
        right: 0;
        height: 30px;
    }
    .right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .right>div{
        width: 50px;
        height: 50px;
        border: 2px solid transparent;
        background-size: 100% 100%;
    }

    </style>
</head>
<body>
    <div class="picContainer"><span class="cover"></span></div><div class="posix"></div>
    <div class="picList"></div>
    <section id="showDialog">
        <div class="left">
            <div class="showPIC"></div>
            <button class="lt">&lt;</button>
            <button class="gt">&gt;</button>
            <button class="close">X</button>
        </div>
        <div class="right">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </section>
    <section>

    </section>
    <script>
        var jj = 0;
        var picList = [
            {src:'./image/img0.jpg',title:'Win7背景图'},
            {src:'./image/i3.jpg',title:'i3处理器'},
            {src:'./image/i7.jpg',title:'i7处理器'},
            {src:'./image/i9.jpg',title:'i9处理器'},
            {src:'./image/rtx2080TI.jpg',title:'RTX 2080TI 公版显卡'}
        ]
        for(var i = 0 ; i < picList.length ; i++){
            var img = document.createElement('img');
            img.src = picList[i].src;
            img.title = picList[i].title;
            $('.picList').append(img);
        }
        for(let j = 0 ; j < $('img').length ; j++){
            $('img')[j].onmouseover = function(){
                $('.picContainer').css({'background-image':'url('+ picList[j].src +')'})
            }
            // 点击缩略图做的处理
            $('img')[j].onclick = function(){
                jj = j;
                $('#showDialog').css({display:'block'})
                $('.showPIC').css({'background-image':'url('+ picList[j].src +')'})
                for(var i = 0 ; i < picList.length ;i++)
                    $('.right>div:eq('+ i +')').css({backgroundImage:'url('+ picList[i].src +')'})
                // console.log($(this).index())    //图片在缩略图的索引值
                clearRedCircle();
                $('.right>div:eq('+ $(this).index() +')').css({borderColor:'red'})
            }
            $('.right>div:eq('+ j +')').on('mouseover',function(){
                clearRedCircle();
                $(this).css({borderColor:'red'})
                $('.showPIC').css({'background-image':'url('+ picList[j].src +')'})
                jj = j;
            })
        }
        $('.lt').on('click',function(){
            if(jj >= 0){
                jj--;
            }
            if(jj == -1)
                jj = $('.right>div').length - 1;
            console.log($('.right>div').length -1)
            $('.showPIC').css({'background-image':'url('+ picList[window.jj].src +')'})
            clearRedCircle();
            $('.right>div:eq('+ jj +')').css({borderColor:'red'})
        })
        $('.gt').on('click',function(){
            if(jj <= 4){
                jj++;
            }
            if(jj == 5)
                jj = 0;
            console.log($('.right>div').length -1)
            $('.showPIC').css({'background-image':'url('+ picList[window.jj].src +')'})
            clearRedCircle();
            $('.right>div:eq('+ jj +')').css({borderColor:'red'})
        })
        // 弹框关闭
        $('.close').on('click',function(){
            $('#showDialog').css({display:'none'})
        })

        function clearRedCircle(){
            // 清空 红色的圈圈
            for(var i = 0 ; i < $('.right>div').length; i++)
            $('.right>div:eq('+ i +')').css({borderColor:'transparent'})
        }

        $('.picContainer').on('mousemove',function(e){
            $('.posix').css({display:'inline-block'});
            var top = $('.cover').css('top').slice(0,$('.cover').css('top').length -2)
            var left = $('.cover').css('left').slice(0,$('.cover').css('left').length -2)
            $('.cover').css({
                top:e.clientY - $('.cover').width() / 2  + 'px',
                left:e.clientX - $('.cover').height() / 2 + 'px'
            })
            // 不让遮罩层出去
            if($('.cover').offset().top + 100 >= 420){
                $('.cover').css({top:'320px'})
            }
            if($('.cover').offset().top  <= 0){
                $('.cover').css({top:'0px'})
            }
            if($('.cover').offset().left <= 0){
                $('.cover').css({left:'0px'})
            }
            if($('.cover').offset().left + 100>= 450){
                $('.cover').css({left:'350px'})
            }
            var v = $(this)[0].style.backgroundImage;
            // console.log(v)
            $('.posix').css({'background-image':v})
            $('.posix').css({'backgroundPosition':Math.floor($('.cover').offset().left/($('.cover').parent().height()-70)*100)+'%' + ' ' + Math.floor($('.cover').offset().top/($('.cover').parent().height()-100)*100)+'%'})
            console.log($('.cover').offset().top)
            console.log(Math.floor($('.cover').offset().top/($('.cover').parent().height()-100)*100)+'%')
        })
        

    </script>
</body>
</html>