单张图片放大镜特效

 点击一个图片，然后出现遮罩层，放大的图片，点击遮罩层回到原图

 

  <div class="sort-t">
                                            <img src="@item.UserInfo.DriverLicenseImage" width="100" height="70">
                                        </div>
                                        <div class="imgPosition"></div> 
<div class="shade" style="display:none;"></div>  //遮罩

 

css  样式

.imgPosition {
        width: 220px;
        height: 203px;
        display: none;
    }

    .sort-t {
        text-align: center;
    }

   .sort-t img {
            cursor: pointer;
        }

    .hoverImg img {
        position: absolute;
        width: 400px;
        height: 300px;
        left: 50%;
        top: 50%;
        margin-left: -250px;
        margin-top: -200px;
        cursor: pointer;
        z-index: 9999;
       
    }
    /*遮罩层*/
    .shade {
        background: #666;
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
        opacity: 0.3;
        z-index: 999;
    }

js 代码

 $().ready(function (e) {
        $(".sort-t").click(function () {
            var _this = $(this);
            $(".sort-t").removeClass("hoverImg");//删除所有的大图片样式
            _this.addClass("hoverImg");//给当前元素添加
            $(".shade").show(100);//显示遮罩层
            _this.next(".imgPosition").show();//当图片变大的时候里面的位置不改变
        });
        $(".shade").click(function () {
            $(this).hide();
            $(".sort-t").removeClass("hoverImg");
            $(".imgPosition").hide();
        });
    });

 

转载于:https://www.cnblogs.com/llxy/p/4015728.html