夏目友人帐.
30/03/2018 作品
27/03/2018 友人
27/03/2018 关于

基于jQuery ,Gzip后不足 1kb 的响应式极简灯箱插件

ViewImage.js

基于jQuery ,Gzip后不足 1kb 的响应式极简灯箱插件

获取

你可以直接访问ViewImage的 GitHub 来获取最新版插件,当然你也可以通过下面的链接下载ViewImage:

view-image.js or view-image.min.js

引用

首先确保你的页面已经正确引用jQuery(建议2.0+),然后再引用ViewImage.js。

<script src="//tokinx.github.io/ViewImage/view-image.min.js"></script>

启用

我们为您提供了非常简便的初始化方法,方便您对程序进行一些个性化设置并正确启用

<script>
    jQuery(document).ready(function () {
        jQuery.viewImage({
            'target' : '.view-image img', //需要使用ViewImage的图片
            'exclude': '.exclude img',    //要排除的图片
            'delay'  : 300                //延迟时间
        });
    });
</script>

示例 https://tokinx.github.io/ViewImage/#id-demo

我们提供了几个DEMO,方便您进一步了解ViewImage

    <script>
        jQuery(document).ready(function () {
            jQuery.viewImage({
                'target': '.view-image img,.view-image2 a,.view-image3 a',
                'exclude': '.exc',
                'delay': 300
            });
        });
    </script>

[图片]

    <ul class="view-image">
        <li><img src="原图"></li>
        <li><img src="原图"></li>
        <li><img src="原图"></li>
        <li><img src="原图" class="exc"></li>
    </ul>

[链接] + [文字]

    <ul class="view-image2">
        <li><a href="原图">可用</a></li>
        <li><a href="原图" class="exc">不可用</a></li>
    </ul>

[链接] + [缩略图]

    <ul class="view-image3">
        <li><a href="原图"><img src="缩略图 或 原图"></a></li>
        <li><a href="原图" class="exc"><img src="缩略图 或 原图"></a></li>
    </ul>

文章作者:Tokinx

原文链接:https://github.com/Tokinx/ViewImage

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


已有 19 条评论


  1. 老莫

    最近技术博玩的很多阿

    老莫  2018年9月20日回复
    1. 夏目贵志

      最开始玩博客人都是程序员写关于技术这方面的,一直都很多 2333

      夏目贵志 admin 2018年10月2日回复
  2. 女生游戏

    很好,这是加截图片另一种实用的方式

    女生游戏  2018年9月19日回复
  3. ohmyga

    看不懂JS,博主厉害qwq

    ohmyga  2018年9月16日回复
  4. 啊灰

    膜拜大神!只能看懂CSS看不懂JS

    啊灰  2018年9月15日回复
    1. 夏目贵志

      我也是小白,一起加油吧~

      夏目贵志 admin 2018年9月16日回复
  5. Ryan

    关键是JQ大啊

    Ryan  2018年9月14日回复
    1. 夏目贵志

      我也是这么感觉的,所以网站没有添加。。

      夏目贵志 admin 2018年9月15日回复
  6. 子午

    你的博客主题越来越精致了,看着舒服不少。

    子午  2018年9月14日回复
    1. 夏目贵志

      我想更简单点 就是自己一直不满意

      现在这主题是typecho作者 哪里仿的 。。

      夏目贵志 admin 2018年9月15日回复
  7. 广树

    膜拜大佬~

    广树  2018年9月14日回复
    1. 夏目贵志

      不不不 你才是大佬

      夏目贵志 admin 2018年9月15日回复
  8. 汽修软件

    不太懂技术这块,但是看起来很厉害

    汽修软件  2018年9月14日回复
    1. 夏目贵志

      我也是小白,一起加油~

      夏目贵志 admin 2018年9月15日回复
  9. 挖站否

    有空试试这个

    挖站否  2018年9月12日回复
    1. 夏目贵志

      期待

      夏目贵志 admin 2018年9月13日回复
  10. 夏目贵志

    评论@功能用了插件

    https://github.com/typecho-fans/plugins/tree/master/At

    夏目贵志 admin 2018年9月12日回复
    1. 逗总

      在此谢过!

      逗总  2018年9月12日回复
      1. 夏目贵志

        不客气~

        夏目贵志 admin 2018年9月13日回复

发表新评论


最后更新于 2018 年 09 月 08 日.
Contact me at lvchuanxing@gmail.com. 回到顶部