為了使用縮放功能,你最好使用iscroll-zoom.js腳本。
此屬性設(shè)置為true啟用縮放功能。
默認(rèn)值:false
最大縮放級數(shù)。
默認(rèn)值:4
最小縮放級數(shù)。
默認(rèn)值:1
初始的縮放級數(shù)。
默認(rèn)值:1
鼠標(biāo)滾輪的動作可以設(shè)置為'zoom',這樣在滾動滾輪時縮放操作會代替原來的滾動操作。
默認(rèn)值:undefined(即:鼠標(biāo)滾輪滾動)
和前面的示例一樣,一個好的縮放功能的配置如下:
myScroll = new IScroll('#wrapper', {
zoom: true,
mouseWheel: true,
wheelAction: 'zoom'
});
縮放功能使用的CSS的轉(zhuǎn)換功能。iScroll只能在支持此CSS功能的瀏覽器上執(zhí)行。
一些瀏覽器(特別是基于webkit的)采取的快照縮放區(qū)域就放在硬件合成層(比如當(dāng)你申請轉(zhuǎn)換)。該快照作為紋理的縮放區(qū)域,它幾乎不能被更新。這意味著您的紋理將基于 scale 1 進(jìn)行縮放,將導(dǎo)致文本和圖像模糊,清晰度低。
一個簡單的解決方案是使用實際分辨率雙倍(或者三倍)裝載內(nèi)容,然后 放到一個按照
scale(0.5)比例縮小的div中。這種方法大多數(shù)情況下能適用。
請參考 縮放示例。
一個有意思的的方法,能讓你進(jìn)行縮放編程。
scale是縮放因子。
x 和 y是縮放關(guān)注點(diǎn),即縮放的中心。如果沒有指定,這個中心就是屏幕中心。
time is the duration of the animation in milliseconds (optional).
time是毫秒級別的動畫周期(可選項)。