本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別涉及一種動(dòng)態(tài)網(wǎng)頁(yè)顯示方法和系統(tǒng)。

背景技術(shù)：

隨著網(wǎng)絡(luò)的迅速發(fā)展，互聯(lián)網(wǎng)成為大量信息的載體，文字、圖片、數(shù)據(jù)庫(kù)、音頻、視頻多媒體等不同類型數(shù)據(jù)大量出現(xiàn)于網(wǎng)絡(luò)，再加以各式各樣的網(wǎng)頁(yè)設(shè)計(jì)，人類進(jìn)入了信息爆炸的時(shí)代。截至2014年12月，僅中國(guó)的網(wǎng)頁(yè)數(shù)量達(dá)到1899億個(gè)，年增長(zhǎng)26.6％。隨著個(gè)人博客、自媒體的發(fā)展，以及互聯(lián)網(wǎng)媒體的快速發(fā)展，互聯(lián)網(wǎng)頁(yè)的數(shù)量將會(huì)以幾何級(jí)速的增長(zhǎng)。

互聯(lián)網(wǎng)傳播速度快，內(nèi)容共享自由，來(lái)自各方的人士隨時(shí)都可以在網(wǎng)上發(fā)布信息，所以互聯(lián)網(wǎng)成為了一個(gè)集各種信息為一體的資源網(wǎng)。為了吸引更多的用戶瀏覽和使用網(wǎng)站，網(wǎng)頁(yè)設(shè)計(jì)需要體現(xiàn)生動(dòng)性和易用性，同時(shí)能夠彰顯個(gè)性化的特點(diǎn)，以滿足更多的網(wǎng)絡(luò)用戶的需求。這就要求網(wǎng)頁(yè)設(shè)計(jì)呈現(xiàn)下列的發(fā)展趨勢(shì)：

1、用更具吸引力的方式呈現(xiàn)內(nèi)容。網(wǎng)頁(yè)的核心競(jìng)爭(zhēng)力是其所包含的內(nèi)容和功能，好的網(wǎng)頁(yè)是能夠給用戶提供更多的功能和內(nèi)容，能夠滿足用戶的多方面的、多層次的應(yīng)用需求，能夠吸引更多的用戶訪問(wèn)，并且擁有較高的回頭率。為此，網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中所采用的新鮮的概念和布局，可以增添觀感的新穎性，但是難以保證用戶深入了解網(wǎng)站內(nèi)容。為此，在設(shè)計(jì)方案中增加互動(dòng)元素，如動(dòng)態(tài)的方式，將信息呈現(xiàn)給用戶，而不是僅僅顯示枯燥的文字和邏輯，能夠使用戶在獲得網(wǎng)頁(yè)美妙的觀感時(shí)，還能夠深入消化網(wǎng)頁(yè)所提供的內(nèi)容信息。這有利于提高用戶的關(guān)注度，增加用戶的回頭率。

2、改善普通元素的設(shè)計(jì)。用戶對(duì)網(wǎng)頁(yè)的關(guān)注點(diǎn)，更多的集中在布局和色 彩搭配上，而網(wǎng)頁(yè)上的其他很多元素都沒(méi)有得到應(yīng)有的關(guān)注，造成了網(wǎng)絡(luò)資源的浪費(fèi)。如何提高用戶的關(guān)注度，能夠有效鼓勵(lì)用戶積極探索網(wǎng)頁(yè)的內(nèi)容，是網(wǎng)頁(yè)設(shè)計(jì)的主要任務(wù)。更多的網(wǎng)頁(yè)元素是用戶已經(jīng)熟悉的內(nèi)容，無(wú)法調(diào)動(dòng)用戶的積極性。為此，為普通元素添加動(dòng)態(tài)元素，增加網(wǎng)頁(yè)的吸引力，是網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展趨勢(shì)之一。

