商品详情放大效果

来源：互联网发布：mysql数据库常用命令编辑：程序博客网时间：2024/04/30 00:45

//页面布局：<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

阅读全文

0 0