时间戳

首页 > 解决方案 > 缩放小于 div 尺寸的图像并使用 jQuery Zoom 指定缩放范围

javascript - 缩放小于 div 尺寸的图像并使用 jQuery Zoom 指定缩放范围

问题描述

我正在尝试在图像上构建缩放功能。为此，我使用的是Jquery Zoom，脚本很简单：

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

这有两个问题：

  1. 虽然这适用于大于封闭 div 尺寸的图像，但它不适用于小于 div 尺寸的图像。理想情况下，我希望无论图像尺寸如何，图像都会缩放。
  2. 目前，无法控制缩放范围。我希望图像底部可能有 + 和 - 按钮（类似这样），让用户可以控制缩放比例，同时显示当前缩放百分比。

我在这里制作了我的案例的代码笔：https ://codepen.io/anon/pen/gJEdxm

这两个变化应该如何实现？我是 Javascript 的新手，所以不确定这会如何解决。阅读文档，我发现可以指定缩放百分比（magnify属性）。是否有某种方式可以从 UI 中放大输入？

标签： javascriptjqueryhtmlzooming

解决方案

推荐阅读