3、增強(qiáng)互動(dòng)性。網(wǎng)頁(yè)設(shè)計(jì)的最終目標(biāo)是吸引用戶的注意力，并引導(dǎo)和鼓勵(lì)用戶去點(diǎn)擊、操作頁(yè)面。這些操作行為包括注冊(cè)、查詢內(nèi)容、點(diǎn)擊下層網(wǎng)頁(yè)等，以形成網(wǎng)頁(yè)內(nèi)容和用戶之間的良性互動(dòng)。所以，互動(dòng)設(shè)計(jì)對(duì)于網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要，使得原來(lái)無(wú)法感知的元素，以更加逼真、形象的展示給用戶，用戶能夠探索到元素的更微小的細(xì)節(jié)，獲得深層的內(nèi)容信息。

4、人性化設(shè)計(jì)。網(wǎng)頁(yè)大量充斥的互聯(lián)網(wǎng)上，如何能夠使用戶很快的對(duì)網(wǎng)頁(yè)產(chǎn)生興趣，避免生硬、沉悶的網(wǎng)絡(luò)瀏覽體驗(yàn)。人性化的網(wǎng)頁(yè)設(shè)計(jì)能夠使用戶對(duì)網(wǎng)頁(yè)產(chǎn)生明顯的視覺(jué)層次、內(nèi)容層次和區(qū)分不同的版塊，在快速、粗略的掃描中找到自己所需要的信息，而不會(huì)錯(cuò)過(guò)有用的信息，實(shí)現(xiàn)文字和圖像、多媒體的有機(jī)融合，在簡(jiǎn)潔的網(wǎng)頁(yè)設(shè)計(jì)中提供豐富的內(nèi)容服務(wù)，并加深對(duì)網(wǎng)站的印象。

目前的互聯(lián)網(wǎng)上流行的網(wǎng)頁(yè)設(shè)計(jì)，內(nèi)容多偏重于文字，圖片或多媒體的內(nèi)容多是輔助，不能充分發(fā)揮圖片等多媒體信息的生動(dòng)性和活潑性的特點(diǎn)，網(wǎng)頁(yè)設(shè)計(jì)沉悶，不能迅速調(diào)動(dòng)用戶的興趣。同時(shí)，內(nèi)容活潑生動(dòng)的網(wǎng)頁(yè)多采用動(dòng)畫(huà)設(shè)計(jì)，用戶瀏覽網(wǎng)頁(yè)需要完成下載動(dòng)畫(huà)，在服務(wù)器端需要消耗大量的存儲(chǔ)資源和和網(wǎng)絡(luò)帶寬，在本地的計(jì)算機(jī)處也需要占用大量的計(jì)算資源，在網(wǎng)頁(yè)動(dòng)畫(huà)的數(shù)量較大時(shí)，會(huì)造成計(jì)算機(jī)運(yùn)行緩慢，動(dòng)畫(huà)顯示出現(xiàn)跳格、不連貫的現(xiàn)象。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明提供一種動(dòng)態(tài)網(wǎng)頁(yè)顯示方法和系統(tǒng)，加強(qiáng)了網(wǎng)頁(yè)的動(dòng)態(tài)顯示效果，以人機(jī)交互的方式啟動(dòng)動(dòng)態(tài)顯示，促進(jìn)了用戶探索網(wǎng)頁(yè)的興趣，提高網(wǎng)頁(yè)的吸引力。同時(shí)，該方案進(jìn)一步降低了網(wǎng)絡(luò)側(cè)的存儲(chǔ)資源占用和帶寬占用，采用圖 片的資源獲得了動(dòng)態(tài)的顯示效果，而且也對(duì)于節(jié)約本地計(jì)算機(jī)的運(yùn)算資源，提高計(jì)算機(jī)的運(yùn)行效率，減小系統(tǒng)資源占用，具有積極的意義。

本發(fā)明的技術(shù)方案提供了一種動(dòng)態(tài)網(wǎng)頁(yè)顯示方法，包括以下步驟：

