<div class="sort-t">                                            <img src=http://www.mamicode.com/"@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;        zoom: 5;    }    /*遮罩层*/    .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();        });    });