商品详情放大效果

男娘i 2022-06-12 12:14 273阅读 0赞

//页面布局：
    <div class="box">
                        <div class="disImg">
                            <img src="images/datu.png"/>
                            <img src="images/datu.png" style="display: none;" />
                            <img src="images/datu.png" style="display: none;" />
                            <img src="images/datu.png" style="display: none;" />
                            <img src="images/datu.png" style="display: none;" />
                            <div class="mask"></div>
                        </div>
                        <div class="bigImg">
                            <div class="showBig">
                                <img>
                            </div> 
                        </div>
                        </div>
                        <ul class="img-list">
                            <li class="border-f5">
                                <img src="images/small.png" width="49" height="49" />
                            </li>
                            <li>
                                <img src="images/small.png" width="49" height="49" />
                            </li>
                            <li>
                                <img src="images/small.png" width="49" height="49" />
                            </li>
                            <li>
                                <img src="images/small.png" width="49" height="49" />
                            </li>
                            <li>
                                <img src="images/small.png" width="49" height="49" />
                            </li>
                        </ul>
                        <ul class="shoucang">
                            <li>
                                <img src="images/shoucangtubiao.png" alt="收藏"/>
                                收藏宝贝（
                                <span>
                                    167
                                </span>
                                人气）
                            </li>
                            <li>
                                <img src="images/fenxiangtubiao.png" alt="分享"/>
                                分享
                            </li>
                            <li>
                                <img src="images/jubaotubiao.png" alt="举报"/>
                                举报
                            </li>
                        </ul>
                    </div>

布局效果：  
![html][]

//js
    //查看大图
    var box = $(".box");
    var disImg = $(".disImg");
    var bigImg = $(".bigImg");
    var showBig = $(".showBig");
    var mask = $(".mask");
    $('.showBig img').attr('src',$('.disImg img')[1].src);
    //鼠标经过小盒子 显示遮罩和大盒子 鼠标离开后隐藏
    disImg.mouseover(function() { 
        mask.show();
        bigImg.show();
    });
    disImg.mouseout(function() { 
        mask.hide();
        bigImg.hide();
    });
    disImg.mousemove(function(event) { 
        var event = event || window.event;
        var pageX = event.pageX || event.clientX + document.documentElement.scroolLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        var targetX = pageX - box.offset().left;
        var targetY = pageY - box.offset().top;
        var maskX = targetX - mask.width() / 2;
        var maskY = targetY - mask.height() / 2;
        if (maskX < 0) {
            maskX = 0;
        }
        if (maskX > disImg.width() - mask.width()) {
            maskX = disImg.width() - mask.width();
        }
        if (maskY < 0) {
            maskY = 0;
        }
        if (maskY > disImg.height() - mask.height()) {
            maskY = disImg.height() - mask.height();
        }
        mask.css({
       'left':maskX + 'px','top':maskY + 'px'});
        var bigToMove = showBig.width() - bigImg.width();
        var maskToMove = disImg.width() - mask.width();
        var rate = bigToMove / maskToMove;
        showBig.css({
       'left':-rate * maskX + 'px','top':-rate * maskY + 'px'});
    });
    //图片展示
    $('.img-list').find('li').click(function() { 
        var _index = $(this).index() + 1;
        $('.disImg img').hide();
        $('.disImg img:nth-child(' + _index + ')').show();
        $('.img-list').find('li').removeClass('border-f5');
        $(this).addClass('border-f5');
        var path=$('.disImg img')[_index].src;
        $('.showBig img').attr('src',path);
    
    });

效果：  
![xiaoguo][]

[html]: /images/20220612/87c7890dd9d94796822378cebe777945.png
[xiaoguo]: /images/20220612/87a740ae5a7642a6b94870787900d884.png