選取需要?jiǎng)討B(tài)顯示的圖片；

在網(wǎng)頁(yè)html程序中設(shè)置所述圖片為元素；

所述元素的CSS屬性設(shè)置為動(dòng)態(tài)顯示效果；

在網(wǎng)頁(yè)中點(diǎn)擊所述圖片，則觸發(fā)啟動(dòng)動(dòng)態(tài)顯示；

所述圖片顯示為動(dòng)態(tài)效果。

進(jìn)一步的，所述圖片的數(shù)量為至少一個(gè)。

進(jìn)一步的，所述不同圖片的動(dòng)畫(huà)效果分別獨(dú)立設(shè)置。

進(jìn)一步的，所述元素的CSS屬性設(shè)置為動(dòng)態(tài)顯示效果，進(jìn)一步包括：

在CSS屬性中為所述動(dòng)態(tài)顯示效果設(shè)置動(dòng)畫(huà)方案。

進(jìn)一步的，所述在網(wǎng)頁(yè)中點(diǎn)擊所述圖片，則觸發(fā)所述圖片啟動(dòng)動(dòng)態(tài)顯示，進(jìn)一步包括：

獲取鼠標(biāo)的坐標(biāo)；

將鼠標(biāo)的坐標(biāo)和所述圖片的位置比較，判斷二者是否重合；

鼠標(biāo)與所述元素的位置重合時(shí)，同時(shí)點(diǎn)擊鼠標(biāo)，觸發(fā)所述圖片啟動(dòng)動(dòng)態(tài)顯示。

進(jìn)一步的，所述圖片由靜止顯示轉(zhuǎn)變?yōu)閯?dòng)態(tài)顯示時(shí)，所處位置不發(fā)生改變。

進(jìn)一步的，所述圖片的動(dòng)畫(huà)方案尚未結(jié)束，若鼠標(biāo)離開(kāi)所述圖片位置，二者由重合轉(zhuǎn)變?yōu)椴恢睾?，則繼續(xù)該動(dòng)畫(huà)方案。

進(jìn)一步的，點(diǎn)擊所述圖片結(jié)束后，網(wǎng)頁(yè)繼續(xù)偵聽(tīng)鼠標(biāo)點(diǎn)擊所述圖片的信號(hào)。

本發(fā)明的技術(shù)方案還提供了一種動(dòng)態(tài)網(wǎng)頁(yè)顯示系統(tǒng)，包括動(dòng)態(tài)設(shè)置單元，控制單元，顯示單元，其中，

動(dòng)態(tài)設(shè)置單元用于設(shè)置圖片的動(dòng)態(tài)顯示效果；

控制單元用于控制動(dòng)態(tài)顯示單元的觸發(fā)條件；

顯示單元用于展示圖片的動(dòng)態(tài)或靜態(tài)效果。

進(jìn)一步的，所述控制單元由鼠標(biāo)控制。

本發(fā)明技術(shù)方案由于在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中調(diào)用了html網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的CSS屬性，能夠?qū)㈧o態(tài)的圖片資源實(shí)現(xiàn)動(dòng)態(tài)顯示，網(wǎng)頁(yè)展示的效果更生動(dòng)形象，有利于用戶培養(yǎng)進(jìn)一步探索網(wǎng)頁(yè)的興趣，提高了網(wǎng)頁(yè)的吸引力。同時(shí)，該方案用圖片代替了動(dòng)畫(huà)，文件傳輸和運(yùn)算量大大降低，進(jìn)一步降低了網(wǎng)絡(luò)側(cè)的存儲(chǔ)資源占用和帶寬占用，而且對(duì)于節(jié)約本地計(jì)算機(jī)的運(yùn)算資源，提高計(jì)算機(jī)的運(yùn)行效率，減小系統(tǒng)資源占用，具有積極的意義。

