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

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

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