iscroll缩放

最新推荐文章于 2022-07-01 15:57:42 发布

hello_dashen

最新推荐文章于 2022-07-01 15:57:42 发布

阅读量828

点赞数

本文链接：https://blog.csdn.net/weixin_42235173/article/details/90896524

版权

缩放

为了使用缩放功能，你最好使用iscroll-zoom.js脚本。

options.zoom

此属性设置为true启用缩放功能。
默认值：false

options.zoomMax

最大缩放级数。
默认值：4

options.zoomMin

最小缩放级数。
默认值：1

options.zoomStart

初始的缩放级数。
默认值：1

options.wheelAction

鼠标滚轮的动作可以设置为zoom，这样在滚动滚轮时缩放操作会代替原来的滚动操作。
默认值：undefined（即：鼠标滚轮滚动）

和前面的示例一样，一个好的缩放功能的配置如下：

myScroll = new IScroll(‘#wrapper‘, {
    zoom: true,
    mouseWheel: true,
    wheelAction: ‘zoom‘
});

缩放功能使用的CSS的转换功能。iScroll只能在支持此CSS功能的浏览器上执行。

一些浏览器（特别是基于webkit的）采取的快照缩放区域就放在硬件合成层(比如当你申请转换)。该快照作为纹理的缩放区域,它几乎不能被更新。这意味着您的纹理将基于
scale 1 进行缩放,将导致文本和图像模糊,清晰度低。

一个简单的解决方案是使用实际分辨率双倍（或者三倍）装载内容，然后
放到一个按照scale(0.5)比例缩小的div中。这种方法大多数情况下能适用。

zoom(scale, x, y, time)

一个有意思的的方法，能让你进行缩放编程。
scale是缩放因子。
x 和 y是缩放关注点，即缩放的中心。如果没有指定，这个中心就是屏幕中心。
time是毫秒级别的动画周期（可选项）。

关注