商品放大镜

最新推荐文章于 2023-09-03 13:44:07 发布

菲允龙歌

最新推荐文章于 2023-09-03 13:44:07 发布

阅读量116

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100749619

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

商品放大镜

<!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="js/jquery-3.4.1.min.js.js"></script>
    <style>
        *{ margin: 0; padding:0;}
        img{ display: block}
        .small{ width: 350px; height:350px; border: 1px solid #000; margin: 100px; position: relative; float: left;}
        .small span{ width: 175px; height: 175px; background: rgba(0,255,0,.5); position:absolute; left: 0; top: 0; display:none;}
        .big{ float: left; overflow: hidden; width: 400px; height: 400px;border: 1px solid #000; margin-top: 100px;display:none; position: relative; background: brown}
        .big img{position: absolute; left: 0; top: 0;}
    </style>
</head>
<body>
    <div class="small">
        <img src='img/1_b.jpg'>
        <span></span>
    </div>
    <div class="big"><img src="img/1_c.jpg"></div>
    <script>
        $(function(){
            $('.small').hover(function(){
                $('.small span').show()
                $('.big').show()
            },function(){
                $('.small span').hide()
                $('.big').hide()
            })
            $('.small').mousemove(function(ev){
                var L = ev.pageX-$('.small').offset().left-$('.small span').width()/2;
                var T = ev.pageY-$('.small').offset().top-$('.small span').height()/2;
                if(L<0){
                    L=0
                }else if(L> $('.small').width()-$('.small span').width()){
                    L = $('.small').width()-$('.small span').width()
                }
                if(T<0){
                    T=0
                }else if(T> $('.small').height()-$('.small span').height()){
                    T = $('.small').height()-$('.small span').height()
                }
                $('.small span').css({left:L,top:T})

                var x = ($('.big img').width()-$('.big').width())*L/($('.small').width()-$('.small span').width())
                var y = ($('.big img').height()-$('.big').height())*T/($('.small').height()-$('.small span').height())
                $('.big img').css({left:-x,top:-y})
            })
        })
    </script>
</body>
</html>

菲允龙歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商品放大镜

商品放大镜<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫

专栏目录