自動輪換圖片的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及圖片顯示領(lǐng)域，尤其涉及一種自動輪換圖片的方法。
【背景技術(shù)】
[0002]jQueryMobile為前端開發(fā)的一個(gè)框架，主要應(yīng)用于手機(jī)端的開發(fā)，該框架自帶css庫及jQuery庫，將一個(gè)獨(dú)立的頁面分成多個(gè)page，在該框架下，自動輪換圖片的插件無法獲取所需要的width屬性，導(dǎo)致多設(shè)備多分辨率下該插件無法自適應(yīng)，jQueryMobile框架中自動輪換圖片插件無法自適應(yīng)各分辨率屏幕。在載入web頁面時(shí)，使用document,body, clientffidth方法，獲取瀏覽器的當(dāng)前寬度，賦值給輪換圖片，該方法只能在第一次載入web頁面時(shí)生效，在不刷新web頁面時(shí)無法重新獲取瀏覽器的寬度，導(dǎo)致在最大化/最小化PC端瀏覽器或者切換手機(jī)橫屏/豎屏?xí)r，圖片寬度無法自適應(yīng)。

【發(fā)明內(nèi)容】

[0003]針對現(xiàn)有技術(shù)中存在的問題，本發(fā)明提供了一種自動輪換圖片的方法，能夠提高圖片在電子設(shè)備中顯示的清晰度。
[0004]本發(fā)明采用如下技術(shù)方案:
[0005]—種自動輪換圖片的方法，應(yīng)用于jQeury Mobile中，所述方法包括:
[0006]步驟S1，將圖片輪換插件提取到j(luò)Qeury Mobile框架之外，將所述圖片輪換插件中的圖片從背景中提取；
[0007]步驟S2，在所述jQeury Mobile框架中留出空白區(qū)域；
[0008]步驟S3，將所述圖片輪換插件定位于所述空白區(qū)域中；
[0009]步驟S4，將提取的所述圖片寬度設(shè)置為100%。
[0010]優(yōu)選的，所述方法還包括:
[0011]步驟S0，于所述步驟S1之前，在web頁面的html部分載入所述圖片輪換插件。
[0012]優(yōu)選的，所述步驟S1具體包括:
[0013]步驟S11，將所述html部分提取到j(luò)Qeury Mobile框架之外。
[0014]優(yōu)選的，所述步驟S1還包括:
[0015]步驟S12，將所述圖片以<img>標(biāo)簽形式顯示。
[0016]優(yōu)選的，所述步驟S2具體包括:
[0017]步驟S21，用div標(biāo)簽在所述jQeury Mobile框架中留出空白區(qū)域。
[0018]優(yōu)選的，所述步驟S3具體包括:
[0019]步驟S31，將所述圖片輪換插件定位于使用所述div標(biāo)簽留出的空白區(qū)域中。
[0020]優(yōu)選的，所述步驟S31具體包括:
[0021]步驟S311，采用absolute的樣式方法，將所述圖片輪換插件定位于使用所述div標(biāo)簽留出的空白區(qū)域中。
[0022]優(yōu)選的，所述方法中，
[0023]所述空白區(qū)域的高度固定。
[0024]本發(fā)明的有益效果是:
[0025]本發(fā)明設(shè)計(jì)的輪換圖片的兼容性較好，能夠自適應(yīng)所有的終端設(shè)備，包括PC和移動端；可以自適應(yīng)所有的瀏覽器。并且能夠?qū)崿F(xiàn)jQeuryMobile框架中輪換圖片插件中圖片的自適應(yīng)屏幕效果。
【附圖說明】
[0026]圖1為本發(fā)明自動輪換圖片的方法的示意圖；
[0027]圖2為本發(fā)明中jQeuryMobile框架在輪換圖片的示意圖。
【具體實(shí)施方式】
[0028]需要說明的是，在不沖突的情況下，下述技術(shù)方案，技術(shù)特征之間可以相互組合。
[0029]下面結(jié)合附圖對本發(fā)明的【具體實(shí)施方式】作進(jìn)一步的說明:
[0030]如圖1所示，一種自動輪換圖片的方法，應(yīng)用于jQeury Mobile中，所述方法包括:
[0031]步驟S1，將圖片輪換插件提取到j(luò)Qeury Mobile框架之外，將所述圖片輪換插件中的圖片從背景中提??；
[0032]步驟S2，在所述jQeury Mobile框架中留出空白區(qū)域；
[0033]步驟S3，將所述圖片輪換插件定位于所述空白區(qū)域中；
[0034]步驟S4，將提取的所述圖片寬度設(shè)置為100%。
[0035]本發(fā)明一個(gè)較佳的實(shí)施例中，所述方法還包括:
[0036]步驟S0，于所述步驟S1之前，在web頁面的html部分載入所述圖片輪換插件。
[0037]本發(fā)明一個(gè)較佳的實(shí)施例中，所述步驟S1具體包括:
[0038]步驟S11，將所述html部分提取到j(luò)Qeury Mobile框架之外。
[0039]本發(fā)明一個(gè)較佳的實(shí)施例中，所述步驟S1還包括:
[0040]步驟S12，將所述圖片以<img>標(biāo)簽形式顯示。
[0041 ] 本發(fā)明一個(gè)較佳的實(shí)施例中，所述步驟S2具體包括:
[0042]步驟S21，用div標(biāo)簽在所述jQeury Mobile框架中留出空白區(qū)域。
[0043]本發(fā)明一個(gè)較佳的實(shí)施例中，所述步驟S3具體包括:
[0044]步驟S31，將所述圖片輪換插件定位于使用所述div標(biāo)簽留出的空白區(qū)域中。
[0045]本發(fā)明一個(gè)較佳的實(shí)施例中，所述步驟S31具體包括:
[0046]步驟S311，采用absolute的樣式方法，將所述圖片輪換插件定位于使用所述div標(biāo)簽留出的空白區(qū)域中。
[0047]本發(fā)明一個(gè)較佳的實(shí)施例中，所述方法中，
[0048]所述空白區(qū)域的高度固定。
[0049]本實(shí)施例中，如圖2所示，在web頁面的html頭部載入圖片輪換插件swiper.js。將html部分提取到j(luò)QueryMobile框架的外面，并將插件中圖片從背景提取為使用img標(biāo)簽直接顯示。在jQeuryMobile框架中用div標(biāo)簽留出固定高度的空白區(qū)域。使用posit1n:absolute的樣式方法將圖片輪換插件定位在jQueryMobile使用div標(biāo)簽所留出的空白區(qū)域中。
[0050]綜上所述，本發(fā)明將該部分插件提取到j(luò)QueryMobile框架以外，使用posit1n:absolute方法將該部分內(nèi)容定位在web頁面的最頂端，并將里面的圖片以<img>標(biāo)簽形式展現(xiàn)，而不是背景，<img>標(biāo)簽中的圖片只要設(shè)置width:100%就可自適應(yīng)所有瀏覽器，并在切換瀏覽器大小時(shí)自適應(yīng)屏幕。
[0051]通過說明和附圖，給出了【具體實(shí)施方式】的特定結(jié)構(gòu)的典型實(shí)施例，基于本發(fā)明精神，還可作其他的轉(zhuǎn)換。盡管上述發(fā)明提出了現(xiàn)有的較佳實(shí)施例，然而，這些內(nèi)容并不作為局限。
[0052]對于本領(lǐng)域的技術(shù)人員而言，閱讀上述說明后，各種變化和修正無疑將顯而易見。因此，所附的權(quán)利要求書應(yīng)看作是涵蓋本發(fā)明的真實(shí)意圖和范圍的全部變化和修正。在權(quán)利要求書范圍內(nèi)任何和所有等價(jià)的范圍與內(nèi)容，都應(yīng)認(rèn)為仍屬本發(fā)明的意圖和范圍內(nèi)。
【主權(quán)項(xiàng)】
1.一種自動輪換圖片的方法，其特征在于，應(yīng)用于jQeury Mobile中，所述方法包括: 步驟S1，將圖片輪換插件提取到j(luò)Qeury Mobile框架之外，將所述圖片輪換插件中的圖片從背景中提取； 步驟S2，在所述jQeury Mobile框架中留出空白區(qū)域； 步驟S3，將所述圖片輪換插件定位于所述空白區(qū)域中； 步驟S4，將提取的所述圖片寬度設(shè)置為100%。2.根據(jù)權(quán)利要求1所述的自動輪換圖片的方法，其特征在于，所述方法還包括: 步驟S0，于所述步驟S1之前，在web頁面的html部分載入所述圖片輪換插件。3.根據(jù)權(quán)利要求2所述的自動輪換圖片的方法，其特征在于，所述步驟S1具體包括: 步驟S11，將所述html部分提取到j(luò)Qeury Mobile框架之外。4.根據(jù)權(quán)利要求1所述的自動輪換圖片的方法，其特征在于，所述步驟S1還包括: 步驟S12，將所述圖片以<img>標(biāo)簽形式顯示。5.根據(jù)權(quán)利要求1所述的自動輪換圖片的方法，其特征在于，所述步驟S2具體包括: 步驟S21，用div標(biāo)簽在所述jQeury Mobile框架中留出空白區(qū)域。6.根據(jù)權(quán)利要求5所述的自動輪換圖片的方法，其特征在于，所述步驟S3具體包括: 步驟S31，將所述圖片輪換插件定位于使用所述div標(biāo)簽留出的空白區(qū)域中。7.根據(jù)權(quán)利要求6所述的自動輪換圖片的方法，其特征在于，所述步驟S31具體包括: 步驟S311，采用absolute的樣式方法，將所述圖片輪換插件定位于使用所述div標(biāo)簽留出的空白區(qū)域中。8.根據(jù)權(quán)利要求1所述的自動輪換圖片的方法，其特征在于，所述方法中， 所述空白區(qū)域的高度固定。
【專利摘要】本發(fā)明涉及圖片顯示領(lǐng)域，尤其涉及一種自動輪換圖片的方法。一種自動輪換圖片的方法，應(yīng)用于jQeury？Mobile中，所述方法包括：步驟S1，將圖片輪換插件提取到j(luò)Qeury？Mobile框架之外，將所述圖片輪換插件中的圖片從背景中提取；步驟S2，在所述jQeury？Mobile框架中留出空白區(qū)域；步驟S3，將所述圖片輪換插件定位于所述空白區(qū)域中；步驟S4，將提取的所述圖片寬度設(shè)置為100％。
【IPC分類】G06F17/30
【公開號】CN105389365
【申請?zhí)枴緾N201510759598
【發(fā)明人】黃小飛
【申請人】上海斐訊數(shù)據(jù)通信技術(shù)有限公司
【公開日】2016年3月9日
【申請日】2015年11月9日