jQuery写放大镜效果

2022-10-13 18:22:13
<!DOCTYPE html>
<html lang="zh">
<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>jq放大镜</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .container{
            
            width:1000px;
            margin:50px auto;
        
        }
        .min{
            width:400px;
            height: auto;
            float: left;
        }
        .top{
            width:400px;
            height: 300px;
            position: relative;
        }
        b{
            width:180px;
            height:180px;
            background: blue;
            opacity: 0.5;
            position: absolute;
            left:0px;
            top:0px;
            display: none;
        }
        .bottom{
        
            width:400px;
            height:60px;
            margin-top:20px;
        }
        .left{
            width:10px;
            height:45px;
            float: left;
        }
        .item{
            float: left;
        }
        .item ul{
            width:370px;
            list-style: none;
            margin-left:10px;
        }
        .item ul li{
            margin-left:5px;
            float:left;
        }
        .item ul li img{
            width:60px;
            height:45px;
            border: 1px solid #ccc;
            padding:2px;
        }
        .right{
            width:10px;
            height:45px;
            float: left;
        }
        .max{
            width:400px;
            height: 300px;
            float: right;
            overflow: hidden;
            display: none;
            position: relative;
        }
        .max img{
            width:800px;
            height: 600px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .item ul li img.bg{
            border:2px solid orange;
        }
    </style>
</head>
<body>
    <div class="container">
            
            <div class="min">
                <div class="top">
                    <img src="fangdajingImg/1.jpg" alt="">
                    <b></b>
                </div>
                <div class="bottom">
                    <div class="left"><img src=‘fangdajingImg/left.gif‘></div>
                    <div class="item">
                        <ul>
                            <li><img src=‘fangdajingImg/1.jpg‘ class="bg"></li>
                            <li><img src=‘fangdajingImg/2.jpg‘></li>
                            <li><img src=‘fangdajingImg/3.jpg‘></li>
                            <li><img src=‘fangdajingImg/4.jpg‘></li>
                            <li><img src=‘fangdajingImg/5.jpg‘></li>
                        </ul>
                    </div>
                    <div class="right"><img src=‘fangdajingImg/right.gif‘></div>
                </div>
                
            </div>
            <div class="max">
                <img src="fangdajingImg/1.jpg" alt="">
            </div>
            
        </div>
</body>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function(){
                $(‘.item ul li img‘).click(function(){
                    $(this).addClass(‘bg‘).parent().siblings().find(‘img‘).removeClass(‘bg‘)
                    $(‘.top img‘).attr(‘src‘,$(this).attr(‘src‘))
                    $(‘.max img‘).attr(‘src‘,$(this).attr(‘src‘))
                })
                $(‘.top‘).mousemove(function(e){
                    $(‘b‘).show()
                    $(‘.max‘).show()
                    var x=e.pageX-$(this).offset().left-$(‘b‘).width()/2
                    var y=e.pageY-$(this).offset().top-$(‘b‘).height()/2
                    var width=$(this).width()-$(‘b‘).width()
                    var height=$(this).height()-$(‘b‘).height()
                    if(x<0){
                        x=0
                    }else if(x>width){
                        x=width
                    }
                    if(y<0){
                        y=0
                    }else if(y>height){
                        y=height
                    }
                    $(‘b‘).css({
                        ‘left‘:x,
                        ‘top‘:y
                    })
                    $(‘.max img‘).css({
                        ‘left‘:-2*x,
                        ‘top‘:-2*y
                    })
                })
            })
        </script>
</html>
jQuery写放大镜效果
码农公寓

相关文章
