一種基于移動端瀏覽器跨平臺人機(jī)交互瀏覽圖片的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及瀏覽器技術(shù)領(lǐng)域，尤其涉及一種基于移動端瀏覽器跨平臺人機(jī)交互瀏覽圖片的方法。
【背景技術(shù)】
[0002]目前在移動終端設(shè)備上已有很多種瀏覽圖片的方式，比如針對一張圖片，利用移動設(shè)備自帶的多點(diǎn)觸控技術(shù)對圖片進(jìn)行放大或縮小、或通過手勢操作，根據(jù)操作者手勢滑動方向?qū)D片進(jìn)行左右移動，從而瀏覽多張圖片。但是這些操作方式出來的視覺效果要么固化在同一個(gè)系統(tǒng)中，要么僅限于某一種平臺，即使是能跨平臺，但實(shí)現(xiàn)效果和系統(tǒng)自帶的效果差別不大，隨著近幾年社交網(wǎng)絡(luò)的飛速發(fā)展，越來越多的人喜歡把自己喜愛的照片通過網(wǎng)絡(luò)分享到各個(gè)社交應(yīng)用，其他的用戶則通過瀏覽器查看這些圖片。但在瀏覽器上查看照片的方式一般比較單一，比如現(xiàn)有的將所有的照片在瀏覽器頁面上進(jìn)行固定的方法，用戶通過滾動鼠標(biāo)的方式實(shí)現(xiàn)逐一瀏覽，或者通過感知用戶的手指滑動將照片逐一顯示在移動終端的顯示屏上，這樣的瀏覽方式中圖片的大小都是固定不變的，不管是向上滑動還是向下滑動，每個(gè)圖都以原始保存的大小顯示在顯示屏上，這樣的方法很顯然無法提高用戶圖片觀看的體驗(yàn)。

【發(fā)明內(nèi)容】

