• 缩放
    • options.zoom
    • options.zoomMax
    • options.zoomMin
    • options.zoomStart
    • options.wheelAction
    • zoom(scale, x, y, time)

    缩放

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

    options.zoom

    此属性设置为true启用缩放功能。

    默认值:false

    options.zoomMax

    最大缩放级数。

    默认值:4

    options.zoomMin

    最小缩放级数。

    默认值:1

    options.zoomStart

    初始的缩放级数。

    默认值:1

    options.wheelAction

    鼠标滚轮的动作可以设置为'zoom',这样在滚动滚轮时缩放操作会代替原来的滚动操作。

    默认值:undefined(即:鼠标滚轮滚动)

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

    1. myScroll = new IScroll('#wrapper', {
    2. zoom: true,
    3. mouseWheel: true,
    4. wheelAction: 'zoom'
    5. });

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

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

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

    请参考 缩放示例。

    zoom(scale, x, y, time)

    一个有意思的的方法,能让你进行缩放编程。

    scale是缩放因子。

    xy是缩放关注点,即缩放的中心。如果没有指定,这个中心就是屏幕中心。

    time is the duration of the animation in milliseconds (optional).
    time是毫秒级别的动画周期(可选项)。