用于屏幕顯示設(shè)備的圖像展示方法及裝置的制造方法
【專利摘要】本申請(qǐng)公開了一種用于屏幕顯示設(shè)備的圖像展示方法，包括：獲得待展示圖像；選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式；按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。本申請(qǐng)同時(shí)提供一種用于屏幕顯示設(shè)備的圖像展示裝置。本申請(qǐng)?zhí)峁┑纳鲜龇椒?，采用了不同于現(xiàn)有技術(shù)的動(dòng)態(tài)展示方式，巧妙地解決了信息展示完整性與空間占用率之間的矛盾，在不擴(kuò)大容器尺寸的條件下，實(shí)現(xiàn)了容器尺寸與圖像尺寸之間的適配，在有限的展示空間中展示了圖像的完整內(nèi)容。
【專利說明】
用于屏幕顯示設(shè)備的圖像展示方法及裝置
技術(shù)領(lǐng)域
[0001]本申請(qǐng)涉及圖像顯示技術(shù)，具體涉及一種用于屏幕顯示設(shè)備的圖像展示方法。本申請(qǐng)同時(shí)涉及一種用于屏幕顯示設(shè)備的圖像展示裝置。
【背景技術(shù)】
[0002]隨著計(jì)算機(jī)和互聯(lián)網(wǎng)技術(shù)的發(fā)展，出現(xiàn)了眾多的為用戶提供各種信息及服務(wù)的網(wǎng)站，而網(wǎng)頁(也稱web頁面)則是每個(gè)網(wǎng)站向用戶展示、推薦信息、提供服務(wù)的主要方式。一個(gè)web頁面通常包含多種資源，例如:文字、圖片、超鏈接、表格、表單等。其中，由于文字、表格等所傳遞的信息是相對(duì)枯燥的，而圖片通常顏色鮮艷、簡(jiǎn)潔明了，往往能夠帶給用戶更為直觀的感性認(rèn)識(shí)，因此，圖片已成為web頁面中不可或缺的重要成員之一。
[0003]在web頁面中用于展示圖片的元素，例如，DIV元素，也稱為容器。通常在設(shè)計(jì)頁面時(shí)會(huì)預(yù)先指定容器的大小，而在該容器中展示的圖片可能是由第三方提供的，在瀏覽器加載頁面的過程中，根據(jù)圖片標(biāo)簽的src屬性中的URL信息，從網(wǎng)絡(luò)獲取該圖片資源。由此可見，由于圖片通常是通過網(wǎng)絡(luò)動(dòng)態(tài)獲取的，因此，圖片尺寸可能與容器尺寸不匹配，而且經(jīng)常會(huì)出現(xiàn)圖片尺寸大于容器尺寸的情況，導(dǎo)致無法在容器的有限空間內(nèi)完整展示圖片，影響用戶的瀏覽體驗(yàn)。
[0004]目前解決上述問題的常用方法是:在設(shè)計(jì)網(wǎng)頁時(shí)，盡可能為用于顯示圖片的容器設(shè)置較大的尺寸，即:設(shè)置較大的寬度值和高度值。這種方法在一定程度上可以解決上述問題，但是，依然存在以下缺陷:
[0005]I)由于第三方提供的圖片資源通常是不可控的，因此，不可避免還是會(huì)出現(xiàn)部分圖片無法完整顯示的問題；
[0006]2)采用這種方式展示圖片的完整信息，需要在web頁面中占用大幅的展示空間，自然會(huì)減少頁面展示的其他信息量，這將影響其他信息的展示效果。
【發(fā)明內(nèi)容】
[0007]本申請(qǐng)實(shí)施例提供一種用于屏幕顯示設(shè)備的圖像展示方法，以解決現(xiàn)有的靜態(tài)展示技術(shù)無法在有限的展示空間完整展示圖像內(nèi)容的問題。本申請(qǐng)實(shí)施例還提供一種用于屏幕顯示設(shè)備的圖像展示裝置。
[0008]本申請(qǐng)?zhí)峁┮环N用于屏幕顯示設(shè)備的圖像展示方法，包括:
[0009]獲得待展不圖像；
[0010]選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式；
[0011]按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0012]可選的，所述方法包括:
[0013]獲取所述圖像的寬度值和高度值；
[0014]當(dāng)所述圖像的寬度值大于其高度值時(shí)，選擇橫向滑動(dòng)的展示方式；
[0015]當(dāng)所述圖像的寬度值不大于其高度值時(shí)，選擇縱向滑動(dòng)的展示方式。
[0016]可選的，所述選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式，還包括:
[0017]獲取所述容器的寬度值和高度值；
[0018]當(dāng)所述圖像的寬度值大于其高度值時(shí)，還包括:
[0019]將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同；
[0020]和/或，當(dāng)所述圖像的寬度值不大于其高度值時(shí)，還包括:
[0021]將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同。
[0022]可選的，當(dāng)所述圖像的寬度值大于其高度值時(shí)，在執(zhí)行所述將所述圖像進(jìn)行等比例縮放的步驟前，執(zhí)行下述操作:
[0023]判斷所述圖像的高度值是否大于所述容器的高度值；
[0024]若是，執(zhí)行所述將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同的步驟。
[0025]可選的，當(dāng)所述圖像的寬度值不大于其高度值時(shí)，在執(zhí)行所述將所述圖像進(jìn)行等比例縮放的步驟前，執(zhí)行下述操作:
[0026]判斷所述圖像的寬度值是否大于所述容器的寬度值；
[0027]若是，執(zhí)行所述將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同的步驟。
[0028]可選的，所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容，采用如下方式實(shí)現(xiàn):
[0029]按照預(yù)先設(shè)定的方向，在所述容器中滑動(dòng)顯示所述圖像的全部?jī)?nèi)容。
[0030]可選的，當(dāng)選擇橫向滑動(dòng)的展示方式時(shí)，所述預(yù)先設(shè)定的方向包括:從左到右，或者從右到左；
[0031]當(dāng)選擇縱向滑動(dòng)的展示方式時(shí)，所述預(yù)先設(shè)定的方向包括:從上到下，或者從下到上。
[0032]可選的，循環(huán)執(zhí)行所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容的步驟。
[0033]可選的，所述容器為web頁面中的、具有固定寬高屬性值的DIV元素。
[0034]可選的，所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容采用如下方式實(shí)現(xiàn):
[0035]利用css的transit1n機(jī)制，通過調(diào)整所述圖像在所述容器中的顯示位置，在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0036]可選的，當(dāng)檢測(cè)到所述DIV元素出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，執(zhí)行所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容的步驟。
[0037]可選的，在所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容的步驟之后，執(zhí)行下述操作:
[0038]當(dāng)檢測(cè)到所述DIV元素不在瀏覽器可視區(qū)域時(shí)，停止所述動(dòng)態(tài)展示過程。
[0039]相應(yīng)的，本申請(qǐng)還提供一種用于屏幕顯示設(shè)備的圖像展示裝置，包括:
[0040]圖像獲得單元，用于獲得待展示圖像；
[0041]方式選擇單元，用于選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式；
[0042]動(dòng)態(tài)展示單元，用于按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0043]可選的，所述方式選擇單元包括:
[0044]圖像參數(shù)獲取子單元，用于獲取所述圖像的寬度值和高度值；
[0045]圖像參數(shù)判斷子單元，用于判斷所述圖像的寬度值是否大于其高度值；
[0046]橫向滑動(dòng)選擇子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，選擇橫向滑動(dòng)的展示方式；
[0047]縱向滑動(dòng)選擇子單元，用于當(dāng)所述圖像參數(shù)判斷子單元得輸出為否時(shí)，選擇縱向滑動(dòng)的展示方式。
[0048]可選的，所述方式選擇單元還包括:
[0049]容器參數(shù)獲取子單元，用于獲取所述容器的寬度值和高度值；
[0050]圖像等高縮放子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同；和/或，
[0051]圖像等寬縮放子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為否時(shí)，將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同。
[0052]可選的，所述方式選擇單元還包括:
[0053]第一縮放判斷子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，判斷所述圖像的高度值是否大于所述容器的高度值，若是，觸發(fā)所述圖像等高縮放子單元。
[0054]可選的，所述方式選擇單元還包括:
[0055]第二縮放判斷子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為否時(shí)，判斷所述圖像的寬度值是否大于所述容器的寬度值，若是，觸發(fā)所述圖像等寬縮放子單元。
[0056]可選的，所述動(dòng)態(tài)展示單元具體用于，按照預(yù)先設(shè)定的方向，在所述容器中滑動(dòng)顯示所述圖像的全部?jī)?nèi)容。
[0057]可選的，所述動(dòng)態(tài)展示單元具體用于，循環(huán)地按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0058]可選的，所述動(dòng)態(tài)展示單元所用的容器為，web頁面中的、具有固定寬高屬性值的DIV元素。
[0059]可選的，所述動(dòng)態(tài)展示單元具體用于，利用css的transit1n機(jī)制，通過調(diào)整所述圖像在所述容器中的顯示位置，在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0060]可選的，所述裝置還包括:
[0061]可視檢測(cè)單元，用于檢測(cè)所述DIV元素是否出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)，若是，觸發(fā)所述動(dòng)態(tài)展示單元。
[0062]可選的，所述可視檢測(cè)單元還用于，在觸發(fā)所述動(dòng)態(tài)展示單元工作后，若檢測(cè)到所述DIV元素不在瀏覽器可視區(qū)域內(nèi)，則停止所述動(dòng)態(tài)展示單元的工作。
[0063]與現(xiàn)有技術(shù)相比，本申請(qǐng)具有以下優(yōu)點(diǎn):
[0064]本申請(qǐng)?zhí)峁┑挠糜谄聊伙@示設(shè)備的圖像展示方法，首先獲得待展示圖像，選擇在預(yù)先設(shè)定的容器中展示圖像的方式，并按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。本申請(qǐng)?zhí)峁┑纳鲜龇椒?，采用了不同于現(xiàn)有技術(shù)的動(dòng)態(tài)展示方式，巧妙地解決了信息展示完整性與空間占用率之間的矛盾，在不擴(kuò)大容器尺寸的條件下，實(shí)現(xiàn)了容器尺寸與圖像尺寸之間的適配，在有限的展示空間中展示了圖像的完整內(nèi)容。
【附圖說明】
[0065]圖1是本申請(qǐng)的一種用于屏幕顯示設(shè)備的圖像展示方法的實(shí)施例的流程圖；
[0066]圖2是本實(shí)施例提供的選擇圖像展示方式的處理流程圖；
[0067]圖3是本實(shí)施例提供的從下到上縱向滑動(dòng)顯示圖像的示意圖；
[0068]圖4是本實(shí)施例提供的在web頁面的DIV中動(dòng)態(tài)展示所述圖像全部?jī)?nèi)容的流程圖；
[0069]圖5是本申請(qǐng)的一種用于屏幕顯示設(shè)備的圖像展示裝置的實(shí)施例的示意圖。
【具體實(shí)施方式】
[0070]在下面的描述中闡述了很多具體細(xì)節(jié)以便于充分理解本申請(qǐng)。但是，本申請(qǐng)能夠以很多不同于在此描述的其它方式來實(shí)施，本領(lǐng)域技術(shù)人員可以在不違背本申請(qǐng)內(nèi)涵的情況下做類似推廣，因此，本申請(qǐng)不受下面公開的具體實(shí)施的限制。
[0071]在本申請(qǐng)中，分別提供了一種用于屏幕顯示設(shè)備的圖像展示方法，以及一種用于屏幕顯示設(shè)備的圖像展示裝置，在下面的實(shí)施例中逐一進(jìn)行詳細(xì)說明。為了便于理解，在描述實(shí)施例之前，先對(duì)本申請(qǐng)的技術(shù)方案作簡(jiǎn)要的說明。
[0072]目前web頁面中用于展示圖像信息的容器，其寬度和高度值通常是預(yù)先指定的，而需要通過該容器展示的圖像是多種多樣的，其寬度和高度值可能大于容器的尺寸，導(dǎo)致無法在容器中完整地展示圖像信息。針對(duì)這一問題，本申請(qǐng)實(shí)施例的技術(shù)方案通過選擇不同的展示方式(例如，橫向滑動(dòng)顯示、縱向滑動(dòng)顯示)，在容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容，從而實(shí)現(xiàn)了在有限的展示空間中展示圖像完整信息的功能。
[0073]本申請(qǐng)的技術(shù)方案雖然是針對(duì)web頁面中的圖像展示問題提出的，但是，其應(yīng)用領(lǐng)域并不局限于基于瀏覽器的應(yīng)用，在其他的應(yīng)用中，例如native APP,或者是桌面電腦中的應(yīng)用，只要是在屏幕顯示設(shè)備上的固定尺寸容器中展示圖像，特別是在圖像尺寸大于容器尺寸、或者圖像尺寸無法提前獲知的應(yīng)用場(chǎng)景，都可以采用本申請(qǐng)?zhí)峁┑姆椒?，并獲得相應(yīng)的有益效果。
[0074]基于上述對(duì)應(yīng)用場(chǎng)景的說明，本技術(shù)方案所述的容器，可以是web頁面中用于展示圖片的DIV元素對(duì)應(yīng)的顯示區(qū)域，也可以是圖片框以及其他用于顯示圖像的、具有固定的寬度值和高度值的控件或者區(qū)域，在下文對(duì)實(shí)施例的描述中統(tǒng)一稱為容器。下面對(duì)本申請(qǐng)的實(shí)施例作詳細(xì)說明。
[0075]請(qǐng)參考圖1，其為本申請(qǐng)的一種用于屏幕顯示設(shè)備的圖像展示方法的實(shí)施例的流程圖。所述方法包括如下步驟:
[0076]步驟101:獲得待展示圖像。
[0077]所述待展示圖像是要在預(yù)先設(shè)定的容器中展示的圖像。所述圖像可以是從客戶端、服務(wù)器等計(jì)算機(jī)中已存儲(chǔ)的圖片資源中讀取的，也可以是從具有攝像裝置的設(shè)備中讀取的，例如，手機(jī)、照相機(jī)等；也可以是通過網(wǎng)絡(luò)獲取的。
[0078]以在web頁面的DIV容器中展示圖像為例，web頁面的html代碼片段如下所示:
[0079]<div id = 〃item"style = "width:300px ;height: 200px">
[0080]<img class = 〃IMG〃style = 〃 高寬根據(jù)橫豎圖適配” src = 〃url〃/>
[0081]</div>
[0082]其中，用DIV搭建的具有固定寬高屬性值的容器ID為item，其寬度值為300像素，高度值為200像素，在該DIV下有一個(gè)img標(biāo)簽，其src屬性值給出了要在DIV容器中展示的圖像的URL地址信息。瀏覽器在加載包含上述html代碼片段的web頁面時(shí)，可以根據(jù)該URL地址信息獲取相應(yīng)的待展示圖像。
[0083]步驟102:選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式。
[0084]本實(shí)施例提供的圖像展示方法，采用動(dòng)態(tài)展示方式，實(shí)現(xiàn)了在有限的容器中展示圖像完整信息的功能。在具體的實(shí)施中，所述動(dòng)態(tài)展示方式可以有多種，例如，可以根據(jù)容器的尺寸，將待展示圖像分為幾個(gè)子部分，然后在所述容器中依次顯示每個(gè)子部分的圖像。
[0085]為了向用戶提供良好的視覺感受，本實(shí)施例的技術(shù)方案提供了在所述容器中滑動(dòng)展示圖像的優(yōu)選實(shí)施方式，在本步驟根據(jù)所述圖像的寬度值和高度值進(jìn)行滑動(dòng)展示方式的選擇，具體說包括步驟102-1至102-3，下面結(jié)合附圖2作進(jìn)一步說明。
[0086]步驟102-1:獲取所述圖像和所述容器的寬度值與高度值。
[0087]在具體實(shí)施時(shí)，可以根據(jù)所述圖像的格式以及應(yīng)用平臺(tái)的類型，通過相應(yīng)的文件讀取操作或者是調(diào)用平臺(tái)提供的接口獲取所述圖像的寬度值。例如，在windows應(yīng)用中，可以讀取BMP文件頭部的BITMAPFILEHEADER以及BITMAPINFOHEADER數(shù)據(jù)結(jié)構(gòu)，其中的biffidth是BMP圖像的寬度，biHeight是BMP圖像的高度；對(duì)于在web頁面中展示的圖像，則可以利用JQUERY獲取圖像的寬度值和高度值。
[0088]對(duì)于所述容器的寬高值，通常可以通過讀取相應(yīng)控件的屬性值來獲取，對(duì)于web頁面中的DIV容器，也可以利用JQUERY獲取其寬度值和高度值，例如，通過
width O獲取id為item的DIV的寬度值，通過$(〃#item〃).height O獲取id為item的DIV的高度值。
[0089]步驟102-2:判斷所述圖像的寬度值是否大于其高度值，若是，執(zhí)行步驟102-3，否貝IJ，執(zhí)行步驟102-4。
[0090]當(dāng)所述圖像的寬度值大于其高度值時(shí)，說明所述圖像是橫圖，轉(zhuǎn)到步驟102-3執(zhí)行；當(dāng)所述圖像的寬度值不大于其高度值時(shí)，說明所述圖像是豎圖，轉(zhuǎn)到步驟102-4執(zhí)行。
[0091]步驟102-3:選擇橫向滑動(dòng)的展示方式，并將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同。
[0092]對(duì)于橫圖，可以選擇橫向滑動(dòng)的展示方式，即在所述容器中，采用橫向滑動(dòng)的動(dòng)畫方式顯示所述圖像的全部?jī)?nèi)容。
[0093]進(jìn)一步地，考慮到所述圖像的高度值可能大于所述容器的高度值，在這種情況下，所述圖像在橫向滑動(dòng)過程中會(huì)有部分內(nèi)容無法展示；而當(dāng)所述圖像的高度值小于所述容器的高度值時(shí)，所述圖像在橫向滑動(dòng)過程中雖然可以完整地展示，但是，所述容器在豎直方向的空間并沒有被充滿，可能影響視覺效果。針對(duì)上述兩種情況，本實(shí)施例的技術(shù)方案，提供了在選擇橫向滑動(dòng)的展示方式時(shí)，對(duì)所述圖像進(jìn)行等比例縮放的優(yōu)選實(shí)施方式。
[0094]具體說，通過對(duì)所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同。例如，所述圖像的寬度值和高度值分別為imgWidth和imgHeight，所述容器的寬度值和高度值分別為divWidth和divHeight，那么本步驟的等比例縮放操作，可以將所述圖像的寬度值和高度值按照如下公式進(jìn)行調(diào)整:
[0095]圖像寬度值=(imgffidth^divHeight) / imgHeight
[0096]圖像高度值=divHeight
[0097]之所以要采用上述等比例縮放方式，是為了避免所述圖像在縮放后變形，影響展示效果。
[0098]步驟102-4:選擇縱向滑動(dòng)的展示方式，并將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同。
[0099]對(duì)于豎圖，可以選擇縱向滑動(dòng)的展示方式，即在所述容器中，采用縱向滑動(dòng)的動(dòng)畫方式顯示所述圖像的全部?jī)?nèi)容。
[0100]與步驟102-3選擇橫向展示方式類似，在選擇縱向展示方式后，也可以通過對(duì)所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同，例如，可以將所述圖像的寬度值和高度值按照如下公式進(jìn)行調(diào)整(各參數(shù)的含義同步驟102-3):
[0101]圖像寬度值=divWidth
[0102]圖像高度值=(divWidth*imgHeight)/imgWidth
[0103]至此，通過上述步驟102-1至102-4，描述了選擇動(dòng)態(tài)展示方式以及進(jìn)行相應(yīng)的圖像等比例縮放的處理過程。
[0104]此外，還可以進(jìn)一步細(xì)化這部分處理，考慮到矢量圖在經(jīng)過縮放處理后不會(huì)影響圖像的展示效果，而非矢量圖在放大后可能會(huì)影響圖像的質(zhì)量，例如模糊不清。因此可以針對(duì)具體的應(yīng)用需求為縮放操作添加一定的限制條件。例如，在web頁面中展示的圖像通常不是矢量圖，因此將本實(shí)施例提供的方法應(yīng)用于web頁面的圖像展示時(shí)，可以不進(jìn)行所述圖像的放大操作，這種情況下可以采用如下的處理流程:
[0105]當(dāng)所述圖像的寬度值大于其高度值時(shí)，選擇橫向滑動(dòng)的展示方式，并判斷所述圖像的高度值是否大于所述容器的高度值，若是，將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同；
[0106]和/或，當(dāng)所述圖像的寬度值不大于其高度值時(shí)，選擇縱向滑動(dòng)的展示方式，并判斷所述圖像的寬度值是否大于所述容器的寬度值，若是，將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同。
[0107]步驟103:按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0108]在步驟102中選擇了動(dòng)態(tài)展示圖像的方式，在本步驟中則按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0109]如果采用橫向滑動(dòng)的展示方式，則可以按照預(yù)先設(shè)定的方向從左到右或者從右到左進(jìn)行滑動(dòng)展示。對(duì)于從右到左滑動(dòng)展示，可以先將所述圖像靜態(tài)地顯示在所述容器中作為初始狀態(tài)，例如，圖像的左邊界與所述容器的左邊界重合；也可以初始狀態(tài)時(shí)不在所述容器中顯示圖像，而以所述圖像的左邊界與所述容器的右邊界重合作為起點(diǎn)。然后從右向左滑動(dòng)展示圖像，直至所述圖像的右邊界與所述容器的右邊界重合，從而完成一次動(dòng)態(tài)展示過程。從左向右的滑動(dòng)展示過程與上述方式原理相同，不再贅述。
[0110]同樣的道理，如果采用縱向滑動(dòng)的展示方式時(shí)，則可以按照預(yù)先設(shè)定的方向從上到下或者從下到上進(jìn)行滑動(dòng)展示。對(duì)于從下到上滑動(dòng)展示，可以先將所述圖像靜態(tài)地顯示在所述容器中作為初始狀態(tài)，例如，圖像的上邊界與所述容器的上邊界重合；也可以初始狀態(tài)時(shí)不在所述容器中顯示圖像，以所述圖像的上邊界與所述容器的下邊界重合作為起點(diǎn)。然后從下向上滑動(dòng)展示圖像，直至所述圖像的下邊界與所述容器的下邊界重合，從而完成一次動(dòng)態(tài)展示過程。從上向下的滑動(dòng)展示過程與上述方式原理相同，不再贅述。
[0111]考慮到用戶通常的瀏覽習(xí)慣，其中的從右到左、以及從下到上的滑動(dòng)展示方式，為本實(shí)施例的優(yōu)選實(shí)施方式。請(qǐng)參見圖3，其為從下到上縱向滑動(dòng)顯示圖像的示意圖。在該示意圖中，虛線框代表展示所述圖像的容器所在的顯示區(qū)域，所述圖像為豎圖，因此選擇了縱向滑動(dòng)的展示方式，其中圖(a)為滑動(dòng)展示的初始狀態(tài)，此時(shí)，所述圖像以與容器的上邊界重合的方式靜態(tài)顯示在所述容器中，部分圖像內(nèi)容處于容器的外部，未得到展示；隨后按照箭頭指示的方向開始向上滑動(dòng)展示，圖(b)為本次展示過程結(jié)束時(shí)的示意圖，此時(shí)整個(gè)圖像的各個(gè)部分都在所述容器中得到了展示。
[0112]優(yōu)選的，為了使用戶能夠更加準(zhǔn)確地獲取圖像信息，在具體實(shí)施中，還可以采用循環(huán)展示方式，即，從初始狀態(tài)開始完成一次動(dòng)態(tài)展示過程后，重新回到初始狀態(tài)，再開始新的一輪動(dòng)態(tài)展示過程......按照上述方式循環(huán)執(zhí)行。
[0113]具體實(shí)施時(shí)，可以利用應(yīng)用平臺(tái)提供的圖像繪制接口，通過定期(例如，每20ms)在所述容器的指定位置繪制所述圖像的指定部分實(shí)現(xiàn)動(dòng)態(tài)展示過程。例如，MFC類庫中針對(duì)Image類提供的DrawImageO方法可以在指定的位置繪制指定圖像的指定部分，對(duì)于在web頁面展示圖像來說，也可以通過JavaScript代碼調(diào)用類似的drawlmage O方法，實(shí)現(xiàn)所述動(dòng)態(tài)展示功能。
[0114]優(yōu)選的，還可以利用應(yīng)用平臺(tái)提供的動(dòng)畫機(jī)制實(shí)現(xiàn)動(dòng)態(tài)展示過程。例如，在web頁面中可以利用CSS transit1n機(jī)制實(shí)現(xiàn)圖像的動(dòng)態(tài)展示。Transit1n是CSS3中新添加的特性，采用該特性，當(dāng)元素的大小、位置、顏色、布局、透明度等數(shù)值發(fā)生改變時(shí)，可以產(chǎn)生過渡的動(dòng)畫效果。
[0115]同時(shí)，考慮到瀏覽器在展示頁面的過程中，會(huì)根據(jù)用戶對(duì)瀏覽窗口滑塊的操作，更新在窗口可視區(qū)域中顯示的頁面內(nèi)容?；谏鲜隹紤]，為了減少對(duì)設(shè)備資源的占用，可以僅在用于展示圖像的DIV容器出現(xiàn)在瀏覽器的可視區(qū)域時(shí)，觸發(fā)動(dòng)態(tài)展示過程。下面以在web頁面的具有固定寬高屬性值的DIV元素中動(dòng)態(tài)展示圖像為例，通過步驟103-1至103-3對(duì)該過程作進(jìn)一步說明，相關(guān)處理流程請(qǐng)參見圖4。
[0116]步驟103-1:判斷所述DIV元素是否出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)；若是，執(zhí)行步驟103-2。
[0117]可以利用JQUERY監(jiān)測(cè)DIV元素與瀏覽器可視區(qū)域之間的位置關(guān)系，從而判斷所述容器是否出現(xiàn)在瀏覽器的可視區(qū)域。為此，先介紹通過JQUERY獲取的4個(gè)關(guān)鍵屬性，以所述DIV的id為item為例。
[0118](I) jQuery (’ #item’).0ffset ().top
[0119]獲取DIV容器的絕對(duì)偏移量，即DIV容器的實(shí)際尺寸的上邊界到頁面頂端的距離，這個(gè)值不隨瀏覽器窗口滾動(dòng)而改變。
[0120](2) j Query (，#item，).0uterHeight O
[0121]獲取DIV容器的實(shí)際尺寸。
[0122](3) jQuery (window).scrollTop ()
[0123]獲取瀏覽器窗口滾動(dòng)的頂部偏移量，即此時(shí)可視區(qū)域的上邊界到頁面上邊界的偏移量，也可以理解成整個(gè)頁面滾動(dòng)了多少距離。
[0124](4) jQuery (window).height ()
[0125]獲取瀏覽器窗口可視區(qū)域的高度。
[0126]在DIV容器隨著頁面向上滾動(dòng)超出可視區(qū)域的過程中，可視區(qū)域的頂部偏移量處于逐漸增大中，當(dāng)可視區(qū)域的頂部偏移量，大于容器上邊界到頁面頂端的距離與容器本身高度之和時(shí)，說明該容器已經(jīng)在向上滾動(dòng)過程中超出了瀏覽器窗口的可視區(qū)域，即滿足以下條件1:
[0127]jQuery (window).scrollTop () > (jQuery ( ‘#item，).0ffset().top+jQuery ( mem，).0uterHeight ())
[0128]在容器隨著頁面向下滾動(dòng)超出可視區(qū)域的過程中，可視區(qū)域的頂部偏移量處于逐漸減少中，當(dāng)可視區(qū)域的頂部偏移量，小于容器上邊界到頁面頂端的距離與可視區(qū)域高度之差時(shí)，說明該容器已經(jīng)在向下滾動(dòng)過程中超出了瀏覽器窗口的可視區(qū)域，即滿足以下條件2:
[0129]jQuery (window).scrollTop () < (jQuery ( ‘#item，).0ffset().top-jQuery(window).height ())
[0130]因此，本步驟可以對(duì)條件I和條件2的表達(dá)式執(zhí)行或運(yùn)算，如果結(jié)果為false，說明上述兩個(gè)條件都不滿足，則判定所述DIV容器出現(xiàn)在可視區(qū)域中，可以繼續(xù)執(zhí)行步驟103-2。
[0131]步驟103-2:利用css的transit1n屬性，通過調(diào)整所述圖像在所述容器中的顯示位置，在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0132]本實(shí)施例采用JQUERY控制CSS的樣式，通過變更圖像的坐標(biāo)值，由Transit1n機(jī)制自動(dòng)地采用逐漸過渡的方式完成坐標(biāo)變換過程，從而實(shí)現(xiàn)圖像從初始位置滑動(dòng)到目標(biāo)位置的動(dòng)畫展示效果。
[0133]對(duì)于橫圖，由于采用橫向滑動(dòng)方式，需要變更所述圖像位置的橫坐標(biāo)值。以從右向左滑動(dòng)為例，從所述圖像在所述容器中顯示的初始狀態(tài)，過渡為最終所述圖像的右邊界與所述容器的右邊界重合，那么所述圖像到達(dá)目標(biāo)位置時(shí)，其橫坐標(biāo)發(fā)生水平位移的像素?cái)?shù)如以下公式所示:
[0134](I)初始狀態(tài)為所述圖像的左邊界與所述容器的左邊界重合
[0135]橫坐標(biāo)水平位移像素?cái)?shù)=所述圖像縮放后的寬度-容器寬度；
[0136](2)初始狀態(tài)為所述圖像的左邊界與所述容器的右邊界重合
[0137]橫坐標(biāo)水平位移像素?cái)?shù)=所述圖像縮放后的寬度；
[0138]對(duì)于從左向右滑動(dòng)，橫坐標(biāo)水平位移像素?cái)?shù)的計(jì)算，與從右向左滑動(dòng)的原理是相同的，此處不再贅述。
[0139]對(duì)于豎圖，由于采用縱向滑動(dòng)方式，需要變更所述圖像位置的縱坐標(biāo)值。以從下向上滑動(dòng)為例，其縱坐標(biāo)發(fā)生垂直位移的像素?cái)?shù)如以下公式所示:
[0140](I)初始狀態(tài)為所述圖像的上邊界與所述容器的上邊界重合
[0141]縱坐標(biāo)垂直位移像素?cái)?shù)=所述圖像縮放后的高度-容器高度；
[0142](2)初始狀態(tài)為所述圖像的上邊界與所述容器的下邊界重合
[0143]縱坐標(biāo)垂直位移像素?cái)?shù)=所述圖像縮放后的高度；
[0144]對(duì)于從上向下滑動(dòng)，縱坐標(biāo)垂直位移像素?cái)?shù)的計(jì)算，與從下向上滑動(dòng)的原理是相同的，此處不再贅述。
[0145]按照上述方式變更所述圖像在所述容器中的坐標(biāo)值，transit1n機(jī)制就會(huì)采用過渡方式在預(yù)先設(shè)定的時(shí)間段內(nèi)完成上述變更，從而呈現(xiàn)出圖像在容器內(nèi)滑動(dòng)展示的動(dòng)畫效果，從而完整地展示所述圖像的全部?jī)?nèi)容。
[0146]所述預(yù)先設(shè)定的時(shí)間段，是指CSS3transit1n包含的屬性之一:變換延續(xù)的時(shí)間(transit1n-durat1n)，即，轉(zhuǎn)換過程的持續(xù)時(shí)間。具體到本實(shí)施例，就是指完成一次上述動(dòng)態(tài)展示過程的時(shí)間。在具體實(shí)施時(shí)，可以將transit1n-durat1n設(shè)置為一個(gè)固定的經(jīng)驗(yàn)值，例如2s ;也可以根據(jù)坐標(biāo)值變更的具體數(shù)值進(jìn)行設(shè)置，對(duì)于橫向滑動(dòng)方式，可以根據(jù)橫坐標(biāo)水平位移像素?cái)?shù)進(jìn)行設(shè)置，對(duì)于縱向滑動(dòng)方式，可以根據(jù)縱坐標(biāo)垂直位移像素?cái)?shù)進(jìn)行設(shè)置，使得動(dòng)態(tài)展示過程的持續(xù)時(shí)間與坐標(biāo)值的變更成正比。
[0147]此外，還可以對(duì)CSS3transit1n的其他屬性進(jìn)行設(shè)置，例如，變換的速率變化(transit1n-timing-funct1n)以及變換延遲時(shí)間(transit1n-delay)等，從而獲得不同的動(dòng)態(tài)展示效果。
[0148]為了使用戶能夠更加準(zhǔn)確地獲取圖像信息，在具體實(shí)施中，還可以采用循環(huán)展示方式，即，從初始狀態(tài)開始，通過調(diào)整坐標(biāo)值觸發(fā)transit1n完成一次動(dòng)態(tài)展示過程后，重新回到初始狀態(tài)，再次調(diào)整坐標(biāo)值觸發(fā)transit1n開始新一輪動(dòng)態(tài)展示過程......按照上述方式循環(huán)執(zhí)行。
[0149]步驟103-3:檢測(cè)所述DIV元素是否不在瀏覽器可視區(qū)域中，若是，停止所述動(dòng)態(tài)展示過程。
[0150]在頁面的DIV容器中開始動(dòng)態(tài)展示圖像后，特別是開始循環(huán)展示過程后，可以執(zhí)行本步驟判斷所述DIV元素是否脫離了可視區(qū)域，其基本原理與步驟103-1是相同的。在步驟103-1給出的條件I和條件2中，只要滿足其中之一，則說明所述DIV元素隨著頁面的滾動(dòng)，已經(jīng)超出了瀏覽器窗口的可視區(qū)域。
[0151]因此，本步驟可以對(duì)步驟103-1給出的條件I和條件2的表達(dá)式執(zhí)行或運(yùn)算，結(jié)果為true，說明所述DIV元素已經(jīng)不在可視區(qū)域中，可以停止步驟103-2執(zhí)行的動(dòng)態(tài)展示過程。
[0152]綜上所述，本申請(qǐng)?zhí)峁┑挠糜谄聊伙@示設(shè)備的圖像展示方法，由于采用了不同于現(xiàn)有技術(shù)的動(dòng)態(tài)展示方式，巧妙地解決了信息展示完整性與空間占用率之間的矛盾，在不擴(kuò)大容器尺寸的條件下，實(shí)現(xiàn)了容器尺寸與圖像尺寸之間的適配，在有限的展示空間中展示了圖像的完整內(nèi)容。
[0153]在上述的實(shí)施例中，提供了一種用于屏幕顯示設(shè)備的圖像展示方法，與之相對(duì)應(yīng)的，本申請(qǐng)還提供一種用于屏幕顯示設(shè)備的圖像展示裝置。請(qǐng)參看圖5，其為本申請(qǐng)的一種用于屏幕顯示設(shè)備的圖像展示裝置的實(shí)施例示意圖。由于裝置實(shí)施例基本相似于方法實(shí)施例，所以描述得比較簡(jiǎn)單，相關(guān)之處參見方法實(shí)施例的部分說明即可。下述描述的裝置實(shí)施例僅僅是示意性的。
[0154]本實(shí)施例的一種用于屏幕顯示設(shè)備的圖像展示裝置，包括:
[0155]圖像獲得單元501，用于獲得待展示圖像；
[0156]方式選擇單元502，用于選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式；
[0157]動(dòng)態(tài)展示單元503，用于按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0158]可選的，所述方式選擇單元包括:
[0159]圖像參數(shù)獲取子單元，用于獲取所述圖像的寬度值和高度值；
[0160]圖像參數(shù)判斷子單元，用于判斷所述圖像的寬度值是否大于其高度值；
[0161]橫向滑動(dòng)選擇子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，選擇橫向滑動(dòng)的展示方式；
[0162]縱向滑動(dòng)選擇子單元，用于當(dāng)所述圖像參數(shù)判斷子單元得輸出為否時(shí)，選擇縱向滑動(dòng)的展示方式。
[0163]可選的，所述方式選擇單元還包括:
[0164]容器參數(shù)獲取子單元，用于獲取所述容器的寬度值和高度值；
[0165]圖像等高縮放子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同；
[0166]圖像等寬縮放子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為否時(shí)，將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同。
[0167]可選的，所述方式選擇單元還包括:
[0168]第一縮放判斷子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，判斷所述圖像的高度值是否大于所述容器的高度值，若是，觸發(fā)所述圖像等高縮放子單元。
[0169]可選的，所述方式選擇單元還包括:
[0170]第二縮放判斷子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為否時(shí)，判斷所述圖像的寬度值是否大于所述容器的寬度值，若是，觸發(fā)所述圖像等寬縮放子單元。
[0171]可選的，所述動(dòng)態(tài)展示單元具體用于，按照預(yù)先設(shè)定的方向，在所述容器中滑動(dòng)顯示所述圖像的全部?jī)?nèi)容。
[0172]可選的，所述動(dòng)態(tài)展示單元具體用于，循環(huán)地按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0173]可選的，所述動(dòng)態(tài)展示單元所用的容器為，web頁面中的、具有固定寬高屬性值的DIV元素。
[0174]可選的，所述動(dòng)態(tài)展示單元具體用于，利用css的transit1n機(jī)制，通過調(diào)整所述圖像在所述容器中的顯示位置，在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。
[0175]可選的，所述裝置還包括:
[0176]可視檢測(cè)單元，用于檢測(cè)所述DIV元素是否出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)，若是，觸發(fā)所述動(dòng)態(tài)展示單元。
[0177]可選的，所述可視檢測(cè)單元還用于，在觸發(fā)所述動(dòng)態(tài)展示單元工作后，若檢測(cè)到所述DIV元素不在瀏覽器可視區(qū)域內(nèi)，則停止所述動(dòng)態(tài)展示單元的工作。
[0178]本申請(qǐng)雖然以較佳實(shí)施例公開如上，但其并不是用來限定本申請(qǐng)，任何本領(lǐng)域技術(shù)人員在不脫離本申請(qǐng)的精神和范圍內(nèi)，都可以做出可能的變動(dòng)和修改，因此本申請(qǐng)的保護(hù)范圍應(yīng)當(dāng)以本申請(qǐng)權(quán)利要求所界定的范圍為準(zhǔn)。
[0179]在一個(gè)典型的配置中，計(jì)算設(shè)備包括一個(gè)或多個(gè)處理器(CPU)、輸入/輸出接口、網(wǎng)絡(luò)接口和內(nèi)存。
[0180]內(nèi)存可能包括計(jì)算機(jī)可讀介質(zhì)中的非永久性存儲(chǔ)器，隨機(jī)存取存儲(chǔ)器(RAM)和/或非易失性內(nèi)存等形式，如只讀存儲(chǔ)器(ROM)或閃存(flash RAM)。內(nèi)存是計(jì)算機(jī)可讀介質(zhì)的示例。
[0181]1、計(jì)算機(jī)可讀介質(zhì)包括永久性和非永久性、可移動(dòng)和非可移動(dòng)媒體可以由任何方法或技術(shù)來實(shí)現(xiàn)信息存儲(chǔ)。信息可以是計(jì)算機(jī)可讀指令、數(shù)據(jù)結(jié)構(gòu)、程序的模塊或其他數(shù)據(jù)。計(jì)算機(jī)的存儲(chǔ)介質(zhì)的例子包括，但不限于相變內(nèi)存(PRAM)、靜態(tài)隨機(jī)存取存儲(chǔ)器(SRAM)、動(dòng)態(tài)隨機(jī)存取存儲(chǔ)器(DRAM)、其他類型的隨機(jī)存取存儲(chǔ)器(RAM)、只讀存儲(chǔ)器(ROM)、電可擦除可編程只讀存儲(chǔ)器(EEPROM)、快閃記憶體或其他內(nèi)存技術(shù)、只讀光盤只讀存儲(chǔ)器(CD-ROM)、數(shù)字多功能光盤(DVD)或其他光學(xué)存儲(chǔ)、磁盒式磁帶，磁帶磁磁盤存儲(chǔ)或其他磁性存儲(chǔ)設(shè)備或任何其他非傳輸介質(zhì)，可用于存儲(chǔ)可以被計(jì)算設(shè)備訪問的信息。按照本文中的界定，計(jì)算機(jī)可讀介質(zhì)不包括非暫存電腦可讀媒體(transitory media)，如調(diào)制的數(shù)據(jù)信號(hào)和載波。
[0182]2、本領(lǐng)域技術(shù)人員應(yīng)明白，本申請(qǐng)的實(shí)施例可提供為方法、系統(tǒng)或計(jì)算機(jī)程序產(chǎn)品。因此，本申請(qǐng)可采用完全硬件實(shí)施例、完全軟件實(shí)施例或結(jié)合軟件和硬件方面的實(shí)施例的形式。而且，本申請(qǐng)可采用在一個(gè)或多個(gè)其中包含有計(jì)算機(jī)可用程序代碼的計(jì)算機(jī)可用存儲(chǔ)介質(zhì)(包括但不限于磁盤存儲(chǔ)器、CD-ROM、光學(xué)存儲(chǔ)器等)上實(shí)施的計(jì)算機(jī)程序產(chǎn)品的形式。
【主權(quán)項(xiàng)】
1.一種用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，包括: 獲得待展示圖像； 選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式； 按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。2.根據(jù)權(quán)利要求1所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，所述選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式，包括: 獲取所述圖像的寬度值和高度值； 當(dāng)所述圖像的寬度值大于其高度值時(shí)，選擇橫向滑動(dòng)的展示方式； 當(dāng)所述圖像的寬度值不大于其高度值時(shí)，選擇縱向滑動(dòng)的展示方式。3.根據(jù)權(quán)利要求2所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，所述選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式，還包括: 獲取所述容器的寬度值和高度值； 當(dāng)所述圖像的寬度值大于其高度值時(shí)，還包括: 將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同； 和/或，當(dāng)所述圖像的寬度值不大于其高度值時(shí)，還包括: 將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同。4.根據(jù)權(quán)利要求3所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，當(dāng)所述圖像的寬度值大于其高度值時(shí)，在執(zhí)行所述將所述圖像進(jìn)行等比例縮放的步驟前，執(zhí)行下述操作: 判斷所述圖像的高度值是否大于所述容器的高度值； 若是，執(zhí)行所述將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同的步驟。5.根據(jù)權(quán)利要求3所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，當(dāng)所述圖像的寬度值不大于其高度值時(shí)，在執(zhí)行所述將所述圖像進(jìn)行等比例縮放的步驟前，執(zhí)行下述操作: 判斷所述圖像的寬度值是否大于所述容器的寬度值； 若是，執(zhí)行所述將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同的步驟。6.根據(jù)權(quán)利要求2所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容，采用如下方式實(shí)現(xiàn): 按照預(yù)先設(shè)定的方向，在所述容器中滑動(dòng)顯示所述圖像的全部?jī)?nèi)容。7.根據(jù)權(quán)利要求6所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，當(dāng)選擇橫向滑動(dòng)的展示方式時(shí)，所述預(yù)先設(shè)定的方向包括:從左到右，或者從右到左； 當(dāng)選擇縱向滑動(dòng)的展示方式時(shí)，所述預(yù)先設(shè)定的方向包括:從上到下，或者從下到上。8.根據(jù)權(quán)利要求1所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，循環(huán)執(zhí)行所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容的步驟。9.根據(jù)權(quán)利要求1-8任一所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，所述容器為web頁面中的、具有固定寬高屬性值的DIV元素。10.根據(jù)權(quán)利要求9所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容采用如下方式實(shí)現(xiàn): 利用CSS的transit1n機(jī)制，通過調(diào)整所述圖像在所述容器中的顯示位置，在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。11.根據(jù)權(quán)利要求9所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，當(dāng)檢測(cè)到所述DIV元素出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，執(zhí)行所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容的步驟。12.根據(jù)權(quán)利要求11所述的用于屏幕顯示設(shè)備的圖像展示方法，其特征在于，在所述按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容的步驟之后，執(zhí)行下述操作: 當(dāng)檢測(cè)到所述DIV元素不在瀏覽器可視區(qū)域時(shí)，停止所述動(dòng)態(tài)展示過程。13.一種用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，包括: 圖像獲得單元，用于獲得待展示圖像； 方式選擇單元，用于選擇在預(yù)先設(shè)定的容器中展示所述圖像的方式； 動(dòng)態(tài)展示單元，用于按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。14.根據(jù)權(quán)利要求13所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述方式選擇單元包括: 圖像參數(shù)獲取子單元，用于獲取所述圖像的寬度值和高度值； 圖像參數(shù)判斷子單元，用于判斷所述圖像的寬度值是否大于其高度值； 橫向滑動(dòng)選擇子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，選擇橫向滑動(dòng)的展示方式； 縱向滑動(dòng)選擇子單元，用于當(dāng)所述圖像參數(shù)判斷子單元得輸出為否時(shí)，選擇縱向滑動(dòng)的展示方式。15.根據(jù)權(quán)利要求14所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述方式選擇單元還包括: 容器參數(shù)獲取子單元，用于獲取所述容器的寬度值和高度值； 圖像等高縮放子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，將所述圖像進(jìn)行等比例縮放，使其高度值與所述容器的高度值相同；和/或， 圖像等寬縮放子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為否時(shí)，將所述圖像進(jìn)行等比例縮放，使其寬度值與所述容器的寬度值相同。16.根據(jù)權(quán)利要求15所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述方式選擇單元還包括: 第一縮放判斷子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為是時(shí)，判斷所述圖像的高度值是否大于所述容器的高度值，若是，觸發(fā)所述圖像等高縮放子單元。17.根據(jù)權(quán)利要求15所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述方式選擇單元還包括: 第二縮放判斷子單元，用于當(dāng)所述圖像參數(shù)判斷子單元的輸出為否時(shí)，判斷所述圖像的寬度值是否大于所述容器的寬度值，若是，觸發(fā)所述圖像等寬縮放子單元。18.根據(jù)權(quán)利要求14所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述動(dòng)態(tài)展示單元具體用于，按照預(yù)先設(shè)定的方向，在所述容器中滑動(dòng)顯示所述圖像的全部?jī)?nèi)容。19.根據(jù)權(quán)利要求13所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述動(dòng)態(tài)展示單元具體用于，循環(huán)地按照所選方式在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。20.根據(jù)權(quán)利要求13-19任一所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述動(dòng)態(tài)展示單元所用的容器為，web頁面中的、具有固定寬高屬性值的DIV元素。21.根據(jù)權(quán)利要求20所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述動(dòng)態(tài)展示單元具體用于，利用css的transit1n機(jī)制，通過調(diào)整所述圖像在所述容器中的顯示位置，在所述容器中動(dòng)態(tài)地展示所述圖像的全部?jī)?nèi)容。22.根據(jù)權(quán)利要求20所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，還包括: 可視檢測(cè)單元，用于檢測(cè)所述DIV元素是否出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)，若是，觸發(fā)所述動(dòng)態(tài)展示單元。23.根據(jù)權(quán)利要求22所述的用于屏幕顯示設(shè)備的圖像展示裝置，其特征在于，所述可視檢測(cè)單元還用于，在觸發(fā)所述動(dòng)態(tài)展示單元工作后，若檢測(cè)到所述DIV元素不在瀏覽器可視區(qū)域內(nèi)，則停止所述動(dòng)態(tài)展示單元的工作。
【文檔編號(hào)】G06F9/44GK105988793SQ201510073111
【公開日】2016年10月5日
【申請(qǐng)日】2015年2月11日
【發(fā)明人】張波
【申請(qǐng)人】阿里巴巴集團(tuán)控股有限公司