阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.zoom 中文API文档

      插件 jQuery.zoom 中文API文档 https://github.com/jackmoore/zoom

      一个小的jQuery插件,用于在mouseover或mousedown上缩放图像。

      兼容:Chrome,Firefox,Safari,Opera,Internet Explorer 7+中的jQuery 1.7+。

      通过NPM安装

      npm install jquery-zoom
      

      说明

      变焦追加的html它被分配给元件内部,使得元件必须能够接受HTML一样<a>,<span>,<li>,<div>等,这不包括<img>元件(见下文)。

      // Example:
      $(document).ready(function(){
        $('a.photo').zoom({url: 'photo-big.jpg'});
      });
      
      // Using Colorbox with Zoom
      $(document).ready(function(){
        $('a.photo').zoom({
          url: 'photo-big.jpg', 
          callback: function(){
            $(this).colorbox({href: this.src});
          }
        });
      });
      

      要对img元素使用缩放,需要使用其他元素进行包装。从JavaScript(基于百分比的宽度和高度,设置为自动的边距等)读取一些与布局相关的CSS样式是不可能的,因此安全的做法是将此更改推迟到各个站点所有者。以下是在某些情况下所需的全部内容:

      $(document).ready(function(){
        $('img')
          .wrap('<span style="display:inline-block"></span>')
          .css('display', 'block')
          .parent()
          .zoom();
      });
      

      删除缩放

      触发zoom.destroy事件以从元素中删除缩放:

      $('#example').zoom(); // add zoom
      $('#example').trigger('zoom.destroy'); // remove zoom
      

      演示:http://www.jacklmoore.com/zoom/

      目录
      本文目录
      目录