[发明专利]一种在网页上展示产品图片的方法

说明书

技术领域

本发明属于网页设计领域，具体涉及一种在网页上展示产品图片的方法。

背景技术

随着计算机技术的发展和人们对于网购的热衷程度的逐渐提高，在网页上展示商家产品的相关信息和图片(或照片)已经是一件司空见惯的事情，针对现有展现方式，大多有以下两种：一是直接采用平铺展示的方式，二是采用轮播的方式展示。

采用直接平铺的方式，展现方式偏于静态，会给用户带来视觉疲劳，对于产品的突出形式不够，整个展现方式美感也不够。

采用轮播的方式，展现效果较直接平铺而言，更为生动一些，有动态效果，但是对于全部的产品展现不够，也就是说只能看见当前的产品，用户对于有多少产品，包括其他产品大致情况都不能在第一眼见到，只有切换当前选择，才能依次看到所有的产品。

发明内容

本发明所要解决的技术问题是：提出一种在网页上展示产品图片的方法，解决传统的展现方式存在的对产品的突出展示不够以及对全部的产品展现不够的问题。

本发明采用的技术方案如下：

一种在网页上展示产品图片的方法，包括：

将一个产品想要展示的信息封装为一个产品模块，存储在数据库中；

将网页对产品模块的展示区域作为一个容器；

当要在容器中展示一定数量的产品模块时，从数据库中调取这些产品模块展示在容器中；

展示方式为：在容器中央位置开辟一个区域，突出展示当前产品模块，将其它产品模块分布展现在当前产品模块的四周；

当用户进行当前焦点的点击操作时，若当前焦点所处为当前产品模块，则在当前产品模块的正面显示信息和背面显示信息之间切换；若当前焦点所处为其它产品模块，则将所点击的其它产品模块切换为新的当前产品模块，将点击之前的当前产品模块切换为其它产品模块。

作为进一步优化，所述当前产品模块在展现时，以高于其它产品模块的亮度来显示。

作为进一步优化，所述产品模块中封装的信息包括产品的图片、名称、概要信息及详细信息。

作为进一步优化，所述当前产品模块在展现时，不会被任何其它产品模块所遮挡。

作为进一步优化，所述当前产品模块在展现时，初始化展现的是其正面的图片、名称、概要信息，当对其进行点击操作时，当前产品模块翻转180°，展现其背面的详细信息，再次对其进行点击操作时，则又切换回正面展示。

作为进一步优化，所述当前产品模块翻转的过程以css动画展现。

作为进一步优化，所述其它产品模块均匀分布展现在当前产品模块的四周边缘区域，其它产品模块展现时可部分叠加展现，并具有一定的偏转角度。

作为进一步优化，所述当前产品模块与其它产品模块的切换过程以css动画展现。

作为进一步优化，所述偏转角度为-30°～30°。

作为进一步优化，该方法还包括：在容器底部布置索引，用以展现当前模块的索引位置和各个模块的排列顺序，并且将索引和具体的模块实现联动，获得点击索引和点击模块拥有相同的效果。

本发明的有益效果是：在容器中央位置开辟一个区域，突出展示当前产品模块，将其它产品模块分布展现在当前产品模块的四周；按照该方案展示的产品，主次分明，对当前展示的突出效果非常明显；

对于其它模块散落在容器里面，只显示主要信息，用户去查看的时候，不会出现视觉疲劳的现象，只有选中想要看到的模块将其转变为当前模块时，才能够继续查看其详细信息，十分人性化，用户学习使用的时间代价将能够大大降低；

此外，可以随时在当前模块的正面和背面信息之间进行切换，满足用户查看产品详细信息的需求，其它模块与当前模块之间也可以进行平滑切换，使得用户的接受度友好。

附图说明

图1为本发明中的在网页上展示产品图片的效果示意图。

具体实施方式

本发明旨在提出一种在网页上展示产品图片的方法，解决传统的展现方式存在的对产品的突出展示不够以及对全部的产品展现不够的问题。