[0003]針對現(xiàn)有技術(shù)中的圖片瀏覽方法用戶使用體驗(yàn)不佳的技術(shù)問題，本發(fā)明公開了一種基于移動端瀏覽器跨平臺人機(jī)交互瀏覽圖片的方法。
[0004]本發(fā)明的發(fā)明目的通過下述技術(shù)方案來實(shí)現(xiàn):
一種基于移動端瀏覽器跨平臺人機(jī)交互瀏覽圖片的方法，其具體包括以下的步驟:步驟一、獲取需要瀏覽的圖片；步驟二、獲取需要瀏覽的第一張圖片的寬度、高度以及當(dāng)前使用的移動端的顯示屏顯示區(qū)的寬度和高度，以顯示屏顯示區(qū)的寬度和高度為基礎(chǔ)，將圖片進(jìn)行放大或者縮小，使得圖片充滿整個(gè)顯示屏顯示區(qū)；步驟三、屏幕接收手指或者其他觸控在屏幕上的滑動后，根據(jù)手指的移動方向和距離計(jì)算出下一張需要顯示的圖片，并隨著手指或者其他觸控在屏幕上的滑動，逐漸將下一張需要顯示的圖片拖行到顯示屏的顯示區(qū)，下一張圖片同樣以顯示屏顯示區(qū)的寬度和高度為基礎(chǔ)，將圖片進(jìn)行移動，使得第二張圖片逐漸充滿整個(gè)顯示屏顯示區(qū)，而上一張圖片則逐漸等比例縮小，直到下一張需要顯示的圖片布滿整個(gè)顯示屏的顯示區(qū)。
[0005]更進(jìn)一步地，上述逐漸將下一張需要顯示的圖片拖行到顯示屏的顯示區(qū)的具體過程為:設(shè)定第一張圖片縮放后正好鋪滿整個(gè)顯示屏顯示區(qū)，則第一張圖片的四個(gè)角的坐標(biāo)和顯示屏顯示區(qū)四個(gè)角的坐標(biāo)相同，都是:(0，0)，(w, O), (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í)針方向分別為:(O, h-offsetY), (w, h-offsetY)，(w, h*變化系數(shù)-offsetY), (O, h*變化系數(shù)-offsetY);其中scale為縮放系數(shù)，offsetY表示滑動距離。
[0006]更進(jìn)一步地，上述變化系數(shù)為2。
[0007]更進(jìn)一步地，上述獲取圖片的寬度和高度的方式具體為利用javascript中Image對象設(shè)置其src為圖片的地址，然后根據(jù)對應(yīng)接口計(jì)算圖片的寬度和高度。
[0008]更進(jìn)一步地，上述獲取圖片的寬度和高度的方式具體為在服務(wù)器保存該圖片時(shí)就記錄下當(dāng)前圖片的寬度和高度，在移動端請求此圖片數(shù)據(jù)時(shí)，一并將此部分?jǐn)?shù)據(jù)發(fā)送給移動端。
[0009]更進(jìn)一步地，上述需要瀏覽的圖片為堆疊模式。
[0010]更進(jìn)一步地，上述堆疊模式是指屏幕上顯示第一張圖片，其余的圖片逐一堆疊，最下層的圖片被次下層的圖片所覆蓋，依次類推，……，第二張圖片被第一張圖片所覆蓋。
[0011]更進(jìn)一步地，采用層疊樣式表CSS將圖片設(shè)置為堆疊模式。
[0012]更進(jìn)一步地，上述獲取需要瀏覽的圖片的具體實(shí)現(xiàn)的過程為:使用超級文本標(biāo)記語言html中的div標(biāo)簽來實(shí)現(xiàn)瀏覽圖片的獲取，首先設(shè)置瀏覽器的background-1mage屬性地址為需要瀏覽的圖片地址，并設(shè)置瀏覽器的background-size屬性為100%，使圖片根據(jù)div標(biāo)簽的大小自動縮放至相應(yīng)大小，并利用層疊樣式表css將圖片設(shè)置為堆疊模式。
[0013]通過采用以上技術(shù)方案，本發(fā)明的有益效果是:本發(fā)明通過將圖片進(jìn)行縮放以適應(yīng)顯示屏顯示區(qū)的大小，并在交互的過程中將上一張圖片進(jìn)行縮放，使得凸顯下一張即將顯示的圖片，從而實(shí)現(xiàn)了各種圖片(比如照片)通過瀏覽器實(shí)現(xiàn)跨平臺的完美呈現(xiàn)，提高了用戶的使用體驗(yàn)，最終實(shí)現(xiàn)出一種視差效果，提高了用戶的使用滿意度。
【附圖說明】
[0014]圖1為一張圖片布彳兩整個(gè)顯不屏顯不區(qū)的不意圖。
[0015]圖2為第二張圖片拖行了一部分到顯示屏顯示區(qū)的示意圖。
【具體實(shí)施方式】
[0016]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合具體實(shí)施例，對本發(fā)明進(jìn)行進(jìn)一步詳細(xì)的說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0017]一種基于移動端瀏覽器跨平臺人機(jī)交互瀏覽圖片的方法，其具體包括以下的步驟:
步驟一、獲取需要瀏覽的圖片，所述需要瀏覽的圖片為堆疊模式(比如呈現(xiàn)出的整體效果就像一幅撲克牌整齊的堆疊在桌上，觀察者在其上方觀看只能看到最上面的一張撲克，要想看到下一張的撲克需要抽離第一張撲克)，所述堆疊模式是指屏幕上顯示第一張圖片，其余的圖片逐一堆疊，最下層的圖片被次下層的圖片所覆蓋，依次類推，……，第二張圖片被第一張圖片所覆蓋，當(dāng)然此處圖片的后臺存放模式也可以是其他的模式，而不限于堆疊模式，只要第一張圖片覆蓋掉其他未顯示的后臺圖片就可以。其獲取需要瀏覽的圖片的具體實(shí)現(xiàn)的過程為:使用超級文本標(biāo)記語言html中的div標(biāo)簽來實(shí)現(xiàn)瀏覽圖片的獲取，首先設(shè)置瀏覽器的background-1mage屬性地址為需要瀏覽的圖片地址，并設(shè)置瀏覽器的background-size屬性為100%，以便圖片根據(jù)div標(biāo)簽的大小自動縮放至相應(yīng)大小，并利用層疊樣式表css將圖片設(shè)置為堆疊模式。
[0018]步驟二、獲取需要瀏覽的第一張圖片的寬度、高度以及當(dāng)前使用的移動端的顯示屏顯示區(qū)的寬度和高度，以顯示屏顯示區(qū)的寬度和高度為基礎(chǔ)，將圖片進(jìn)行放大或者縮小，使得圖片充滿整個(gè)顯示屏顯示區(qū)。獲取圖片的寬度和高度可以利用javascript中Image對象設(shè)置其src為圖片的地址，然后根據(jù)對應(yīng)接口計(jì)算圖片的寬度和高度?；蛘叻?wù)端在存儲圖片時(shí)就記錄下當(dāng)前圖片的寬度和高度，在移動端請求此圖片數(shù)據(jù)時(shí)，一并將此部分?jǐn)?shù)據(jù)發(fā)送給移動終端。
[0019]有了原始圖片的寬度和高度，此時(shí)再得到移動端顯示屏顯示區(qū)的寬度和高度，就可以以顯示屏顯示區(qū)的寬度和高度為基準(zhǔn)將圖片進(jìn)行放大或者縮小，將圖片進(jìn)行等比縮放使之充滿整個(gè)顯示屏幕。以圖片的寬度縮放到移動端顯示屏顯示區(qū)的寬度為例，圖片高度的計(jì)算公式為:最終圖片顯示高度=顯示屏顯示區(qū)寬度/圖片原始寬度*圖片原始高度。
[0020]如圖1所示的一張圖片布滿整個(gè)顯示屏顯示區(qū)的示意圖。圖片的四個(gè)角正好與顯示屏顯示區(qū)的四個(gè)角重合，以屏幕的左上角為坐標(biāo)原點(diǎn)(0，O)，按照順時(shí)針方向，依次得出顯示屏顯示區(qū)四個(gè)角的坐標(biāo)分別為:(0，O), (W，O), (w，h), (0，h)，其中w表示顯示屏顯示區(qū)的寬度width，h表示顯示屏顯示區(qū)的高度high。假設(shè)第一張圖片縮放后正好鋪滿整個(gè)顯示屏顯示區(qū)，則第一張圖片的四個(gè)角的坐標(biāo)和顯示屏顯示區(qū)四個(gè)角的坐標(biāo)相同，也是:(0，0)，(w, O), (w, h), (O, h) ο此時(shí)可以設(shè)置第二張圖片的四個(gè)角的坐標(biāo)，如果第二張圖片縮放后也正好可以滿整個(gè)顯示屏顯示區(qū)，則第二張圖片的坐標(biāo)可以分別(0,h), (w, h), (w，h*2)，(0，h*2)，即第二張圖片位于第一張圖片的下方。
[0021]其余圖片的四個(gè)角的坐標(biāo)均為:(0，O)，(w, O), (w, h), (0，h)，即和第一張圖片的坐標(biāo)相同，但因?yàn)槭嵌询B放置，其均會被第一張圖片所覆蓋。第二張圖片雖然沒有被覆蓋，但因?yàn)槠渥鴺?biāo)超出了顯示屏顯示的范圍，因此操作者也是看不到的。
[0022]步驟三、屏幕接收手指或者其他觸控在屏幕上的滑動后，根據(jù)手指的移動方向和距離計(jì)算出下一張需要顯示的圖片，并隨著手指或者其他觸控在屏幕上的滑動，逐漸將下一張需要顯示的圖片拖行到顯示屏