一種用戶懸??蚓彌_方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明公開了一種懸停框緩沖方法及系統(tǒng),該方法包括如下步驟:獲得觸發(fā)器圖標(biāo)的位置;設(shè)置懸??虻恼故疚恢茫桓鶕?jù)所述觸發(fā)器圖標(biāo)所在的位置以及所述懸??虻恼故疚恢迷O(shè)置緩沖區(qū),觸發(fā)器在所述緩沖區(qū)觸發(fā)時(shí),所述懸??虿皇掌穑凰鼍彌_區(qū)的識(shí)別為:識(shí)別若干所述觸發(fā)器圖標(biāo)的邊界點(diǎn)位置,識(shí)別若干所述懸??虻倪吔琰c(diǎn)的位置,由上述邊界點(diǎn)構(gòu)成的多邊形區(qū)域?yàn)榫彌_區(qū)域。按照本發(fā)明實(shí)現(xiàn)的懸??蚓彌_方法及系統(tǒng),將該緩沖區(qū)域與觸發(fā)器進(jìn)行了有效的映射,使得多個(gè)觸發(fā)器被觸發(fā)時(shí),能夠兼容多個(gè)觸發(fā)任務(wù)的響應(yīng),優(yōu)化了用戶的操作體驗(yàn)。
【專利說明】
一種用戶懸??蚓彌_方法及系統(tǒng)
技術(shù)領(lǐng)域
[0001]本發(fā)明屬于網(wǎng)絡(luò)技術(shù)領(lǐng)域,更具體地,涉及一種用戶懸??蚓彌_方法及系統(tǒng)。
【背景技術(shù)】
[0002]在現(xiàn)有技術(shù)的網(wǎng)站操作中,通過會(huì)將鼠標(biāo)懸停于觸發(fā)器圖標(biāo)上,在這樣的情況之下,會(huì)隨著鼠標(biāo)的觸發(fā)展示一個(gè)懸???,可以在該懸??蛑姓故靖嗟脑敿?xì)資料或者是進(jìn)行選項(xiàng)卡的設(shè)置。在大部分的頁面設(shè)置中,在懸??蚝蛨D標(biāo)處是存在一個(gè)斷開的區(qū)域的,這個(gè)常見的斷開區(qū)域的范圍是從I像素到3像素不等,當(dāng)鼠標(biāo)經(jīng)過這個(gè)斷開區(qū)域的時(shí)候會(huì)處于既不接觸觸發(fā)器圖標(biāo),也不接觸懸??虻臓顟B(tài),會(huì)導(dǎo)致程序判斷過程中出現(xiàn)觸發(fā)狀態(tài)丟失的情況,導(dǎo)致懸??虮缓芸焓掌稹?br>[0003]現(xiàn)有技術(shù)中對(duì)上述問題的解決方式是,在用戶鼠標(biāo)離開觸發(fā)器圖標(biāo)之后添加一個(gè)程序任務(wù),例如當(dāng)鼠標(biāo)移出觸發(fā)器圖標(biāo)區(qū)域時(shí)設(shè)定一個(gè)時(shí)間,讓懸??蛞廊伙@示300ms,讓鼠標(biāo)在極短時(shí)間內(nèi)處于斷開區(qū)域時(shí)能讓懸停框不被隱藏。但是這個(gè)方案在用戶使用較長(zhǎng)的鼠標(biāo)移動(dòng)路徑的時(shí)候會(huì)發(fā)生極大程度的不兼容,長(zhǎng)距離移動(dòng)過程中超過了懸??虻娘@示時(shí)間會(huì)導(dǎo)致懸??虮浑[藏。
【發(fā)明內(nèi)容】
[0004]針對(duì)現(xiàn)有技術(shù)的以上缺陷或改進(jìn)需求,本發(fā)明提供了一種用戶懸??蚓彌_方法和系統(tǒng),由此解決現(xiàn)有技術(shù)中的多個(gè)觸發(fā)器之間的兼容問題。
[0005]為實(shí)現(xiàn)上述目的,按照本發(fā)明的一個(gè)方面,提供了一種用戶懸??蚓彌_方法,其特征在于,該方法包括如下步驟:
[0006]獲得觸發(fā)器圖標(biāo)的位置;
[0007]設(shè)置懸??虻恼故疚恢茫?br>[0008]根據(jù)所述觸發(fā)器圖標(biāo)所在的位置以及所述懸??虻恼故疚恢迷O(shè)置緩沖區(qū),觸發(fā)器在所述緩沖區(qū)觸發(fā)時(shí),所述懸??虿皇掌穑|發(fā)器離開所述緩沖區(qū)時(shí),所述懸??蚴掌?;
[0009]所述緩沖區(qū)的識(shí)別為:識(shí)別若干所述觸發(fā)器圖標(biāo)的邊界點(diǎn)位置,識(shí)別若干所述懸??虻倪吔琰c(diǎn)的位置,由上述邊界點(diǎn)構(gòu)成的多邊形區(qū)域?yàn)榫彌_區(qū)域。
[0010]進(jìn)一步地,所述懸??虻恼故疚恢迷谒鲇|發(fā)器圖標(biāo)的四周。
[0011]進(jìn)一步地,所述觸發(fā)器圖標(biāo)的邊界點(diǎn)選擇為對(duì)角的兩個(gè)點(diǎn),所述觸發(fā)器圖標(biāo)的邊界點(diǎn)選擇為所述懸??虻目拷鲇|發(fā)器圖標(biāo)最上端的兩個(gè)點(diǎn)。
[0012]另一方面,本發(fā)明還提供了一種用戶懸??蚓彌_系統(tǒng),其特征在于,該系統(tǒng)包括:
[0013]觸發(fā)器圖標(biāo)識(shí)別模塊,用于識(shí)別觸發(fā)器圖標(biāo)的坐標(biāo);
[0014]觸發(fā)點(diǎn)識(shí)別模塊,用于識(shí)別觸發(fā)點(diǎn)的位置坐標(biāo);
[0015]懸停框展示位置判定模塊,用于接收所述觸發(fā)器圖標(biāo)的坐標(biāo),以及用戶終端上的會(huì)產(chǎn)生沖突顯示的其它圖標(biāo)的坐標(biāo),來判定所述懸??蛟谟|發(fā)器圖標(biāo)周圍的顯示位置,并實(shí)時(shí)生成懸停框顯示位置的坐標(biāo);
[0016]緩沖區(qū)位置設(shè)定模塊,用于接收所述觸發(fā)器圖標(biāo)的坐標(biāo)和所述懸??蝻@示位置的坐標(biāo),形成所述觸發(fā)器圖標(biāo)和所述懸??驁D標(biāo)之間的緩沖區(qū);
[0017]緩沖區(qū)緩沖邏輯設(shè)置模塊,用于實(shí)時(shí)讀取所述緩沖區(qū)位置設(shè)定模塊中緩沖區(qū)的位置,進(jìn)行緩沖邏輯的設(shè)定,所述緩沖邏輯為:觸發(fā)器在所述緩沖區(qū)觸發(fā)時(shí),所述懸停框不收起,觸發(fā)器離開所述緩沖區(qū)時(shí),所述懸停框收起。
[0018]進(jìn)一步地,所述懸??虻恼故疚恢迷谒鲇|發(fā)器圖標(biāo)的四周。
[0019]總體而言,通過本發(fā)明所構(gòu)思的以上技術(shù)方案與現(xiàn)有技術(shù)相比,能夠取得下列有益效果:
[0020 ]針對(duì)現(xiàn)有技術(shù)中的300ms的時(shí)間范圍之內(nèi),如果在300ms的時(shí)間范圍之內(nèi)多次執(zhí)行觸發(fā)器的觸發(fā),會(huì)導(dǎo)致懸浮框重疊,和多個(gè)任務(wù)的疊加的問題,導(dǎo)致多觸發(fā)器之間移動(dòng)的時(shí)候出現(xiàn)的不兼容,提出了一種全新的懸??蚓彌_技術(shù),即通過建立緩沖區(qū)的方式來保持觸發(fā)器的觸發(fā),而觸發(fā)器離開該緩沖區(qū)后,則停止觸發(fā),保證鼠標(biāo)在移動(dòng)過程中不丟失目標(biāo),優(yōu)化用戶的操作體驗(yàn)。
【附圖說明】
[0021]圖1為按照本發(fā)明實(shí)現(xiàn)的用戶懸??蚓彌_方法的執(zhí)行示意框圖;
[0022]圖2為按照本發(fā)明實(shí)現(xiàn)的用戶懸??蚓彌_系統(tǒng)的模塊結(jié)構(gòu)示意圖;
[0023]圖3為按照本發(fā)明實(shí)現(xiàn)的用戶懸??蚓彌_的其中一種實(shí)施例的應(yīng)用場(chǎng)景;
[0024]圖4為按照本發(fā)明實(shí)現(xiàn)的用戶懸??蚓彌_的其中一種實(shí)施例的懸停框的計(jì)算場(chǎng)景示意圖;
[0025]圖5為按照本發(fā)明實(shí)現(xiàn)的用戶懸??蚓彌_的其中一種實(shí)施例的緩沖區(qū)域建立的示意圖。
【具體實(shí)施方式】
[0026]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白,以下結(jié)合附圖及實(shí)施例,對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解,此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明,并不用于限定本發(fā)明。此外,下面所描述的本發(fā)明各個(gè)實(shí)施方式中所涉及到的技術(shù)特征只要彼此之間未構(gòu)成沖突就可以相互組合。
[0027]如圖1所示,按照本發(fā)明的一個(gè)方面,首先提出了一種用戶懸??蚓彌_方法,其中該方法主要包括如下步驟:
[0028]獲得觸發(fā)器圖標(biāo)的位置;
[0029]設(shè)置懸停框的展示位置;
[0030]根據(jù)觸發(fā)器圖標(biāo)所在的位置以及懸??虻恼故疚恢迷O(shè)置多個(gè)緩沖區(qū),在觸發(fā)器在該緩沖區(qū)觸發(fā)時(shí),懸??蛞膊槐浑[藏,而觸發(fā)器離開該緩沖區(qū)后,懸??騽t被收起;
[0031 ]其中懸??虻恼故疚恢玫囊?guī)則設(shè)置如下:
[0032]在觸發(fā)器圖標(biāo)的周圍一段距離范圍內(nèi)進(jìn)行懸??虻恼故荆瑸槭沟糜脩裟軌蜉^為方便的從觸發(fā)器圖標(biāo)中跳轉(zhuǎn)到懸??蛑衼磉x取相應(yīng)的選項(xiàng)操作或者是觀看信息。
[0033]其中在觸發(fā)器圖標(biāo)周圍的懸??虻奈恢每梢愿鶕?jù)實(shí)際顯示情況靈活調(diào)整,例如可以根據(jù)懸??蚺c其它顯示內(nèi)容的沖突進(jìn)行調(diào)整。
[0034]其中根據(jù)觸發(fā)器圖標(biāo)所在的位置以及懸??虻奈恢迷O(shè)置緩沖區(qū)的方法為:
[0035]該緩沖區(qū)的建立規(guī)則如下:
[0036]識(shí)別觸發(fā)器圖標(biāo)的邊界點(diǎn)位置,識(shí)別懸??虻倪吔琰c(diǎn)的位置,由上述邊界點(diǎn)構(gòu)成的多變形區(qū)域則限定為緩沖區(qū)域。
[0037]當(dāng)然這種邊界點(diǎn)位置的選擇方式可以采用多種方式,具體而言,主要是根據(jù)觸發(fā)器圖標(biāo)和懸停框的位置來選擇邊界節(jié)點(diǎn)限定緩沖區(qū)域,一般而言,該多邊形區(qū)域?yàn)樗膫€(gè)邊界節(jié)點(diǎn)構(gòu)成的區(qū)域。
[0038]總而言之,按照本發(fā)明實(shí)現(xiàn)的用戶懸??蚓彌_方法,主要是在鼠標(biāo)所停放的區(qū)域和懸??蛑型ㄟ^頁面位置判斷計(jì)算建立了一個(gè)緩沖區(qū)域,該緩沖區(qū)域的計(jì)算主要是通過計(jì)算懸??虻奈恢?,從而通過該位置建立一個(gè)緩沖區(qū)域,使得用戶的鼠標(biāo)在這整個(gè)區(qū)域中的觸發(fā)都不會(huì)讓懸停框消失,而離開該區(qū)域后,則懸??蚴掌穑@樣就不會(huì)存在多觸發(fā)的兼容性問題。
[0039]具體而言,其中觸發(fā)器圖標(biāo)可以是社交網(wǎng)絡(luò)中用戶圖像,或者是用戶姓名,或者是其他可以引發(fā)選項(xiàng)卡引出的圖標(biāo);
[0040]懸??蚩梢允菐в羞x項(xiàng)卡內(nèi)容的展示框,也可以是點(diǎn)擊用戶圖像所展示的用戶資料?目息;
[0041]其中上述觸發(fā)器圖標(biāo)的位置以及懸停框的位置的獲取主要是用其在顯示終端上的坐標(biāo)來表達(dá)和進(jìn)行處理;
[0042]緩沖區(qū)的緩沖邏輯設(shè)置方式為:使得鼠標(biāo)在上述區(qū)域觸發(fā)時(shí),不會(huì)產(chǎn)生懸??虻氖掌?。
[0043]如圖2所示,另外一方面,本發(fā)明還提供了一種用戶懸??蚓彌_系統(tǒng),該系統(tǒng)主要包括如下部分:
[0044]觸發(fā)器圖標(biāo)識(shí)別模塊,用于識(shí)別觸發(fā)器圖標(biāo)的坐標(biāo);
[0045]鼠標(biāo)觸發(fā)點(diǎn)識(shí)別模塊,用于識(shí)別鼠標(biāo)觸發(fā)的位置;
[0046]懸??蛘故疚恢门卸K,用于接受觸發(fā)器圖標(biāo)的坐標(biāo),以及終端上的會(huì)產(chǎn)生沖突顯示的其它圖,標(biāo)的坐標(biāo),來判定懸??蛟谟|發(fā)器圖標(biāo)周圍的顯示位置,并實(shí)時(shí)生成懸??蝻@示位置的坐標(biāo);
[0047]緩沖區(qū)位置設(shè)定模塊,用于接受觸發(fā)器圖標(biāo)的坐標(biāo)和懸??蝻@示位置的坐標(biāo),形成觸發(fā)器圖標(biāo)和懸??驁D標(biāo)之間的緩沖區(qū);
[0048]緩沖區(qū)緩沖邏輯設(shè)置模塊,其實(shí)時(shí)讀取緩沖區(qū)位置設(shè)定模塊中緩沖區(qū)的位置,從而來進(jìn)行相應(yīng)的緩沖邏輯的設(shè)定。
[0049]其中建立緩沖區(qū)位置的坐標(biāo)是觸發(fā)器圖標(biāo)的坐標(biāo)和懸??蝻@示位置的邊界上的坐標(biāo)點(diǎn),由此形成多邊型的緩沖區(qū)域。
[0050]其中緩沖區(qū)緩沖邏輯的設(shè)置可以為多種形式,可以是添加程序任務(wù),使得識(shí)別出鼠標(biāo)在上述區(qū)域的時(shí)候,懸停框也不會(huì)收起。
[0051]其中,懸??蛟谟|發(fā)器圖標(biāo)周圍的顯示位置的安定主要按照如下的形式:
[0052]獲得一個(gè)觸發(fā)器圖標(biāo)定位起始坐標(biāo)(x,y),獲得觸發(fā)器圖標(biāo)的高度和寬度信息,獲得可能產(chǎn)生沖突顯示的其它圖標(biāo)的高度和寬度信息,通過上述信息的運(yùn)算判定來解決懸??蛟谟|發(fā)器周圍哪個(gè)位置顯示。
[0053]實(shí)施例1
[0054]如圖3所示,其中展示了一種用戶懸??蚓彌_方法的【具體實(shí)施方式】的實(shí)施例,在本實(shí)施例中是采用社交網(wǎng)絡(luò)中的用戶頭像展示的應(yīng)用環(huán)境來做說明的,其中該用戶頭像在瀏覽器界面上進(jìn)行顯示,懸??蛑饕故镜氖怯脩舻脑敿?xì)資料信息,其中,按照本實(shí)施例,主要執(zhí)行如下的步驟:
[0055]STEPl:獲得頭像圖片的位置信息;并且建立該頭像的定位起始坐標(biāo)(x,y),該坐標(biāo)值可以是頭像圖片的中心點(diǎn),也可以是邊界點(diǎn),在其它的實(shí)施方式中可以做更為靈活的選擇;
[0056]STEP2:設(shè)置懸??虻恼故疚恢?
[0057]如圖4所示,獲得如下參數(shù):瀏覽器窗口高度、瀏覽器窗口寬度、懸??蚋叨取彝??qū)挾?、懸??驁D片的大?。?br>[0058]并按照如下規(guī)則執(zhí)行懸??虻恼故疚恢?
[0059]當(dāng)瀏覽器窗口寬度-頭像X坐標(biāo)-懸???qū)挾却笥诹?,并且瀏覽器窗口高度-頭像X坐標(biāo)_(懸??蚋叨?100)大于零,則懸??虻哪J(rèn)展示位置為{x+75,y+75};
[0060]當(dāng)瀏覽器窗口寬度-頭像X坐標(biāo)-懸???qū)挾刃∮诹?,則懸停框的默認(rèn)展示位置為&-懸???qū)挾?25,7+75};
[0061]當(dāng)瀏覽器窗口高度-頭像y坐標(biāo)-(懸??蚋叨?50)小于零,則懸停框的默認(rèn)展示位置為{x+75,y-瀏覽器窗口高度-25};
[0062]當(dāng)瀏覽器窗口寬度-頭像X坐標(biāo)-懸停框?qū)挾刃∮诹?,并且瀏覽器窗口高度-頭像X坐標(biāo)_(懸停框高度-100)小于零,則懸??虻哪J(rèn)展示位置為Ix-懸???qū)挾?25,y_瀏覽器窗口高度-25};
[0063]當(dāng)然,在本實(shí)施例中主要是展示了在頭像的四周進(jìn)行圖像顯示的判斷,主要是為了滿足在瀏覽器寬度范圍內(nèi)進(jìn)行相應(yīng)顯示的要求,但是在實(shí)際的操作中,還可以根據(jù)其它會(huì)產(chǎn)生沖突顯示的圖標(biāo)來進(jìn)行對(duì)比判斷,從而生成懸??虻倪x擇位置;
[0064]STEP3:建立緩沖區(qū)
[0065]按照如圖5所示的方式來設(shè)置的緩沖區(qū),基于位置的懸??蛘故镜奈恢貌煌?,緩沖區(qū)域的計(jì)算方式不同,按照如圖所示的位置范圍,主要是以如下方式被計(jì)算:
[0066]位置1: C-B-G-H
[0067]位置2: A-D-G-H
[0068]位置3: A-D-E-F
[0069]位置4: C-B-E-F
[0070]當(dāng)然,如前所述,對(duì)該緩沖區(qū)的形式并進(jìn)行嚴(yán)格的限定,只要能夠選擇相應(yīng)的圖標(biāo)和懸??虻倪吔琰c(diǎn)來生成緩沖區(qū)域即可。
[0071]STEP4:為緩沖區(qū)添加邏輯
[0072]完成建立緩沖區(qū)之后,就是添加邏輯,讓用戶鼠標(biāo)在任意時(shí)間內(nèi)停留于緩存區(qū)域中時(shí)均保持懸??虻某掷m(xù)展示,當(dāng)然,上述邏輯并不嚴(yán)格限定為停留任意時(shí)間,為更加靈活地調(diào)整懸??颍鲜鲞壿嫷奶砑?,還可使得上述懸??蛲A粢欢伪容^長(zhǎng)的時(shí)間。
[0073]按照本發(fā)明實(shí)現(xiàn)的用戶懸??蚨噙呅尉彌_技術(shù),改變了傳統(tǒng)意義上的懸停和隱藏的交互方式,采用的全新的自動(dòng)定位的方式重新定義了頭像(觸發(fā)器)和懸???面板)的關(guān)系,讓用戶在使用的過程中不會(huì)出現(xiàn)由于鼠標(biāo)觸發(fā)過程中懸??虻亩嘤|發(fā)的兼容性問題,提高了用戶進(jìn)行鼠標(biāo)操作的體驗(yàn)。
[0074]本領(lǐng)域的技術(shù)人員容易理解,以上所述僅為本發(fā)明的較佳實(shí)施例而已,并不用以限制本發(fā)明,凡在本發(fā)明的精神和原則之內(nèi)所作的任何修改、等同替換和改進(jìn)等,均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
【主權(quán)項(xiàng)】
1.一種用戶懸??蚓彌_方法,其特征在于,該方法包括如下步驟: 獲得觸發(fā)器圖標(biāo)的位置; 設(shè)置懸??虻恼故疚恢茫?根據(jù)所述觸發(fā)器圖標(biāo)所在的位置以及所述懸??虻恼故疚恢迷O(shè)置緩沖區(qū),觸發(fā)器在所述緩沖區(qū)觸發(fā)時(shí),所述懸??虿皇掌?,觸發(fā)器離開所述緩沖區(qū)時(shí),所述懸??蚴掌?; 所述緩沖區(qū)的識(shí)別為:識(shí)別若干所述觸發(fā)器圖標(biāo)的邊界點(diǎn)位置,識(shí)別若干所述懸??虻倪吔琰c(diǎn)的位置,由上述邊界點(diǎn)構(gòu)成的多邊形區(qū)域?yàn)榫彌_區(qū)域。2.如權(quán)利要求1所述的用戶懸停框緩沖方法,其特征在于,所述懸停框的展示位置在所述觸發(fā)器圖標(biāo)的四周。3.如權(quán)利要求2所述的用戶懸??蚓彌_方法,其特征在于,所述觸發(fā)器圖標(biāo)的邊界點(diǎn)選擇為對(duì)角的兩個(gè)點(diǎn),所述觸發(fā)器圖標(biāo)的邊界點(diǎn)選擇為所述懸??虻目拷鲇|發(fā)器圖標(biāo)最上端的兩個(gè)點(diǎn)。4.一種用戶懸??蚓彌_系統(tǒng),其特征在于,該系統(tǒng)包括: 觸發(fā)器圖標(biāo)識(shí)別模塊,用于識(shí)別觸發(fā)器圖標(biāo)的坐標(biāo); 觸發(fā)點(diǎn)識(shí)別模塊,用于識(shí)別觸發(fā)點(diǎn)的位置坐標(biāo); 懸停框展示位置判定模塊,用于接收所述觸發(fā)器圖標(biāo)的坐標(biāo),以及用戶終端上的會(huì)產(chǎn)生沖突顯示的其它圖標(biāo)的坐標(biāo),來判定所述懸??蛟谟|發(fā)器圖標(biāo)周圍的顯示位置,并實(shí)時(shí)生成懸??蝻@示位置的坐標(biāo); 緩沖區(qū)位置設(shè)定模塊,用于接收所述觸發(fā)器圖標(biāo)的坐標(biāo)和所述懸??蝻@示位置的坐標(biāo),形成所述觸發(fā)器圖標(biāo)和所述懸??驁D標(biāo)之間的緩沖區(qū); 緩沖區(qū)緩沖邏輯設(shè)置模塊,用于實(shí)時(shí)讀取所述緩沖區(qū)位置設(shè)定模塊中緩沖區(qū)的位置,進(jìn)行緩沖邏輯的設(shè)定,所述緩沖邏輯為:觸發(fā)器在所述緩沖區(qū)觸發(fā)時(shí),所述懸停框不收起,觸發(fā)器離開所述緩沖區(qū)時(shí),所述懸??蚴掌稹?.如權(quán)利要求4所述的用戶懸??蚓彌_系統(tǒng),其特征在于,所述懸??虻恼故疚恢迷谒鲇|發(fā)器圖標(biāo)的四周。
【文檔編號(hào)】G06F3/0481GK105955589SQ201610481980
【公開日】2016年9月21日
【申請(qǐng)日】2016年6月27日
【發(fā)明人】馮暢
【申請(qǐng)人】武漢斗魚網(wǎng)絡(luò)科技有限公司