插件 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/


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>