一种在网页上展示产品图片的方法技术

本发明专利技术属于网页设计领域，其公开了一种在网页上展示产品图片的方法，解决传统的展现方式存在的对产品的突出展示不够以及对全部的产品展现不够的问题。在本发明专利技术中，将一个产品想要展示的信息封装为一个产品模块，存储在数据库中；将网页对产品模块的展示区域作为一个容器；当要在容器中展示一定数量的产品模块时，从数据库中调取这些产品模块展示在容器中，突出展示当前产品模块，将其它产品模块分布展现在当前产品模块的四周；当用户进行当前焦点的点击操作时，若当前焦点所处为当前产品模块，则在当前产品模块的正面显示信息和背面显示信息之间切换；若当前焦点所处为其它产品模块，则将所点击的其它产品模块切换为新的当前产品模块。

A method of displaying a product picture on a web page

The invention belongs to the field of webpage design, and discloses a method of displaying product pictures on Web pages, which solves the problem of insufficient presentation and insufficient display of products in traditional presentation modes. In the present invention, encapsulating the information of a product to show a product module, stored in the database; Web page will show area of product modules as a container; when you want to show a certain number of product modules in the container, from the database retrieval module shows these products in containers. Highlight the current product module around other products in the product distribution module show module; when the user clicks the current focus, if the current focus of the current product module, display information and display information back to switch between the positive current product module; if the current focus of the module for other products the other products, click on the switching module for current product module.

【技术实现步骤摘要】
一种在网页上展示产品图片的方法
本专利技术属于网页设计领域，具体涉及一种在网页上展示产品图片的方法。
技术介绍
随着计算机技术的发展和人们对于网购的热衷程度的逐渐提高，在网页上展示商家产品的相关信息和图片(或照片)已经是一件司空见惯的事情，针对现有展现方式，大多有以下两种：一是直接采用平铺展示的方式，二是采用轮播的方式展示。采用直接平铺的方式，展现方式偏于静态，会给用户带来视觉疲劳，对于产品的突出形式不够，整个展现方式美感也不够。采用轮播的方式，展现效果较直接平铺而言，更为生动一些，有动态效果，但是对于全部的产品展现不够，也就是说只能看见当前的产品，用户对于有多少产品，包括其他产品大致情况都不能在第一眼见到，只有切换当前选择，才能依次看到所有的产品。
技术实现思路
本专利技术所要解决的技术问题是：提出一种在网页上展示产品图片的方法，解决传统的展现方式存在的对产品的突出展示不够以及对全部的产品展现不够的问题。本专利技术采用的技术方案如下：一种在网页上展示产品图片的方法，包括：将一个产品想要展示的信息封装为一个产品模块，存储在数据库中；将网页对产品模块的展示区域作为一个容器；当要在容器中展示一定数量的产品模块时，从数据库中调取这些产品模块展示在容器中；展示方式为：在容器中央位置开辟一个区域，突出展示当前产品模块，将其它产品模块分布展现在当前产品模块的四周；当用户进行当前焦点的点击操作时，若当前焦点所处为当前产品模块，则在当前产品模块的正面显示信息和背面显示信息之间切换；若当前焦点所处为其它产品模块，则将所点击的其它产品模块切换为新的当前产品模块，将点击之前的当前产品模块切换为其它产品模块。作为进一步优化，所述当前产品模块在展现时，以高于其它产品模块的亮度来显示。作为进一步优化，所述产品模块中封装的信息包括产品的图片、名称、概要信息及详细信息。作为进一步优化，所述当前产品模块在展现时，不会被任何其它产品模块所遮挡。作为进一步优化，所述当前产品模块在展现时，初始化展现的是其正面的图片、名称、概要信息，当对其进行点击操作时，当前产品模块翻转180°，展现其背面的详细信息，再次对其进行点击操作时，则又切换回正面展示。作为进一步优化，所述当前产品模块翻转的过程以css动画展现。作为进一步优化，所述其它产品模块均匀分布展现在当前产品模块的四周边缘区域，其它产品模块展现时可部分叠加展现，并具有一定的偏转角度。作为进一步优化，所述当前产品模块与其它产品模块的切换过程以css动画展现。作为进一步优化，所述偏转角度为-30°～30°。作为进一步优化，该方法还包括：在容器底部布置索引，用以展现当前模块的索引位置和各个模块的排列顺序，并且将索引和具体的模块实现联动，获得点击索引和点击模块拥有相同的效果。本专利技术的有益效果是：在容器中央位置开辟一个区域，突出展示当前产品模块，将其它产品模块分布展现在当前产品模块的四周；按照该方案展示的产品，主次分明，对当前展示的突出效果非常明显；对于其它模块散落在容器里面，只显示主要信息，用户去查看的时候，不会出现视觉疲劳的现象，只有选中想要看到的模块将其转变为当前模块时，才能够继续查看其详细信息，十分人性化，用户学习使用的时间代价将能够大大降低；此外，可以随时在当前模块的正面和背面信息之间进行切换，满足用户查看产品详细信息的需求，其它模块与当前模块之间也可以进行平滑切换，使得用户的接受度友好。附图说明图1为本专利技术中的在网页上展示产品图片的效果示意图。具体实施方式本专利技术旨在提出一种在网页上展示产品图片的方法，解决传统的展现方式存在的对产品的突出展示不够以及对全部的产品展现不够的问题。在本专利技术中，采用图片文字结合的方式来展示产品。对于产品想要展示的信息的集合，包含产品的图片、名称、概要信息、详细信息，我们将其封装为一个模块(model)，将模块所需要的全部信息，存在数据库中，在具体展示时，从数据库中读取数据，而这些数据，是由网站的所有者或者其授权管理的管理员(admin)来添加。用以展示这些model的地方，我们称之为一个容器(container)，一般来讲，container的区域由admin来约定，以适合放置适量的model为标准。而每个model都有正反面的区分，正面展示产品的图片(或照片)、名称、概要信息，背面展示产品的详细信息，初始化状态时，所有的model正面朝上，也就是只展示产品的大概信息。首先，在一个container中可以装有多个(一般为三个以上)model。对于这些model来说，只允许有一个置于container的中间，被称为当前模块(currentmodel)，currentmodel由admin来设定，这样可以根据需求，在不同的时期设定不同的产品作为默认currentmodel，展现形式更为灵活。而对于其他的model，以一种衬托currentmodel的方式出现在周围，如图1所示，其情景类似于将container看成一张桌子，将其他model随意的摆放在桌面上，但也需要靠桌子的边缘一点，根据放置的顺序不同，可能会有叠加的情况，currentmodel出现在桌子的中间，也是最表面上，不会被任何其他模块遮挡。这种展示的方式，使得当前模块的突出方式非常明显，便于将用户的关注点聚集在当前模块，而其他模块出现的叠加状态，给用户一种很真实的感觉，在查看这些model时，就像在翻真实的产品介绍的照片。当用户点击currentmodel时，currentmodel可翻转180度，出现背面的产品详细信息，主次分明，翻转过程采用css动画，用一个明显的过渡。当用户点击其他model时，被点击的model成为currentmodel，之前的currentmodel，成为其他模块，模块的切换过程也是采用css动画，所以在点击的过程中，可以看到模块之间的移动轨迹。因此，概括来讲，本专利技术就是将每个产品信息分别封装在model中，model按照排列规则放置container中，当前模块占据视觉焦点，当前模块可以进行正反面动态切换以展示其产品信息，点击其他模块可实现当前模块和其他模块的切换效果。在具体实现上，可以使用html布局，css修饰样式，以angular.js将读取数据放置在html上，currentmodel定位于整个容器的中央，其他模块如一叠照片，随意的放置在容器里，均匀地分布在当前模块的四周。结合实际的物理学和美学思想，其他模块在随意均匀分布的同时，应当具有一定的偏转角度才算符合物理学，而配合审美，这个偏转角度一般取±30°才能够以更为舒服展示给用户。此外，本专利技术还可以在容器底部布置索引，可以表现出当前模块的索引位置，排列顺序，并且将索引和具体的模块实现联动，获得点击模块和点击索引拥有一样的效果。本文档来自技高网...

