的顯示區(qū)，下一張圖片同樣以顯示屏顯示區(qū)的寬度和高度為基礎(chǔ)，將圖片進(jìn)行放大或者縮小，使得圖片充滿整個(gè)顯示屏顯示區(qū)，而上一張圖片則逐漸還原到圖片原始大小，直到下一張需要顯示的圖片布滿整個(gè)顯示屏的顯示區(qū)。
[0023]假設(shè)將縮放系數(shù)設(shè)定為5，手指的滑動(dòng)距離offsetY假設(shè)為100個(gè)像素。則在兩張圖片交互的過(guò)程中，
針對(duì)第一張圖片:
〃top〃:offsetY/scale*2，〃left〃:offsetY/scale*2, 〃width〃:w-offsetY/scale, 〃height〃:h_offsetY/scale ;其中〃top〃是指圖片的上邊界到顯示屏顯示區(qū)上邊界的距離；〃left〃是指圖片的左邊界到顯示屏顯示區(qū)左邊界的距離；〃width〃是指圖片縮放后的寬度；"height"是指圖片縮放后的高度。
[0024]針對(duì)第二張圖片:
“top〃:h_ offsetY, 〃left〃:0, 〃width〃:w, 〃height〃:h ;其中 “top"是指圖片的上邊界到顯示屏顯示區(qū)上邊界的距離；〃left〃是指圖片的左邊界到顯示屏顯示區(qū)左邊界的距離，即左邊是布滿了整個(gè)屏幕顯示區(qū)的；〃width〃是指圖片縮放后的寬度，正好等于顯示屏顯示區(qū)的寬度；"height 〃是指圖片縮放后的高度，正好等于顯示屏顯示區(qū)的高度。
[0025]如圖2所示的第二張圖片被向上拖行了一部分后的示意圖，其中第二張圖片的大小不變，仍保持與顯示屏顯示區(qū)大小一致，向上拖行后，第二張圖片覆蓋在第一張圖片上面，顯示屏顯示區(qū)的上半部分顯示第一張圖片，顯示屏顯示屏顯示區(qū)的下半部分顯示第二張圖片，而在這個(gè)第二張圖片逐漸覆蓋第一張圖片的過(guò)程中，第一張圖片逐漸縮小，直到第二張圖片完全覆蓋整個(gè)顯示屏的顯示區(qū)，此時(shí)笫二張圖片的與顯示屏的顯示區(qū)重合，顯示屏的顯示區(qū)回到如圖1所示的界面。
[0026]那么，在第二張圖片的拖行過(guò)程中，第一張圖片的四個(gè)角的坐標(biāo)(順時(shí)針)分別為:
(offsetY/scale*2,-offsetY/scale*2) , (w-offsetY/scale*2,-offsetY/scale*2), (w-offsetY/scale*2, h-offsetY/scale*2), (offsetY/scale*2, h-offsetY/scale*2)，第二張圖片四個(gè)角的坐標(biāo)(順時(shí)針)分別為:(0，h-offsetY)，(w, h-offsetY)，(w, h*2_offsetY)，(0，h*2_offsetY);其中 scale 為縮放系數(shù)，offsetY 表示滑動(dòng)距離，2為任意設(shè)定的一個(gè)表征圖片變化快慢的值，表征圖片變化快慢的值要小于scale，即如果scale為5，那么這個(gè)值應(yīng)大于O并小于5。
[0027]當(dāng)?shù)诙垐D片拖行了一部分時(shí)，如果操作者在此過(guò)程中停止交互(比如手指離開屏幕)，則根據(jù)offsetY來(lái)計(jì)算，如果offsetY大于一定閾值(比如閾值可以可以設(shè)定為100像素)則認(rèn)為是要翻到下一張圖片，那么第一張圖片和第二張圖片的最終值為:第一張圖片的四個(gè)角的坐標(biāo)為(0，_h)，(w, -h), (w, 0), (0，0)，第二張圖片的四個(gè)角的坐標(biāo)為(O, 0)，(W，0)，(w，h)，(O, h) O
[0028]如果offsetY小于100那么第一張和第二張圖片分別回滾到之前的值，后續(xù)圖片計(jì)算過(guò)程依次類推。
[0029]上述說(shuō)明示出并描述了本發(fā)明的一個(gè)優(yōu)選實(shí)施例，但如前所述，應(yīng)當(dāng)理解本發(fā)明并非局限于本文所披露的形式，不應(yīng)看作是對(duì)其他實(shí)施例的排除，而可用于各種其他組合、修改和環(huán)境，并能夠在本文所述發(fā)明構(gòu)想范圍內(nèi)，通過(guò)上述教導(dǎo)或相關(guān)領(lǐng)域的技術(shù)或知識(shí)進(jìn)行改動(dòng)。而本領(lǐng)域人員所進(jìn)行的改動(dòng)和變化不脫離本發(fā)明的精神和范圍，則都應(yīng)在本發(fā)明所附權(quán)利要求的保護(hù)范圍內(nèi)。
【主權(quán)項(xiàng)】
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ū)。
2.如權(quán)利要求1所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述逐漸將下一張需要顯示的圖片拖行到顯示屏的顯示區(qū)的具體過(guò)程為:設(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);在第二張圖片的拖行過(guò)程中，第一張圖片的四個(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表示滑動(dòng)距離，w表示顯示屏顯示區(qū)的寬度，h表示顯示屏顯示區(qū)的高度，所述變化系數(shù)小于縮放系數(shù)。
3.如權(quán)利要求2所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述變化系數(shù)為2。
4.如權(quán)利要求1或者3所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述獲取圖片的寬度和高度的方式具體為利用javascript中Image對(duì)象設(shè)置其src為圖片的地址，然后根據(jù)對(duì)應(yīng)接口計(jì)算圖片的寬度和高度。
5.如權(quán)利要求1或者3所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述獲取圖片的寬度和高度的方式具體為在服務(wù)器保存該圖片時(shí)就記錄下當(dāng)前圖片的寬度和高度，在移動(dòng)端請(qǐng)求此圖片數(shù)據(jù)時(shí)，一并將此部分?jǐn)?shù)據(jù)發(fā)送給移動(dòng)端。
6.如權(quán)利要求1或者3所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述需要瀏覽的圖片為堆疊模式。
7.如權(quán)利要求6所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述堆疊模式是指屏幕上顯示第一張圖片，其余的圖片逐一堆疊，最下層的圖片被次下層的圖片所覆蓋，依次類推，……，第二張圖片被第一張圖片所覆蓋。
8.如權(quán)利要求6所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于采用層疊樣式表css將圖片設(shè)置為堆疊模式。
9.如權(quán)利要求1或者3所述的基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其特征在于所述獲取需要瀏覽的圖片的具體實(shí)現(xiàn)的過(guò)程為:使用超級(jí)文本標(biāo)記語(yǔ)言html中的div標(biāo)簽來(lái)實(shí)現(xiàn)瀏覽圖片的獲取，首先設(shè)置瀏覽器的background-1mage屬性地址為需要瀏覽的圖片地址，并設(shè)置瀏覽器的background-size屬性為100%，使圖片根據(jù)div標(biāo)簽的大小自動(dòng)縮放至相應(yīng)大小，并利用層疊樣式表css將圖片設(shè)置為堆疊模式。
【專利摘要】本發(fā)明涉及移動(dòng)設(shè)備瀏覽器技術(shù)領(lǐng)域，本發(fā)明公開了一種基于移動(dòng)端瀏覽器跨平臺(tái)人機(jī)交互瀏覽圖片的方法，其具體包括以下的步驟：步驟一、獲取需要瀏覽的圖片；步驟二、獲取需要瀏覽的第一張圖片的寬度、高度以及當(dāng)前使用的移動(dòng)端的顯示屏顯示區(qū)的寬度和高度，以顯示屏顯示區(qū)的寬度和高度為基礎(chǔ)，將圖片進(jìn)行放大或者縮小，使得圖片充滿整個(gè)顯示屏顯示區(qū)；步驟三、屏幕根據(jù)手指的移動(dòng)方向和距離計(jì)算出下一張需要顯示的圖片，并隨著手指或者其他觸控在屏幕上的滑動(dòng)，逐漸將下一張需要顯示的圖片拖行到顯示屏的顯示區(qū)，下一張圖片同樣以顯示屏顯示區(qū)的寬度和高度為基礎(chǔ)，將圖片進(jìn)行放大或者縮小，使得第二張圖片逐漸充滿整個(gè)顯示屏顯示區(qū)。
【IPC分類】G06F3-0488, G06F3-0484
【公開號(hào)】CN104679432
【申請(qǐng)?zhí)枴緾N201510094889
【發(fā)明人】唐雷
【申請(qǐng)人】成都品果科技有限公司
【公開日】2015年6月3日
【申請(qǐng)日】2015年3月4日