商品详情放大效果-蒲公英云

商品详情放大效果

男娘i 2022-06-12 12:14 324阅读 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);
});