本发明专利技术公开了一种在页面中显示图片的方法、装置、设备及可读存储介质，该方法包括：获取用于显示在目标页面上的所有图片；分别为每个所述图片创建对应的图片容器，并分别将每个图片显示在对应的所述图片容器中；创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中；本发明专利技术可以利用目标页面上创建的滚动容器、相册容器和图片容器，对多张图片以滚动形式进行显示，起到了更高效的图片显示效果，同时，根据目标图片容器上的点击点确定对目标图片的点击操作，并根据点击操作对目标图片更便捷的进行图片样式的修改。图片样式的修改。图片样式的修改。
【技术实现步骤摘要】
在页面中显示图片的方法、装置、设备及可读存储介质
[0001]本专利技术涉及UI界面设计领域，特别涉及一种在页面中显示图片的方法、装置、设备及可读存储介质。
技术介绍
[0002]随着网页开发技术的发展，用户对H5页面上预览图片的需求逐渐增加。目前在H5页面上显示图片是采用img标签的方式，利用这种方式如果要在预览图片的情况下修改图片样式，则需要修改图片对应的文本样式属性，较为繁琐；此外，现有的H5页面只能预览单张图片，不能对图片进行切换、缩放等操作。
[0003]因此，在H5页面中如何更高效的显示目标图片且能够对目标图片更便捷的进行图片样式修改，成为了本领域技术人员亟需解决的技术问题。
技术实现思路
[0004]本专利技术的目的在于提供一种在页面中显示图片的方法、装置、设备及可读存储介质，解决了现有技术存在的技术问题，达到了更便捷、高效的图片显示效果。
[0005]根据本专利技术的一个方面，提供了一种在页面中显示图片的方法，该方法包括以下步骤：
[0006]获取用于显示在目标页面上的所有图片；
[0007]分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
[0008]创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
[0009]创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
[0010]可选的，在所述创建用于显示在所述目标页面上的滚动容器之后，所述方法还包括：
[0011]获取用于显示所述目标页面的终端的屏幕宽度和屏幕高度；
[0012]将每个所述图片容器的宽度均设置为所述屏幕宽度，并将每个所述图片容器的高度均设置为所述屏幕高度；
[0013]将所有图片容器的宽度的总和设置为所述相册容器的宽度，并将所述屏幕高度设置为所述相册容器的高度；
[0014]将所述滚动容器的高度设置为所述屏幕高度，将所述滚动容器的宽度设置为所述屏幕宽度，并为所述滚动容器设置一个隐藏的横向滚动条以用于横向滚动所述相册容器。
[0015]可选的，在所述将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中之后，所述方法还包括：
[0016]当通过所述滚动容器将所述相册容器中目标图片容器所对应的目标图片显示在所述目标页面上时，通过所述目标图片容器实时获取用户在所述目标图片上触发的点击操
作；
[0017]根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理。
[0018]可选的，所述根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理，具体包括：
[0019]获取所述点击操作对应的点击点的个数；
[0020]当所述点击点的个数为1且所述点击点存在移动操作时，获取所述点击点的起始位置的横坐标和终止位置的横坐标，计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并判断所述横向差值是否小于预设阈值，若是，则根据所述点击操作将所述目标图片在所述目标图片容器内移动，若否，则根据所述点击操作将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中；
[0021]当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理。
[0022]可选的，当所述点击点的个数为1、所述点击点存在移动操作且所述横向差值小于所述预设阈值时，所述根据所述点击操作将所述目标图片在所述目标图片容器内移动，具体包括：
[0023]获取所述点击点的起始位置的坐标和终止位置的坐标；
[0024]计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并计算所述起始位置的纵坐标与所述终止位置的纵坐标的纵向差值；
[0025]按照预设比例值，将所述横向差值转换为横向移动值，并将所述纵向差值转换为纵向移动值；
[0026]按照所述横向移动值和所述纵向移动值、并按照所述起始位置至所述终止位置的方向将所述目标图片在所述目标图片容器内移动。
[0027]可选的，当所述点击点的个数为1、所述点击点存在移动操作且所述横向差值大于所述预设阈值时，所述根据所述点击操作将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，具体包括：
[0028]获取所述点击点的起始位置的横坐标X1和终止位置的横坐标X2；
[0029]若X2
‑
X1＞0，则将在所述相册容器中位于所述目标图片容器之前的图片容器显示在所述滚动容器中；
[0030]若X2
‑
X1＜0，则将在所述相册容器中位于所述目标图片容器之后的图片容器显示在所述滚动容器中。
[0031]可选的，所述当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理，具体包括：
[0032]获取第一点击点的起始位置的第一坐标以及第二点击点的起始位置的第二坐标；
[0033]获取所述第一点击点的终止位置的第三坐标以及所述第二点击点的终止位置的第四坐标；
[0034]计算所述第一坐标与所述第二坐标之间的第一距离，以及计算所述第三坐标与所
述第四坐标之间的第二距离；
[0035]计算所述第二距离与所述第一距离的比值，得到缩放倍数；
[0036]以所述第一坐标与所述第二坐标的中心点为中心，按照所述缩放倍数将所述目标图片在所述目标图片容器内进行缩放处理。
[0037]为了实现上述目的，本专利技术还提供一种在页面中显示图片的装置，该装置具体包括以下组成部分：
[0038]获取模块，用于获取用于显示在目标页面上的所有图片；
[0039]创建模块，用于分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
[0040]排列模块，用于创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
[0041]显示模块，用于创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
[0042]为了实现上述目的，本专利技术还提供一种计算机设备，该计算机设备具体包括：存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述介绍的在页面中显示图片的方法的步骤。
[0043]为了实现上述目的，本专利技术还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种在页面中显示图片的方法，其特征在于，所述方法包括：获取用于显示在目标页面上的所有图片；分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。2.根据权利要求1所述的在页面中显示图片的方法，其特征在于，在所述创建用于显示在所述目标页面上的滚动容器之后，所述方法还包括：获取用于显示所述目标页面的终端的屏幕宽度和屏幕高度；将每个所述图片容器的宽度均设置为所述屏幕宽度，并将每个所述图片容器的高度均设置为所述屏幕高度；将所有图片容器的宽度的总和设置为所述相册容器的宽度，并将所述屏幕高度设置为所述相册容器的高度；将所述滚动容器的高度设置为所述屏幕高度，将所述滚动容器的宽度设置为所述屏幕宽度，并为所述滚动容器设置一个隐藏的横向滚动条以用于横向滚动所述相册容器。3.根据权利要求1所述的在页面中显示图片的方法，其特征在于，在所述将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中之后，所述方法还包括：当通过所述滚动容器将所述相册容器中目标图片容器所对应的目标图片显示在所述目标页面上时，通过所述目标图片容器实时获取用户在所述目标图片上触发的点击操作；根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理。4.根据权利要求3所述的在页面中显示图片的方法，其特征在于，所述根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理，具体包括：获取所述点击操作对应的点击点的个数；当所述点击点的个数为1且所述点击点存在移动操作时，获取所述点击点的起始位置的横坐标和终止位置的横坐标，计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并判断所述横向差值是否小于预设阈值，若是，则根据所述点击操作将所述目标图片在所述目标图片容器内移动，若否，则根据所述点击操作将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中；当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理。5.根据权利要求4所述的在页面中显示图片的方法，其特征在于，当所述点击点的个数为1、所述点击点存在移动操作且所述横向差值小于所述预设阈值时，所述根据所述点击操作将所述目...
【专利技术属性】
技术研发人员：李冲，
申请(专利权)人：平安壹钱包电子商务有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。