JQ实现一个放大镜效果

当我们浏览购物网站某个商品的详情页的时候，都会有一个鼠标移入到商品上时放大的效果，那么今天我们就用jq来实现一个放大镜的效果，先上一个效果图让大家看一下（下图是我仿照一加官网写的一个商品详情页）：
JQ实现一个放大镜效果

首先我们写放大镜要明白是怎样的一个思路去实现这个效果；先分析，既然是放大镜，那么可以肯定的是要按照一个合适的比例去放大对应的相对的图片，同时放大镜部分和被放大图片的移动距离都要等比例的放大，基本原理就这些了，然后下面我们再把细节完善一下。
首先我们需要创建几个变量用于设定图片的位置、移动距离等，在这我们就设定为全局变量了，因为后续用到的比较多；

 $(function () {
            var mouseX = 0; //鼠标移动的位置X
            var mouseY = 0; //鼠标移动的位置Y
            var maxLeft = 0; //最右边
            var maxTop = 0; //最下边
            var markLeft = 0; //放大镜移动的左部距离
            var markTop = 0; //放大镜移动的顶部距离
            var perX = 0; //移动的X百分比
            var perY = 0; //移动的Y百分比
            var bigLeft = 0; //大图要移动left的距离
            var bigTop = 0; //大图要移动top的距离

创建完成后我们要添加鼠标移入移出事件（此时要注意移出要是用mouseleave，阻止冒泡，这是一个小细节），然后改变放大镜的位置，同时要让选定区域的小框只能在原图上移动；

 function updataMark($mark) {
         //让小框只能在小图中移动
         if (markLeft < 0){
             markLeft = 0;
          }else if (markLeft > markLeft){
              markLeft = markLeft;
          } 
            if (markTop < 0){
              markTop = 0;
          } else if (markTop > maxTop){
              markTop = maxTop;
       }

还要在改变放大镜位置步骤中设置相应的移动比例；

perX = markLeft / $(".good-img").outerWidth();
     perY = markTop / $(".good-img").outerHeight();
     bigLeft = -perX * $(".bigImg").outerWidth();
     bigTop = -perY * $(".bigImg").outerHeight();
     //小框的位置和属性
    $mark.css({"left":markLeft, "top":markTop, "display":"block"});
    //改变完放大镜位置后改变大图的位置
    function updataBig() {
    $(".bigImg").css({"left":bigLeft, "top":bigTop, "display":"block"});
   }

则是后我们可以添加鼠标移入、移动、移出时的css效果了；
注：鼠标移动的位置（mouseX/Y）=鼠标指针的位置-鼠标指针的偏移量-小框宽高的1/2（此设定是为了能够显示原图的边缘，因为小框是有一定宽高的，而指针只是一个点）

//鼠标移入/移动时
  function imgMouseMove(event) {
    $(".bigGlass").css("display","block");
    $(".bigImg").css("display","block");
    var _this = $(this);
    var _mark = $(this).children(".grayImg");
    //鼠标在小图上的位置
    mouseX = event.pageX - _this.offset().left - _mark.outerWidth()/2;
    mouseY = event.pageY - _this.offset().top - _mark.outerHeight()/2;
    $(".grayImg").css("opacity", "1");
    $(".good-img").find("img").css("opacity", "0.7");

最后我们可以设定一下小框的最大移动位置

 //最大值
 maxLeft = _this.width() - _mark.outerWidth();
 maxTop = _this.height() - _mark.outerHeight();
 markLeft = mouseX;
 markTop = mouseY;
 updataMark(_mark);
 updataBig();

最后上一下html和css部分大家可以参考一下；

<div class="bigGlass">
        <img class="bigImg" src="../images/goodsDetails/758a2dae167ec24e14e5e01cf94105f4_400_400.png">
    </div>
    <div class="good-img">
        <div class="grayImg"></div>
        <img class="good-sImg" src="../images/goodsDetails/24bfb60d8ca48ed5b69cad133ef872e4.png" >
    </div>

//注：css部分是用scss写的
.goods-details .bigGlass {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid #999;
    border-radius: 2px;
    left: 500px;
    top: 40px;
    overflow: hidden; }
    .goods-details .bigGlass .bigImg {
      width: 700px;
      height: 700px;
      position: absolute; }
  .goods-details .good-img {
    width: 500px;
    height: 500px;
    float: left;
    margin-top: 40px; }
    .goods-details .good-img .grayImg {
      position: absolute;
      background-position: 0 0;
      box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
      width: 100px;
      height: 100px;
      display: none;
      z-index: 2; }
    .goods-details .good-img .good-sImg {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 50px; }

大家看明白了吗，试着自己写一个放大镜吧

JQ实现一个放大镜效果

相关推荐