本發(fā)明的其它特征和優(yōu)點(diǎn)將在隨后的說(shuō)明書(shū)中闡述，并且，部分地從說(shuō)明書(shū)中變得顯而易見(jiàn)，或者通過(guò)實(shí)施本發(fā)明而了解。本發(fā)明的目的和其他優(yōu)點(diǎn)可通過(guò)在所寫(xiě)的說(shuō)明書(shū)、權(quán)利要求書(shū)、以及附圖中所特別指出的結(jié)構(gòu)來(lái)實(shí)現(xiàn)和獲得。

下面通過(guò)附圖和實(shí)施例，對(duì)本發(fā)明的技術(shù)方案做進(jìn)一步的詳細(xì)描述。

附圖說(shuō)明

附圖用來(lái)提供對(duì)本發(fā)明的進(jìn)一步理解，并且構(gòu)成說(shuō)明書(shū)的一部分，與本發(fā)明的實(shí)施例一起用于解釋本發(fā)明，并不構(gòu)成對(duì)本發(fā)明的限制。在附圖中：

圖1為本發(fā)明實(shí)施例一中動(dòng)態(tài)網(wǎng)頁(yè)顯示方法的流程圖；

圖2為本發(fā)明實(shí)施例二中多個(gè)圖片同時(shí)動(dòng)態(tài)顯示的方法流程圖；

圖3為本發(fā)明實(shí)施例一和二中網(wǎng)頁(yè)內(nèi)容識(shí)別系統(tǒng)的結(jié)構(gòu)圖。

具體實(shí)施方式

以下結(jié)合附圖對(duì)本發(fā)明的優(yōu)選實(shí)施例進(jìn)行說(shuō)明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實(shí)施例僅用于說(shuō)明和解釋本發(fā)明，并不用于限定本發(fā)明。

圖1為本發(fā)明實(shí)施例一中動(dòng)態(tài)網(wǎng)頁(yè)顯示方法的流程圖。如圖1所示，該流程包括以下步驟：

步驟101、選取需要?jiǎng)討B(tài)顯示的圖片。

根據(jù)網(wǎng)頁(yè)設(shè)計(jì)的需要，選取需要?jiǎng)討B(tài)顯示的圖片作為網(wǎng)頁(yè)編輯的對(duì)象；

所述圖片的數(shù)量為至少一個(gè)。

步驟102、在網(wǎng)頁(yè)html程序中設(shè)置所述圖片為元素。

不同的圖片分別設(shè)置為不同的元素；

不同的元素的動(dòng)態(tài)顯示在元素設(shè)置里獨(dú)立設(shè)定。

步驟103、在元素CSS屬性中設(shè)置動(dòng)態(tài)顯示效果。

在CSS屬性中為不同的圖片分別設(shè)置獨(dú)立的動(dòng)畫(huà)方案。

步驟104、在網(wǎng)頁(yè)中點(diǎn)擊圖片，圖片觸發(fā)動(dòng)態(tài)顯示。

獲取鼠標(biāo)的坐標(biāo)；

將鼠標(biāo)的坐標(biāo)和所述圖片的位置比較，判斷二者是否重合；

鼠標(biāo)與所述元素的位置重合時(shí)，同時(shí)點(diǎn)擊鼠標(biāo)，觸發(fā)所述圖片啟動(dòng)動(dòng)態(tài)顯示。

步驟105、圖片顯示為動(dòng)態(tài)效果。

圖片由靜止顯示轉(zhuǎn)變?yōu)閯?dòng)態(tài)顯示時(shí)，所處位置不發(fā)生改變；

圖片的動(dòng)畫(huà)方案尚未結(jié)束，若鼠標(biāo)離開(kāi)所述圖片位置，二者由重合轉(zhuǎn)變?yōu)椴恢睾?，則繼續(xù)該動(dòng)畫(huà)方案；

