CN105389365B - 自动轮换图片的方法 - Google Patents
自动轮换图片的方法 Download PDFInfo
- Publication number
- CN105389365B CN105389365B CN201510759598.7A CN201510759598A CN105389365B CN 105389365 B CN105389365 B CN 105389365B CN 201510759598 A CN201510759598 A CN 201510759598A CN 105389365 B CN105389365 B CN 105389365B
- Authority
- CN
- China
- Prior art keywords
- picture
- unit
- rotation plug
- plug
- mobile frame
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Abstract
本发明涉及图片显示领域，尤其涉及一种自动轮换图片的方法。一种自动轮换图片的方法，应用于jQeury Mobile中，所述方法包括：步骤S1，将图片轮换插件提取到jQeury Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；步骤S2，在所述jQeury Mobile框架中留出空白区域；步骤S3，将所述图片轮换插件定位于所述空白区域中；步骤S4，将提取的所述图片宽度设置为100％。
Description
技术领域
本发明涉及图片显示领域，尤其涉及一种自动轮换图片的方法。
背景技术
jQueryMobile为前端开发的一个框架，主要应用于手机端的开发，该框架自带css库及jQuery库，将一个独立的页面分成多个page，在该框架下，自动轮换图片的插件无法获取所需要的width属性，导致多设备多分辨率下该插件无法自适应，jQueryMobile框架中自动轮换图片插件无法自适应各分辨率屏幕。在载入web页面时，使用document.body.clientWidth方法，获取浏览器的当前宽度，赋值给轮换图片，该方法只能在第一次载入web页面时生效，在不刷新web页面时无法重新获取浏览器的宽度，导致在最大化/最小化PC端浏览器或者切换手机横屏/竖屏时，图片宽度无法自适应。
发明内容
针对现有技术中存在的问题，本发明提供了一种自动轮换图片的方法，能够提高图片在电子设备中显示的清晰度。
本发明采用如下技术方案：
一种自动轮换图片的方法，应用于jQuery Mobile中，所述方法包括：
步骤S1，将图片轮换插件提取到jQuery Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；
步骤S2，在所述jQuery Mobile框架中留出空白区域；
步骤S3，将所述图片轮换插件定位于所述空白区域中；
步骤S4，将提取的所述图片宽度设置为100％。
优选的，所述方法还包括：
步骤S0，于所述步骤S1之前，在web页面的html部分载入所述图片轮换插件。
优选的，所述步骤S1具体包括：
步骤S11，将所述html部分提取到jQuery Mobile框架之外。
优选的，所述步骤S1还包括：
步骤S12，将所述图片以<img>标签形式显示。
优选的，所述步骤S2具体包括：
步骤S21，用div标签在所述jQuery Mobile框架中留出空白区域。
优选的，所述步骤S3具体包括：
步骤S31，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
优选的，所述步骤S31具体包括：
步骤S311，采用absolute的样式方法，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
优选的，所述方法中，
所述空白区域的高度固定。
本发明的有益效果是：
本发明设计的轮换图片的兼容性较好，能够自适应所有的终端设备，包括PC和移动端；可以自适应所有的浏览器。并且能够实现jQueryMobile框架中轮换图片插件中图片的自适应屏幕效果。
附图说明
图1为本发明自动轮换图片的方法的示意图；
图2为本发明中jQueryMobile框架在轮换图片的示意图。
具体实施方式
需要说明的是，在不冲突的情况下，下述技术方案，技术特征之间可以相互组合。
下面结合附图对本发明的具体实施方式作进一步的说明：
如图1所示，一种自动轮换图片的方法，应用于jQuery Mobile中，所述方法包括：
步骤S1，将图片轮换插件提取到jQuery Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；
步骤S2，在所述jQuery Mobile框架中留出空白区域；
步骤S3，将所述图片轮换插件定位于所述空白区域中；
步骤S4，将提取的所述图片宽度设置为100％。
本发明一个较佳的实施例中，所述方法还包括：
步骤S0，于所述步骤S1之前，在web页面的html部分载入所述图片轮换插件。
本发明一个较佳的实施例中，所述步骤S1具体包括：
步骤S11，将所述html部分提取到jQuery Mobile框架之外。
本发明一个较佳的实施例中，所述步骤S1还包括：
步骤S12，将所述图片以<img>标签形式显示。
本发明一个较佳的实施例中，所述步骤S2具体包括：
步骤S21，用div标签在所述jQuery Mobile框架中留出空白区域。
本发明一个较佳的实施例中，所述步骤S3具体包括：
步骤S31，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
本发明一个较佳的实施例中，所述步骤S31具体包括：
步骤S311，采用absolute的样式方法，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
本发明一个较佳的实施例中，所述方法中，
所述空白区域的高度固定。
本实施例中，如图2所示，在web页面的html头部载入图片轮换插件swiper.js。将html部分提取到jQueryMobile框架的外面，并将插件中图片从背景提取为使用img标签直接显示。在jQueryMobile框架中用div标签留出固定高度的空白区域。使用position：absolute的样式方法将图片轮换插件定位在jQueryMobile使用div标签所留出的空白区域中。
综上所述，本发明将该部分插件提取到jQueryMobile框架以外，使用position：absolute方法将该部分内容定位在web页面的最顶端，并将里面的图片以<img>标签形式展现，而不是背景，<img>标签中的图片只要设置width：100％就可自适应所有浏览器，并在切换浏览器大小时自适应屏幕。
通过说明和附图，给出了具体实施方式的特定结构的典型实施例，基于本发明精神，还可作其他的转换。尽管上述发明提出了现有的较佳实施例，然而，这些内容并不作为局限。
对于本领域的技术人员而言，阅读上述说明后，各种变化和修正无疑将显而易见。因此，所附的权利要求书应看作是涵盖本发明的真实意图和范围的全部变化和修正。在权利要求书范围内任何和所有等价的范围与内容，都应认为仍属本发明的意图和范围内。
Claims (1)
1.一种自动轮换图片的方法，其特征在于，应用于jQuery Mobile中，所述方法包括：
步骤S0，在web页面的html部分载入图片轮换插件；
步骤S1，将图片轮换插件提取到jQuery Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；步骤S1具体包括：
步骤S11，将所述html部分提取到jQuery Mobile框架之外；
步骤S12，将所述图片以<img>标签形式显示；
步骤S2，用div标签在所述jQuery Mobile框架中留出空白区域；
步骤S3，采用absolute的样式方法，将所述图片轮换插件定位于使用所述div标签留出的空白区域中；
步骤S4，将提取的所述图片宽度设置为100％；
所述空白区域的高度固定。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510759598.7A CN105389365B (zh) | 2015-11-09 | 2015-11-09 | 自动轮换图片的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510759598.7A CN105389365B (zh) | 2015-11-09 | 2015-11-09 | 自动轮换图片的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105389365A CN105389365A (zh) | 2016-03-09 |
| CN105389365B true CN105389365B (zh) | 2019-07-02 |
Family
ID=55421655
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510759598.7A Active CN105389365B (zh) | 2015-11-09 | 2015-11-09 | 自动轮换图片的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105389365B (zh) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2012142784A (ja) * | 2010-12-28 | 2012-07-26 | Research Organization Of Information & Systems | 類似映像フレーム抽出方法、及び類似映像フレーム表示方法、そのような方法を用いる類似映像フレーム抽出装置、及び類似映像フレーム抽出プログラム |
| CN104021129A (zh) * | 2013-02-28 | 2014-09-03 | 腾讯科技（深圳）有限公司 | 显示组图的方法及终端 |
| WO2015127882A1 (en) * | 2014-02-26 | 2015-09-03 | Tencent Technology (Shenzhen) Company Limited | Method, apparatus and system for extracting webpage content |
-
2015
- 2015-11-09 CN CN201510759598.7A patent/CN105389365B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2012142784A (ja) * | 2010-12-28 | 2012-07-26 | Research Organization Of Information & Systems | 類似映像フレーム抽出方法、及び類似映像フレーム表示方法、そのような方法を用いる類似映像フレーム抽出装置、及び類似映像フレーム抽出プログラム |
| CN104021129A (zh) * | 2013-02-28 | 2014-09-03 | 腾讯科技（深圳）有限公司 | 显示组图的方法及终端 |
| WO2015127882A1 (en) * | 2014-02-26 | 2015-09-03 | Tencent Technology (Shenzhen) Company Limited | Method, apparatus and system for extracting webpage content |
Non-Patent Citations (1)
| Title |
|---|
| Swiper滑动Html5手机浏览器自适应;dyyaries;《http://blog.csdn.net/dyyaries/article/details/46442187》;20150610;正文第1-2页 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105389365A (zh) | 2016-03-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105975576B (zh) | 终端内容适配显示方法、装置和终端 | |
| CN104268221A (zh) | 基于Ios系统WebView的翻页方法和翻页系统 | |
| CN105069060B (zh) | 一种html文档分页排版方法 | |
| CN105279251B (zh) | 虚拟礼物展示方法和装置 | |
| CN103593196A (zh) | 页面布局自适应方法及装置 | |
| CN103389968A (zh) | 一种富文本显示实现方法及系统 | |
| CN106648343A (zh) | 一种用于电子书阅读的滚动翻页的显示方法和装置 | |
| CN102819560A (zh) | 一种网页中图片的显示方法和装置 | |
| WO2016015564A1 (zh) | 一种文档显示方法以及装置 | |
| CN104932659A (zh) | 图像显示方法及显示系统 | |
| JP5877272B2 (ja) | 文書処理装置、文書処理方法、プログラムおよび情報記憶媒体 | |
| CN101937312A (zh) | 一种电子书的标记方法及移动终端 | |
| CN105335445A (zh) | 布局显示方法和装置 | |
| CN104217037A (zh) | 一种在移动终端中显示网页的方法及装置 | |
| EP3166099A3 (en) | Electronic device and method for controlling display thereof | |
| CN101573684B (zh) | 对沿着滚动方向的滚动引起的改变进行可视化的方法 | |
| CN102945128A (zh) | 一种页面显示方法和页面显示装置 | |
| CN103186880B (zh) | 生成缩略图的方法和装置 | |
| WO2008087912A1 (ja) | 表示処理装置、表示処理方法および表示処理プログラム | |
| CN103150293A (zh) | 可进行乱码恢复的电子装置及恢复乱码的方法 | |
| CN105389365B (zh) | 自动轮换图片的方法 | |
| CN106874387B (zh) | 一种自适应html滚屏展示实时信息的方法 | |
| CN104166574A (zh) | 界面显示方法及系统 | |
| CN106776527B (zh) | 电子书数据的显示方法、装置及终端设备 | |
| CN105589883B (zh) | 网页的页面元素的显示方法和装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20201214 Address after: Dai Xi Zhen Shang Qiang Lu, Wuxing District, Huzhou City, Zhejiang Province Patentee after: HUZHOU AIDI ELECTRIC Co.,Ltd. Address before: 201616 No. 3666 Sixian Road, Songjiang District, Shanghai Patentee before: Phicomm (Shanghai) Co.,Ltd. |
|
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20221226 Address after: 313000 room 1019, Xintiandi commercial office, Yishan street, Wuxing District, Huzhou, Zhejiang, China Patentee after: Huzhou YingLie Intellectual Property Operation Co.,Ltd. Address before: Dai Xi Zhen Shang Qiang Lu, Wuxing District, Huzhou City, Zhejiang Province Patentee before: HUZHOU AIDI ELECTRIC Co.,Ltd. |