一种页面填充内容的动态展示方法和装置制造方法及图纸

本发明专利技术实施例提供一种页面填充内容的动态展示方法和装置，该方法包括：获取页面中针对第一区域设置的线性渐变参数；根据所述线性渐变参数，渲染所述第一区域的填充内容为线性渐变内容；其中，所述线性渐变参数适配于第一区域所在页面或者所在屏幕的大小。通过本发明专利技术能够根据屏幕的分辨率大小填充页面的内容，在保障维护量小的同时，避免显示内容单一和显示质量下降。

【技术实现步骤摘要】

本申请涉及页面
，尤其涉及一种页面填充内容的动态展示方法和装置。
技术介绍
随着面向用户网站的不断壮大，在页面中嵌入banner等区域或控件来完成对象的宣传越来越受到人们的欢迎。以控件形式呈现的Banner有时嵌在页面中，有时浮于页面之上。不论这些区域或控件如何进行设计，设置基本的背景是普遍的要求。在现有技术中，页面维护人员通常需要人工为Banner等特定区域单独绘制背景图片(或称底图)，然后再引用到页面中。当页面被客户端访问时，相应的区域被下载的背景图片填充，已完成背景的渲染。但目前个人移动终端的种类和型号繁多，这些终端的屏幕显示分辨率五花八门，这就带来了如何保持不同尺寸屏幕显示同一页面的显示一致性的问题。解决这一问题有两种手段，一种是由页面维护人员针对常见的屏幕分辨率同一页面的同一区域分别绘制不同尺寸的背景图片，在客户端对页面进行访问时，根据客户端的分辨率大小自动下载相匹配的背景图片并进行渲染背景，这样的手段会给页面维护人员带来巨大的工作量，后续一旦因网站更新调整背景，也会带来巨大的维护工作量。另一种手段是页面维护人员不需要针对同一页面的同一区域分别绘制不同尺寸的背景图片，而是在客户端对页面进行展示时，根据自身的屏幕分辨率大小对页面中的背景图片进行适应性的拉伸操作，这种方法虽然降低了页面维护人员的工作量，但是拉伸后的背景图片往往带来图像质量的下降，为了在一定程度上避免这种情况，有些网站页面设计人员常常将区域的背景颜色设置为纯色或将背景图片设置为纯色的图片，但这又造成页面显示风格单一的问题。
技术实现思路
本申请实施例的目的是提供一种页面填充内容的动态展示方法和装置，能够根据屏幕的分辨率大小填充页面的内容，在保障维护量小的同时，避免显示内容单一和显示质量下降。为实现上述目的，本申请实施例一方面提供一种页面填充内容的动态展示方法，该方法包括：获取页面中针对第一区域设置的线性渐变参数；根据所述线性渐变参数，渲染所述第一区域的填充内容为线性渐变内容；其中，所述线性渐变参数适配于第一区域所在页面或者所在屏幕的大小。在一个优选的实施例中，所述线性渐变参数包括线性渐变的方向参数、线性渐变的起始颜色参数和线性渐变的结束颜色参数；所述根据线性渐变的参数，渲染第一区域的填充内容为线性渐变内容包括：渲染所述第一区域的填充内容为具有第一渐变方向、第一起始颜色和第一结束颜色的线性渐变内容，所述第一渐变方向与所述线性渐变参数中包括的线性渐变的方向参数相应；所述第一起始颜色与所述线性渐变参数中包括的线性渐变的起始颜色参数相应；所述第一结束颜色与所述线性渐变参数中包括的线性渐变的结束颜色参数相应。在一个优选的实施例中，所述线性渐变参数还包括线性渐变的至少一个中间颜色的参数；所述根据线性渐变的参数，渲染第一区域的填充内容为线性渐变内容包括：渲染所述第一区域的填充内容为具有所述第一渐变方向、第一起始颜色、第一结束颜色和至少一个第一中间颜色的线性渐变内容，所述每个第一中间颜色与线性渐变参数中的一个中间颜色的参数相应。在一个优选的实施例中，所述线性渐变的方向参数包括：从顶部到底部渐变的方向参数，或从底部到顶部渐变的方向参数，或从左向右渐变的方向参数，或从右向左渐变的方向参数，或从右下角到左上角渐变的方向参数，或从左下角到右上角渐变的方向参数，或从右上角到左下角渐变的方向参数，或从左上角到右下角渐变的方向参数。在一个优选的实施例中，所述线性渐变的方向参数包括：任意角度值渐变的方向参数。在一个优选的实施例中，所述第一区域为页面中的至少一个容器。本申请另一方面还提供一种页面填充内容的动态展示装置，包括：线性渐变参数获取单元，用于获取页面中针对第一区域设置的线性渐变参数；所述线性渐变参数适配于第一区域所在页面或者所在屏幕的大小；填充内容渲染单元，用于根据所述线性渐变参数，渲染所述第一区域的填充内容为线性渐变内容。在一个优选的实施例中，所述线性渐变参数包括线性渐变的方向参数、线性渐变的起始颜色参数和线性渐变的结束颜色参数；所述填充内容渲染单元具体用于渲染所述第一区域的填充内容为具有第一渐变方向、第一起始颜色和第一结束颜色的线性渐变内容，所述第一渐变方向与所述线性渐变参数中包括的线性渐变的方向参数相应；所述第一起始颜色与所述线性渐变参数中包括的线性渐变的起始颜色参数相应；所述第一结束颜色与所述线性渐变参数中包括的线性渐变的结束颜色参数相应。在一个优选的实施例中，所述线性渐变参数还包括线性渐变的至少一个中间颜色的参数；所述填充内容渲染单元具体用于渲染所述第一区域的填充内容为具有所述第一渐变方向、第一起始颜色、第一结束颜色和至少一个第一中间颜色的线性渐变内容，所述每个第一中间颜色与线性渐变参数中的一个中间颜色的参数相应。在一个优选的实施例中，所述线性渐变的方向参数包括：从顶部到底部渐变的方向参数，或从底部到顶部渐变的方向参数，或从左向右渐变的方向参数，或从右向左渐变的方向参数，或从右下角到左上角渐变的方向参数，或从左下角到右上角渐变的方向参数，或从右上角到左下角渐变的方向参数，或从左上角到右下角渐变的方向参数。通过本申请实施例的方案，能够根据线性渐变参数动态渲染第一区域的填充内容，且线性渐变内容相对于纯色的背景显示内容更为丰富，无论第一区域随着页面的大小或者屏幕的大小如何发生尺寸上的变化，在渲染该区域的填充内容时都是以线性渐变内容来进行填充，不会导致显示质量上的变化。同时也不需要页面维护人员分别绘制不同尺寸的背景图片，因此减少了页面的维护工作量。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1是本申请实施例提供的页面填充内容的动态展示方法的流程图；图2是本申请实施例一提供的一种页面填充内容的动态展示方法的流程图；图3是本申请实施例二提供的一种页面填充内容的动态展示方法的流程图；图4是本申请实施例提供的一种页面填充内容的动态展示装置的示意图。具体实施方式为了使本
的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方本文档来自技高网...

