[發明專利]一種基于移動端瀏覽器跨平臺人機交互瀏覽圖片的方法

有效

• 申請號: 201510094889.9
• 申請日: 2015-03-04
• 公開（公告）號: CN104679432B
• 公開（公告）日: 2018-01-30
• 發明（設計）人: 唐雷
• 申請（專利權）人: 成都品果科技有限公司
• 主分類號: G06F3/0488
• 分類號: G06F3/0488;G06F3/0484
• 代理公司: 成都九鼎天元知識產權代理有限公司51214
• 代理人: 袁春曉

技術領域

本發明涉及瀏覽器技術領域，尤其涉及一種基于移動端瀏覽器跨平臺人機交互瀏覽圖片的方法。

背景技術

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

發明內容

針對現有技術中的圖片瀏覽方法用戶使用體驗不佳的技術問題，本發明公開了一種基于移動端瀏覽器跨平臺人機交互瀏覽圖片的方法。

本發明的發明目的通過下述技術方案來實現：

一種基于移動端瀏覽器跨平臺人機交互瀏覽圖片的方法，其具體包括以下的步驟：步驟一、獲取需要瀏覽的圖片；步驟二、獲取需要瀏覽的第一張圖片的寬度、高度以及當前使用的移動端的顯示屏顯示區的寬度和高度，以顯示屏顯示區的寬度和高度為基礎，將圖片進行放大或者縮小，使得圖片充滿整個顯示屏顯示區；步驟三、屏幕接收手指或者其他觸控在屏幕上的滑動后，根據手指的移動方向和距離計算出下一張需要顯示的圖片的尺寸和位置，并隨著手指或者其他觸控在屏幕上的滑動，逐漸將下一張需要顯示的圖片拖行到顯示屏的顯示區，下一張圖片同樣以顯示屏顯示區的寬度和高度為基礎，將圖片進行移動，使得第二張圖片逐漸充滿整個顯示屏顯示區，而上一張圖片則逐漸等比例縮小，直到下一張需要顯示的圖片布滿整個顯示屏的顯示區。

更進一步地，上述逐漸將下一張需要顯示的圖片拖行到顯示屏的顯示區的具體過程為：設定第一張圖片縮放后正好鋪滿整個顯示屏顯示區，則第一張圖片的四個角的坐標和顯示屏顯示區四個角的坐標相同，都是:(0,0),(w,0),(w,h),(0,h)；第二張圖片的坐標分別(0,h),(w,h),(w,h*2),(0,h*2)；在第二張圖片的拖行過程中，第一張圖片的四個角的坐標在順時針方向分別為：(offsetY/scale*變化系數,-offsetY/scale*變化系數),(w-offsetY/scale*變化系數,-offsetY/scale*變化系數),(w-offsetY/scale*變化系數,h-offsetY/scale*變化系數),(offsetY/scale*變化系數,h-offsetY/scale*變化系數)，第二張圖片四個角的坐標在順時針方向分別為： (0,h-offsetY),(w,h-offsetY),(w,h*變化系數-offsetY),(0,h*變化系數-offsetY)；其中scale為縮放系數，offsetY表示滑動距離。

更進一步地，上述變化系數為2。

更進一步地，上述獲取圖片的寬度和高度的方式具體為利用javascript中Image對象設置其src為圖片的地址，然后根據對應接口計算圖片的寬度和高度。

更進一步地，上述獲取圖片的寬度和高度的方式具體為在服務器保存該圖片時就記錄下當前圖片的寬度和高度，在移動端請求此圖片數據時，一并將此部分數據發送給移動端。

更進一步地，上述需要瀏覽的圖片為堆疊模式。

更進一步地，上述堆疊模式是指屏幕上顯示第一張圖片，其余的圖片逐一堆疊，最下層的圖片被次下層的圖片所覆蓋，依次類推，……，第二張圖片被第一張圖片所覆蓋。

更進一步地，采用層疊樣式表css將圖片設置為堆疊模式。

更進一步地，上述獲取需要瀏覽的圖片的具體實現的過程為：使用超級文本標記語言html中的div標簽來實現瀏覽圖片的獲取，首先設置瀏覽器的background-image屬性地址為需要瀏覽的圖片地址，并設置瀏覽器的background-size屬性為100%，使圖片根據div標簽的大小自動縮放至相應大小，并利用層疊樣式表css將圖片設置為堆疊模式。