[發(fā)明專利]一種基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法

有效

• 申請(qǐng)?zhí)枺?/td>: 201510094889.9
• 申請(qǐng)日: 2015-03-04
• 公開（公告）號(hào): CN104679432B
• 公開（公告）日: 2018-01-30
• 發(fā)明（設(shè)計(jì)）人: 唐雷
• 申請(qǐng)（專利權(quán)）人: 成都品果科技有限公司
• 主分類號(hào): G06F3/0488
• 分類號(hào): G06F3/0488;G06F3/0484
• 代理公司: 成都九鼎天元知識(shí)產(chǎn)權(quán)代理有限公司51214
• 代理人: 袁春曉

1.一種基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其具體包括以下的步驟：步驟一、獲取需要瀏覽的圖片；步驟二、獲取需要瀏覽的第一張圖片的寬度、高度以及當(dāng)前使用的移動(dòng)端的顯示屏顯示區(qū)的寬度和高度，以顯示屏顯示區(qū)的寬度和高度為基礎(chǔ)，將圖片進(jìn)行放大或者縮小，使得圖片充滿整個(gè)顯示屏顯示區(qū)；步驟三、屏幕接收手指或者其他觸控在屏幕上的滑動(dòng)后，根據(jù)手指的移動(dòng)方向和距離計(jì)算出下一張需要顯示的圖片的尺寸和位置，并隨著手指或者其他觸控在屏幕上的滑動(dòng)，逐漸將下一張需要顯示的圖片拖行到顯示屏的顯示區(qū)，下一張圖片同樣以顯示屏顯示區(qū)的寬度和高度為基礎(chǔ)，將圖片進(jìn)行移動(dòng)，使得第二張圖片逐漸充滿整個(gè)顯示屏顯示區(qū)，而上一張圖片則逐漸等比例縮小，直到下一張需要顯示的圖片布滿整個(gè)顯示屏的顯示區(qū)，所述逐漸將下一張需要顯示的圖片拖行到顯示屏的顯示區(qū)的具體過程為：設(shè)定第一張圖片縮放后正好鋪滿整個(gè)顯示屏顯示區(qū)，則第一張圖片的四個(gè)角的坐標(biāo)和顯示屏顯示區(qū)四個(gè)角的坐標(biāo)相同，都是:(0,0),(w,0),(w,h),(0,h)；第二張圖片的坐標(biāo)分別(0,h),(w,h),(w,h*2),(0,h*2)；在第二張圖片的拖行過程中，第一張圖片的四個(gè)角的坐標(biāo)在順時(shí)針方向分別為：(offsetY/scale*變化系數(shù),-offsetY/scale*變化系數(shù)),(w-offsetY/scale*變化系數(shù),-offsetY/scale*變化系數(shù)),(w-offsetY/scale*變化系數(shù),h-offsetY/scale*變化系數(shù)),(offsetY/scale*變化系數(shù),h-offsetY/scale*變化系數(shù))，第二張圖片四個(gè)角的坐標(biāo)在順時(shí)針方向分別為： (0,h-offsetY),(w,h-offsetY),(w,h*變化系數(shù)-offsetY),(0,h*變化系數(shù)-offsetY)；其中scale為縮放系數(shù)，offsetY表示滑動(dòng)距離，w表示顯示屏顯示區(qū)的寬度，h表示顯示屏顯示區(qū)的高度，所述變化系數(shù)小于縮放系數(shù)。

2.如權(quán)利要求1所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述變化系數(shù)為2。

3.如權(quán)利要求1或者2所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述獲取圖片的寬度和高度的方式具體為利用javascript中Image對(duì)象設(shè)置其src為圖片的地址，然后根據(jù)對(duì)應(yīng)接口計(jì)算圖片的寬度和高度。

4.如權(quán)利要求1或者2所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述獲取圖片的寬度和高度的方式具體為在服務(wù)器保存該圖片時(shí)就記錄下當(dāng)前圖片的寬度和高度，在移動(dòng)端請(qǐng)求此圖片數(shù)據(jù)時(shí)，一并將此部分?jǐn)?shù)據(jù)發(fā)送給移動(dòng)端。

5.如權(quán)利要求1或者2所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述需要瀏覽的圖片為堆疊模式。

6.如權(quán)利要求5所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述堆疊模式是指屏幕上顯示第一張圖片，其余的圖片逐一堆疊，最下層的圖片被次下層的圖片所覆蓋，依次類推，第二張圖片被第一張圖片所覆蓋。

7.如權(quán)利要求5所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于采用層疊樣式表css將圖片設(shè)置為堆疊模式。

8.如權(quán)利要求1或者2所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述獲取需要瀏覽的圖片的具體實(shí)現(xiàn)的過程為：使用超級(jí)文本標(biāo)記語(yǔ)言html中的div標(biāo)簽來(lái)實(shí)現(xiàn)瀏覽圖片的獲取，首先設(shè)置瀏覽器的background-image屬性地址為需要瀏覽的圖片地址，并設(shè)置瀏覽器的background-size屬性為100%，使圖片根據(jù)div標(biāo)簽的大小自動(dòng)縮放至相應(yīng)大小，并利用層疊樣式表css將圖片設(shè)置為堆疊模式。