點(diǎn)擊圖片一次后，網(wǎng)頁(yè)繼續(xù)偵聽(tīng)鼠標(biāo)點(diǎn)擊圖片的信號(hào)。

圖2為本發(fā)明實(shí)施例二中多個(gè)圖片同時(shí)動(dòng)態(tài)顯示的方法流程圖。如圖2所示，該流程包括以下步驟：

步驟201、選取需要?jiǎng)討B(tài)顯示的圖片。

根據(jù)網(wǎng)頁(yè)設(shè)計(jì)的需要，選取需要?jiǎng)討B(tài)顯示的圖片作為網(wǎng)頁(yè)編輯的對(duì)象；

所述圖片的數(shù)量為至少一個(gè)。

步驟202、在網(wǎng)頁(yè)html程序中設(shè)置所述圖片為元素。

不同的圖片分別設(shè)置為不同的元素；

不同的元素的動(dòng)態(tài)顯示在元素設(shè)置里獨(dú)立設(shè)定。

步驟203、在元素CSS屬性中設(shè)置動(dòng)態(tài)顯示效果。

在CSS屬性中為不同的圖片分別設(shè)置獨(dú)立的動(dòng)畫(huà)方案。

步驟204、在網(wǎng)頁(yè)中點(diǎn)擊圖片A，圖片A觸發(fā)動(dòng)態(tài)顯示。

獲取鼠標(biāo)的坐標(biāo)，判斷與圖片A的位置重合；

鼠標(biāo)與圖片A的位置重合時(shí)，同時(shí)點(diǎn)擊鼠標(biāo)，觸發(fā)圖片A啟動(dòng)動(dòng)態(tài)顯示。

步驟205、圖片A顯示為動(dòng)態(tài)效果。

圖片A由靜止顯示轉(zhuǎn)變?yōu)閯?dòng)態(tài)顯示時(shí)，所處位置不發(fā)生改變；

圖片A的動(dòng)畫(huà)方案尚未結(jié)束，若鼠標(biāo)離開(kāi)圖片A位置，二者由重合轉(zhuǎn)變?yōu)椴恢睾希瑒t繼續(xù)該動(dòng)畫(huà)方案；

點(diǎn)擊圖片A一次結(jié)束后，網(wǎng)頁(yè)繼續(xù)偵聽(tīng)鼠標(biāo)點(diǎn)擊圖片的信號(hào)。

步驟206、在網(wǎng)頁(yè)中點(diǎn)擊圖片B，圖片B觸發(fā)動(dòng)態(tài)顯示。

獲取鼠標(biāo)的坐標(biāo)，判斷與圖片B的位置重合；

鼠標(biāo)與圖片B的位置重合時(shí)，同時(shí)點(diǎn)擊鼠標(biāo)，觸發(fā)圖片B啟動(dòng)動(dòng)態(tài)顯示。

步驟207、圖片B顯示為動(dòng)態(tài)效果。

圖片B由靜止顯示轉(zhuǎn)變?yōu)閯?dòng)態(tài)顯示時(shí)，所處位置不發(fā)生改變；

圖片B的動(dòng)畫(huà)方案尚未結(jié)束，若鼠標(biāo)離開(kāi)圖片B位置，則繼續(xù)該動(dòng)畫(huà)方案；

點(diǎn)擊圖片B一次結(jié)束后，網(wǎng)頁(yè)繼續(xù)偵聽(tīng)鼠標(biāo)點(diǎn)擊圖片的信號(hào)。

為了實(shí)現(xiàn)上述網(wǎng)頁(yè)內(nèi)容識(shí)別流程，本實(shí)施例還提供了一種動(dòng)態(tài)網(wǎng)頁(yè)顯示系統(tǒng)，圖3為本發(fā)明實(shí)施例一中動(dòng)態(tài)網(wǎng)頁(yè)顯示系統(tǒng)的結(jié)構(gòu)圖。如圖3所示，該系統(tǒng)包括動(dòng)態(tài)設(shè)置單元301，控制單元302，顯示單元303，其中，

