仿淘宝京东商品图片放大预览功能

Posted 2020-09-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿淘宝京东商品图片放大预览功能相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图片放大镜效果</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body{
                padding: 50px;
                position: relative;
            }
            .goods {
                width: 220px;
                height: 200px;    
                position: relative;
                overflow: hidden;        
            }
            .goods img{
                width: 220px;
                height: 200px;        
                
            }
            span{
                width: 100px;
                height: 100px;
                position: absolute;
                background-color: yellow;
                left: 0;
                top: 0;
                opacity: 0.5;
                display: none;
                
            }
            #show{
                width: 400px;
                height: 400px;
                border: 1px solid #ccc;
                position: absolute;
                left: 300px;
                top: 50px;
                display: none;
                overflow: hidden;
            }
            #show img{
                
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="goods">
            <img src="img/5.jpg" alt="" />
            <span></span>
        </div>
        <div id="show">
            <img src="img/5.jpg" alt="" />
        </div>
    
    </body>
    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //first complete the movement of the yellow pic
        $(‘.goods‘).on(‘mouseover‘,function(){
            $(‘span‘).show();
            $(‘#show‘).show();
            var maxHeight = $(‘.goods‘).height() - $(‘span‘).height();
            var maxWeight = $(‘.goods‘).width() - $(‘span‘).width();
            $(‘.goods‘).on(‘mousemove‘,function(e){
                var x = e.clientX;
                var y = e.clientY;
                var cy = y - $(‘.goods‘).offset().top - $(‘span‘).width()/2;
                var cx = x - $(‘.goods‘).offset().left -  $(‘span‘).width()/2;
                if(cx < 0) cx = 0;
                if(cy < 0) cy =0;
                if(cy > maxHeight) cy = maxHeight;
                if(cx > maxWeight) cx = maxWeight;
                var percentX = $(‘span‘).position().left/$(‘.goods‘).width();
                var percentY = $(‘span‘).position().top/$(‘.goods‘).height();
                $(‘span‘).css({
                    left:cx,
                    top :cy
                })
                $(‘#show‘).find(‘img‘).css({
                    top : -percentY*$(‘#show‘).find(‘img‘).height(),
                    left : -percentX*$(‘#show‘).find(‘img‘).width()
                })
            });
            
        }).on(‘mouseout‘,function(){
            $(‘span‘).hide();
            $(‘#show‘).hide();
        });
    </script>
</html>

以上是关于仿淘宝京东商品图片放大预览功能的主要内容，如果未能解决你的问题，请参考以下文章

Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览，2.拖动，3.放大，4.左右滑动，5.长按保存到手机)的功能