【技术保护点】
一种在网页上展示产品图片的方法，其特征在于，包括：将一个产品想要展示的信息封装为一个产品模块，存储在数据库中；将网页对产品模块的展示区域作为一个容器；当要在容器中展示一定数量的产品模块时，从数据库中调取这些产品模块展示在容器中；展示方式为：在容器中央位置开辟一个区域，突出展示当前产品模块，将其它产品模块分布展现在当前产品模块的四周；当用户进行当前焦点的点击操作时，若当前焦点所处为当前产品模块，则在当前产品模块的正面显示信息和背面显示信息之间切换；若当前焦点所处为其它产品模块，则将所点击的其它产品模块切换为新的当前产品模块，将点击之前的当前产品模块切换为其它产品模块。

【技术特征摘要】
1.一种在网页上展示产品图片的方法，其特征在于，包括：将一个产品想要展示的信息封装为一个产品模块，存储在数据库中；将网页对产品模块的展示区域作为一个容器；当要在容器中展示一定数量的产品模块时，从数据库中调取这些产品模块展示在容器中；展示方式为：在容器中央位置开辟一个区域，突出展示当前产品模块，将其它产品模块分布展现在当前产品模块的四周；当用户进行当前焦点的点击操作时，若当前焦点所处为当前产品模块，则在当前产品模块的正面显示信息和背面显示信息之间切换；若当前焦点所处为其它产品模块，则将所点击的其它产品模块切换为新的当前产品模块，将点击之前的当前产品模块切换为其它产品模块。2.如权利要求1所述的一种在网页上展示产品图片的方法，其特征在于，所述当前产品模块在展现时，以高于其它产品模块的亮度来显示。3.如权利要求1所述的一种在网页上展示产品图片的方法，其特征在于，所述产品模块中封装的信息包括产品的图片、名称、概要信息及详细信息。4.如权利要求1所述的一种在网页上展示产品图片的方法，其特征在于，所述当前产品模块在展现时，不会被任何其它产品模块所遮挡。5.如权利要求1所述...

【专利技术属性】
技术研发人员：姚玲梅，漆尧，赵冬，唐军，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川,51