動(dòng)態(tài)設(shè)置單元用于設(shè)置圖片的動(dòng)態(tài)顯示效果；

控制單元用于控制動(dòng)態(tài)顯示單元的觸發(fā)條件；

顯示單元用于展示圖片的動(dòng)態(tài)或靜態(tài)效果。

進(jìn)一步的，所述控制單元由鼠標(biāo)控制。

本發(fā)明技術(shù)方案由于在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中調(diào)用了html網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的CSS屬性，能夠?qū)㈧o態(tài)的圖片資源實(shí)現(xiàn)動(dòng)態(tài)顯示，網(wǎng)頁(yè)展示的效果更生動(dòng)形象，有利于用戶培養(yǎng)進(jìn)一步探索網(wǎng)頁(yè)的興趣，提高了網(wǎng)頁(yè)的吸引力。同時(shí)，該方案用圖片代替了動(dòng)畫(huà)，文件傳輸和運(yùn)算量大大降低，進(jìn)一步降低了網(wǎng)絡(luò)側(cè)的存儲(chǔ)資源占用和帶寬占用，而且對(duì)于節(jié)約本地計(jì)算機(jī)的運(yùn)算資源，提高計(jì)算機(jī)的運(yùn)行效率，減小系統(tǒng)資源占用，具有積極的意義。

本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白，本發(fā)明的實(shí)施例可提供為方法、系統(tǒng)、或計(jì)算機(jī)程序產(chǎn)品。因此，本發(fā)明可采用完全硬件實(shí)施例、完全軟件實(shí)施例、或結(jié)合軟件和硬件方面的實(shí)施例的形式。而且，本發(fā)明可采用在一個(gè)或多個(gè)其中包含有計(jì)算機(jī)可用程序代碼的計(jì)算機(jī)可用存儲(chǔ)介質(zhì)(包括但不限于磁盤(pán)存儲(chǔ)器和光學(xué)存儲(chǔ)器等)上實(shí)施的計(jì)算機(jī)程序產(chǎn)品的形式。

本發(fā)明是參照根據(jù)本發(fā)明實(shí)施例的方法、設(shè)備(系統(tǒng))、和計(jì)算機(jī)程序產(chǎn)品的流程圖和/或方框圖來(lái)描述的。應(yīng)理解可由計(jì)算機(jī)程序指令實(shí)現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結(jié)合?？商峁┻@些計(jì)算機(jī)程序指令到通用計(jì)算機(jī)、專用計(jì)算機(jī)、嵌入式處理機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器以產(chǎn)生一個(gè)機(jī)器，使得通過(guò)計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生用于實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能的裝置。

這些計(jì)算機(jī)程序指令也可存儲(chǔ)在能引導(dǎo)計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備以特定方式工作的計(jì)算機(jī)可讀存儲(chǔ)器中，使得存儲(chǔ)在該計(jì)算機(jī)可讀存儲(chǔ)器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能。

這些計(jì)算機(jī)程序指令也可裝載到計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備上，使得在計(jì)算機(jī)或其他可編程設(shè)備上執(zhí)行一系列操作步驟以產(chǎn)生計(jì)算機(jī)實(shí)現(xiàn)的處 理，從而在計(jì)算機(jī)或其他可編程設(shè)備上執(zhí)行的指令提供用于實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能的步驟。

顯然，本領(lǐng)域的技術(shù)人員可以對(duì)本發(fā)明進(jìn)行各種改動(dòng)和變型而不脫離本發(fā)明的精神和范圍。這樣，倘若本發(fā)明的這些修改和變型屬于本發(fā)明權(quán)利要求及其等同技術(shù)的范圍之內(nèi)，則本發(fā)明也意圖包含這些改動(dòng)和變型在內(nèi)。