【技术保护点】
一种页面填充内容的动态展示方法，其特征在于，包括：获取页面中针对第一区域设置的线性渐变参数；根据所述线性渐变参数，渲染所述第一区域的填充内容为线性渐变内容；其中，所述线性渐变参数适配于第一区域所在页面或者所在屏幕的大小。

【技术特征摘要】
1.一种页面填充内容的动态展示方法，其特征在于，包括：
获取页面中针对第一区域设置的线性渐变参数；
根据所述线性渐变参数，渲染所述第一区域的填充内容为线性渐变内容；
其中，所述线性渐变参数适配于第一区域所在页面或者所在屏幕的大小。
2.根据权利要求1所述的动态展示方法，其特征在于，所述线性渐变参数包括线性渐
变的方向参数、线性渐变的起始颜色参数和线性渐变的结束颜色参数；
所述根据线性渐变的参数，渲染第一区域的填充内容为线性渐变内容包括：
渲染所述第一区域的填充内容为具有第一渐变方向、第一起始颜色和第一结束颜色的线
性渐变内容，所述第一渐变方向与所述线性渐变参数中包括的线性渐变的方向参数相应；所
述第一起始颜色与所述线性渐变参数中包括的线性渐变的起始颜色参数相应；所述第一结束
颜色与所述线性渐变参数中包括的线性渐变的结束颜色参数相应。
3.根据权利要求1所述的动态展示方法，其特征在于，所述线性渐变参数还包括线性
渐变的至少一个中间颜色的参数；
所述根据线性渐变的参数，渲染第一区域的填充内容为线性渐变内容包括：
渲染所述第一区域的填充内容为具有所述第一渐变方向、第一起始颜色、第一结束颜色
和至少一个第一中间颜色的线性渐变内容，所述每个第一中间颜色与线性渐变参数中的一个
中间颜色的参数相应。
4.根据权利要求2或3所述的动态展示方法，其特征在于，所述线性渐变的方向参数
包括：
从顶部到底部渐变的方向参数，或
从底部到顶部渐变的方向参数，或
从左向右渐变的方向参数，或
从右向左渐变的方向参数，或
从右下角到左上角渐变的方向参数，或
从左下角到右上角渐变的方向参数，或
从右上角到左下角渐变的方向参数，或
从左上角到右下角渐变的方向参数。
5.根据权利要求1所述的动态展示方法，其特征在于，所述线性渐变的方向参数包括：
任意角度...

【专利技术属性】
技术研发人员：朱琳娜，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY