jQ插件-thickImg大图查看器

这里需要使用到jquery-ui的position效果，所以需要引入jq-ui的js文件。
通过特定的class名来进行区分，然后js加上对应的效果。

做这个主要是他这个ui挺简洁的，以后说不定用的到，反正不是很难，就花点时间做了个插件。

预览图：

使用教程

html

<a href="images/02.jpg" title="图片信息" class="thickImg">
      <img src="images/look.gif" alt="查看大图">
    </a>

一个a元素里面包这个一个图片，图片用于提示查看，a的href指向一个大图，class为thickImg用于钩子定位，title则为图片的信息。

css

.noscroll {
    height: 100%;
    overflow: hidden;
}

#Tb_mask {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .3);
}

#Tb_window {
    position: absolute;
    display: inline-block;
    padding: 10px;
    background-color: #fff;
    border: 4px solid rgb(145, 145, 145);
}

#Tb_img {
    display: block;
    vertical-align: middle;
    border: 1px solid #999;
    margin-bottom: 5px;
}

#TB_caption {
    float: left;
}

#TB_closeWindow {
    float: right;
}

#TB_close {
    text-decoration: none;
    color: #000;
}

#TB_close:hover {
    text-decoration: underline;
}

js引用和调用

引用

<script type="text/javascript" src="js/jquery-3.4.1.js" id="jq"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.thickImg.js"></script>
<script type="text/javascript" src="js/js.js"></script>

调用

$('a.thickImg').thickImg();

说明

目前还没有遇到需要什么特殊的参数，暂时就没有写配置设置，以后用到了再来一一完善，测试应该是支持手机端的，并且也发现了两个很有意思的东西；

第一个就是当子元素设置width是百分百的时候，父元素为inline-block并且没有设置width，它就会自动block化。

第二个就是当图片设置的是max-width的时候，父元素不设置width，让它inline-block自动计算宽度，再直接设置父元素的position()只能让他at设置为居中，而my是无效的，因为此时父元素的宽度还没有计算出来，而我的解决办法就是使用一个setTimeout，延迟那么一丢丢就可以了，具体如果图片是网络图片，那么就要加长这个延迟的时间，但是体验就很差了。
为此我就采用了图片预加载的方式将这个问题进行过渡处理。

demo演示

地址

下载

jquery.thickImg插件下载