投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 图片相册背景 / jQuery lightzoom.js图片放大镜特效插件
jQuery lightzoom.js图片放大镜特效插件
标签:

插件介绍

    lightzoom.js是一款jQuery图片放大镜插件。lightzoom.js图片放大镜的特点是使用CSS来放大图片,这样不会去加载大图片。该图片放大镜甚至能放大gif动态图片。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-23
    阅读:

jQuery lightzoom.js图片放大镜特效插件

简要教程

lightzoom.js是一款jQuery图片放大镜插件。lightzoom.js图片放大镜的特点是使用CSS来放大图片,这样不会去加载大图片。该图片放大镜甚至能放大gif动态图片。

使用方法

在页面引入以下jquery-1.11.0.min.js、lightzoom.js文件

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="js/lightzoom.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
          $('img.light-zoom').lightzoom({
              zoomPower   : 3,    //Default
              glassSize   : 180,  //Default
          });
      });
</script>

HTML结构

<div class="htmleaf-container">
    <header class="htmleaf-header">
        <h1>jQuery图片放大镜插件lightzoom.js <span>Light-Zoom : jQuery Zoom Image Plugin</span></h1>
    </header>
    <div class="htmleaf-content">
        <h3 class="center">gif图片</h3>
        <img src="img/1.gif" class="light-zoom" width="200px" height="200px"  alt="">
        <br>
        <h3 class="center">PNG图片</h3>
        <img class="light-zoom" width="609px" height="297px" src="img/adobe_text_rendering.png">
    </div>
</div>