0%

jQ插件-thickImg大图查看器

发布于 / 分类: 锋利的JQuery,实例 / 暂无评论 / 阅读量 149

最后更新于 2019年11月02日

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

jQ插件-jqzoom图片放大镜 入门基础
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao