这里需要使用到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插件下载

分类: 锋利的JQuery实例 标签: jQ插件thickImg大图查看器

评论

暂无评论数据

暂无评论数据

目录