CN114185473A - 在页面中显示图片的方法、装置、设备及可读存储介质 - Google Patents
在页面中显示图片的方法、装置、设备及可读存储介质 Download PDFInfo
- Publication number
- CN114185473A CN114185473A CN202111548299.0A CN202111548299A CN114185473A CN 114185473 A CN114185473 A CN 114185473A CN 202111548299 A CN202111548299 A CN 202111548299A CN 114185473 A CN114185473 A CN 114185473A
- Authority
- CN
- China
- Prior art keywords
- container
- picture
- target
- click
- target picture
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000005096 rolling process Methods 0.000 claims abstract description 86
- 238000012545 processing Methods 0.000 claims description 12
- 230000001960 triggered effect Effects 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 8
- 230000000694 effects Effects 0.000 abstract description 6
- 238000013519 translation Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
- G06F2203/048—Indexing scheme relating to G06F3/048
- G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
Abstract
本发明公开了一种在页面中显示图片的方法、装置、设备及可读存储介质，该方法包括：获取用于显示在目标页面上的所有图片；分别为每个所述图片创建对应的图片容器，并分别将每个图片显示在对应的所述图片容器中；创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中；本发明可以利用目标页面上创建的滚动容器、相册容器和图片容器，对多张图片以滚动形式进行显示，起到了更高效的图片显示效果，同时，根据目标图片容器上的点击点确定对目标图片的点击操作，并根据点击操作对目标图片更便捷的进行图片样式的修改。
Description
技术领域
本发明涉及UI界面设计领域，特别涉及一种在页面中显示图片的方法、装置、设备及可读存储介质。
背景技术
随着网页开发技术的发展，用户对H5页面上预览图片的需求逐渐增加。目前在H5页面上显示图片是采用img标签的方式，利用这种方式如果要在预览图片的情况下修改图片样式，则需要修改图片对应的文本样式属性，较为繁琐；此外，现有的H5页面只能预览单张图片，不能对图片进行切换、缩放等操作。
因此，在H5页面中如何更高效的显示目标图片且能够对目标图片更便捷的进行图片样式修改，成为了本领域技术人员亟需解决的技术问题。
发明内容
本发明的目的在于提供一种在页面中显示图片的方法、装置、设备及可读存储介质，解决了现有技术存在的技术问题，达到了更便捷、高效的图片显示效果。
根据本发明的一个方面，提供了一种在页面中显示图片的方法，该方法包括以下步骤：
获取用于显示在目标页面上的所有图片；
分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
可选的，在所述创建用于显示在所述目标页面上的滚动容器之后，所述方法还包括：
获取用于显示所述目标页面的终端的屏幕宽度和屏幕高度；
将每个所述图片容器的宽度均设置为所述屏幕宽度，并将每个所述图片容器的高度均设置为所述屏幕高度；
将所有图片容器的宽度的总和设置为所述相册容器的宽度，并将所述屏幕高度设置为所述相册容器的高度；
将所述滚动容器的高度设置为所述屏幕高度，将所述滚动容器的宽度设置为所述屏幕宽度，并为所述滚动容器设置一个隐藏的横向滚动条以用于横向滚动所述相册容器。
可选的，在所述将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中之后，所述方法还包括：
当通过所述滚动容器将所述相册容器中目标图片容器所对应的目标图片显示在所述目标页面上时，通过所述目标图片容器实时获取用户在所述目标图片上触发的点击操作；
根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理。
可选的，所述根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理，具体包括：
获取所述点击操作对应的点击点的个数；
当所述点击点的个数为1且所述点击点存在移动操作时，获取所述点击点的起始位置的横坐标和终止位置的横坐标，计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并判断所述横向差值是否小于预设阈值，若是，则根据所述点击操作将所述目标图片在所述目标图片容器内移动，若否，则根据所述点击操作将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中；
当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理。
可选的，当所述点击点的个数为1、所述点击点存在移动操作且所述横向差值小于所述预设阈值时，所述根据所述点击操作将所述目标图片在所述目标图片容器内移动，具体包括：
获取所述点击点的起始位置的坐标和终止位置的坐标；
计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并计算所述起始位置的纵坐标与所述终止位置的纵坐标的纵向差值；
按照预设比例值，将所述横向差值转换为横向移动值，并将所述纵向差值转换为纵向移动值；
按照所述横向移动值和所述纵向移动值、并按照所述起始位置至所述终止位置的方向将所述目标图片在所述目标图片容器内移动。
可选的，当所述点击点的个数为1、所述点击点存在移动操作且所述横向差值大于所述预设阈值时，所述根据所述点击操作将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，具体包括：
获取所述点击点的起始位置的横坐标X1和终止位置的横坐标X2；
若X2-X1＞0，则将在所述相册容器中位于所述目标图片容器之前的图片容器显示在所述滚动容器中；
若X2-X1＜0，则将在所述相册容器中位于所述目标图片容器之后的图片容器显示在所述滚动容器中。
可选的，所述当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理，具体包括：
获取第一点击点的起始位置的第一坐标以及第二点击点的起始位置的第二坐标；
获取所述第一点击点的终止位置的第三坐标以及所述第二点击点的终止位置的第四坐标；
计算所述第一坐标与所述第二坐标之间的第一距离，以及计算所述第三坐标与所述第四坐标之间的第二距离；
计算所述第二距离与所述第一距离的比值，得到缩放倍数；
以所述第一坐标与所述第二坐标的中心点为中心，按照所述缩放倍数将所述目标图片在所述目标图片容器内进行缩放处理。
为了实现上述目的，本发明还提供一种在页面中显示图片的装置，该装置具体包括以下组成部分：
获取模块，用于获取用于显示在目标页面上的所有图片；
创建模块，用于分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
排列模块，用于创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
显示模块，用于创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
为了实现上述目的，本发明还提供一种计算机设备，该计算机设备具体包括：存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述介绍的在页面中显示图片的方法的步骤。
为了实现上述目的，本发明还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述介绍的在页面中显示图片的方法的步骤。
本发明提供的在页面中显示图片的方法、装置、设备及可读存储介质，能够通过先为需要显示在目标页面的所有图片均创建对应的图片容器，再将所有图片容器以横向排列的方式存放一个相册容器中，并让滚动容器具有滚动相册容器的功能，从而将各个图片容器依次显示在滚动容器中，从而达到了在目标页面上滚动显示多张图片的效果，最后基于滚动容器、相册容器和图片容器对需要显示的图片进行显示，避免了现有技术中利用img标签仅能单张显示图片的情况，使得在页面中可以更高效的进行图片显示；同时，在目标图片对应的目标图片容器上，可以根据用户的点击操作生成的点击点数量以及每个点击点的坐标，对目标图片进行平移、切换和缩放等图片样式的修改，避免了现有技术中需要修改图片的文本样式属性以修改图片样式这种较为繁琐的情况，达到了更便捷的图片修改效果。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1为实施例一提供的在页面中显示图片的方法的一种可选的流程示意图；
图2为实施例一提供的相册组件的示意图；
图3为实施例二提供的在页面中显示图片的装置的一种可选的程序模块示意图；
图4为实施例三提供的计算机设备的一种可选的硬件架构示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例一
本发明实施例提供了一种在页面中显示图片的方法，如图1所示，该方法具体包括以下步骤：
步骤S101：获取用于显示在目标页面上的所有图片。
其中，目标页面为满足HTML5(Hyper Text Markup Language 5，第五代超文本标记语言)标准的页面。
步骤S102：分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
其中，图片容器是一种在目标页面中用于显示图片的可视化窗口，在一个图片容器中仅能存放一张图片。
具体的，在步骤S102之后，所述方法还包括：
步骤A1：获取用于显示所述目标页面的终端的屏幕宽度和屏幕高度；
其中，在目标页面中是利用document.documentElement.clientWidth指令和document.documentElement.clientHeight指令来获取显示目标页面的终端的屏幕宽度和屏幕高度。
步骤A2：将每个所述图片容器的宽度均设置为所述屏幕宽度，并将每个所述图片容器的高度均设置为所述屏幕高度。
在本实施例中，将图片在对应的图片容器中设置为居中显示，并为每个图片的宽度和高度按照对应的图片容器的宽度和高度进行居中调整，即在保持图片宽度和高度之间的比例不变的情况下，将图片的宽度设置为对应的图片容器的宽度，图片的高度根据宽度和高度之间的比例进行比例调节，并将图片居中放置在图片容器中。
步骤S103：创建相册容器，并将所有所述图片容器横向排列在所述相册容器中。
其中，相册容器是一种在目标页面中用于将所有图片容器横向排列存放的可视化窗口。
具体的，在步骤S103之后，所述方法还包括：
将所有所述图片容器的宽度的总和设置为所述相册容器的宽度，并将所述相册容器的高度设置为所述屏幕高度。
步骤S104：创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
其中，图片容器、相册容器和滚动容器的高度相同，每个图片容器的宽度均为所述滚动容器的宽度、且所有图片容器的宽度的总和为所述相册容器的宽度。
滚动容器是一种在目标页面中固定的可视化窗口，用于控制相册容器内的各个图片容器进行横向滚动，以使相册容器内各个图片容器均可以滚动到与滚动容器重合的位置，从而实现各个图片以滚动的形式显示在目标页面中。
具体的，在步骤S104之后，所述方法还包括：
将所述滚动容器的高度设置为所述屏幕高度，将所述滚动容器的宽度设置为所述屏幕宽度，并为所述滚动容器设置一个隐藏的横向滚动条以用于横向滚动所述相册容器。
在本实施例中，如图2所示，创建了一个由滚动容器、相册容器和图片容器组成的相册组件，在创建目标页面的过程中以引用的形式将相册组件引用到目标页面中，并将用于显示在目标页面中的所有图片的地址信息、标签等属性信息以数组信息的形式传输至相册组件；根据引用的相册组件在目标页面上创建滚动容器、相册容器和图片容器，并将所有图片基于相册组件实现上述步骤S101-S104的图片显示过程。
具体的，所述方法还包括：
步骤B1：当通过所述滚动容器将所述相册容器中目标图片容器所对应的目标图片显示在所述目标页面上时，通过所述目标图片容器实时获取用户在所述目标图片上触发的点击操作。
其中，点击操作是指用户通过鼠标点击目标图片容器以打开目标图片的操作，或者，用户通过触摸屏幕点击目标图片容器以打开目标图片的操作，经过点击操作后会生成点击点。
具体的，步骤B1，包括：
步骤C1：在所述目标页面中为所述目标图片容器添加touchstart事件、touchmove事件、touchend事件；
其中，当目标图片容器上出现点击操作并生成点击点时触发touchstart事件；当目标图片容器上的点击点开始移动时触发touchmove事件；当目标图片容器上的点击点消失时触发touchend事件。
步骤C2：当所述目标图片容器在所述目标页面上检测到点击操作生成点击点时，触发所述touchstart事件，并通过所述touchstart事件调用touches列表，以通过所述touches列表获取所述点击操作的起始位置的坐标；
其中，touches列表是在目标页面中一种用于记录在目标图片容器上生成点击点个数的列表，伴随着touchstart事件、touchmove事件、touchend事件一起使用，会记录目标容器上点击点的个数以及每个点击点的坐标。
步骤C3：当所述目标图片容器在所述目标页面上检测到所述点击点移动时，触发所述touchmove事件，并通过所述touchmove事件调用所述touches列表，以通过所述touches列表按照设定时间周期性的获取所述点击点当前移动的位置坐标；
步骤C4：当所述目标图片容器在所述目标页面上检测到所述点击点消失时，触发所述touchend事件，并通过所述touchend事件调用所述touches列表，以通过所述touches列表获取所述点击点的终止位置的坐标。
在本实施例中，为相册组件中的每个图片容器均设置touchstart事件、touchmove事件、touchend事件，以便实时获取用户在目标图片容器上触发的点击操作。
步骤B2：根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理。
具体的，步骤B2，包括：
步骤D1：获取所述点击操作对应的点击点的个数；
其中，当目标图片容器上出现点击操作时触发touchstart事件，touches列表会根据touchstart事件统计点击操作生成的点击点的个数并依次记录每个点击点的坐标，点击点个数是通过进入touches列表中获取的。
步骤D2：当所述点击点的个数为1且所述点击点存在移动操作时，获取所述点击点的起始位置的横坐标和终止位置的横坐标，计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并判断所述横向差值是否小于预设阈值，若是，则根据所述点击操作将所述目标图片在所述目标图片容器内移动，若否，则根据所述点击操作将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中。
在本实施例中，先在目标页面中引用相册组件并将需要显示的图片基于相册组件进行显示，用户通过相册组件点击打开目标图片，在点击后对图片进行横向滑动，当滑动距离小于预设阈值时，目标图片随着用户的点击移动距离进行平移，当滑动距离大于预设阈值时，目标图片随着用户的滑动方向将切换为目标图片前一张或后一张的图片。
具体的，步骤D2，包括：
步骤E1：从所述touches列表中获取所述点击点的起始位置的坐标和终止位置的坐标；
步骤E2：计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并计算所述起始位置的纵坐标与所述终止位置的纵坐标的纵向差值；
步骤E3：按照预设比例值，将所述横向差值转换为横向移动值，并将所述纵向差值转换为纵向移动值；
步骤E4：按照所述横向移动值和所述纵向移动值、并按照所述起始位置至所述终止位置的方向将所述目标图片在所述目标图片容器内移动。
在实际应用中，当横向差值大于0且小于预设阈值时，确定当前点击操作为目标图片向左平移；当横向差值小于0且小于预设阈值时，确定当前点击操作为目标图片向右平移；当纵向差值大于0时，确定当前点击操作为目标图片向上平移；当纵向差值小于0时，确定当前点击操作为目标图片向下平移，根据确定的点击操作对目标图片进行平移。
进一步的，步骤D2，还包括：
步骤F1：从所述touches列表中获取所述点击点的起始位置的横坐标X1和终止位置的横坐标X2；
步骤F2：若X2-X1＞0，则将在所述相册容器中位于所述目标图片容器之前的图片容器显示在所述滚动容器中；
若X2-X1＜0，则将在所述相册容器中位于所述目标图片容器之后的图片容器显示在所述滚动容器中。
在实际应用中，当横向差值大于0且大于预设阈值时，确定当前点击操作为目标图片向左切换；当横向差值小于0且大于预设阈值时，确定当前点击操作为目标图片向右切换，根据确定的点击操作对目标图片进行切换。
步骤D3：当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理。
具体的，步骤D3，包括：
步骤G1：从所述touches列表中获取第一点击点的起始位置的第一坐标以及第二点击点的起始位置的第二坐标；
其中，第一点击点和第二点击点是根据目标图片容器触发touchstart事件时，在touches列表中生成的起始时间的两个连续的点击点。
步骤G2：当所述目标图片容器触发所述touchend事件时，从所述touches列表中获取所述第一点击点的终止位置的第三坐标以及所述第二点击点的终止位置的第四坐标；
步骤G3：计算所述第一坐标与所述第二坐标之间的第一距离，以及计算所述第三坐标与所述第四坐标之间的第二距离；
步骤G4：计算所述第二距离与所述第一距离的比值，得到缩放倍数；
步骤G5：以所述第一坐标与所述第二坐标的中心点为中心，按照所述缩放倍数将所述目标图片在所述目标图片容器内进行缩放处理。
在本实施例中，先为需要显示在目标页面的所有图片均创建对应的图片容器，再将所有图片容器以横向排列的方式存放一个相册容器中，并让滚动容器具有滚动相册容器的功能，从而将各个图片容器依次显示在滚动容器中，从而达到了在目标页面上滚动显示多张图片的效果，最后基于滚动容器、相册容器和图片容器对需要显示的图片进行显示，避免了现有技术中利用img标签仅能单张显示图片的情况，使得在页面中可以更高效的进行图片显示；同时，在目标图片对应的目标图片容器上，可以根据用户的点击操作生成的点击点数量以及每个点击点的坐标，对目标图片进行平移、切换和缩放等图片样式的修改，避免了现有技术中需要修改图片的文本样式属性以修改图片样式这种较为繁琐的情况，达到了更便捷的图片修改效果。
实施例二
本发明实施例提供了一种在页面中显示图片的装置，如图3所示，该装置具体包括以下组成部分：
获取模块301，用于获取用于显示在目标页面上的所有图片；
创建模块302，用于分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
排列模块303，用于创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
显示模块304，用于创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
具体的，所述装置还包括：
配置模块，在创建用于显示在所述目标页面上的滚动容器之后用于获取用于显示所述目标页面的终端的屏幕宽度和屏幕高度；将每个所述图片容器的宽度均设置为所述屏幕宽度，并将每个所述图片容器的高度均设置为所述屏幕高度；将所有图片容器的宽度的总和设置为所述相册容器的宽度，并将所述屏幕高度设置为所述相册容器的高度；将所述滚动容器的高度设置为所述屏幕高度，将所述滚动容器的宽度设置为所述屏幕宽度，并为所述滚动容器设置一个隐藏的横向滚动条以用于横向滚动所述相册容器。
进一步的，所述装置还包括：
触发模块，在将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中之后用于当通过所述滚动容器将所述相册容器中目标图片容器所对应的目标图片显示在所述目标页面上时，通过所述目标图片容器实时获取用户在所述目标图片上触发的点击操作；
操作模块，用于根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理。
具体的，所述触发模块，用于：
在所述目标页面中为所述目标图片容器添加touchstart事件、touchmove事件、touchend事件；
当所述目标图片容器在所述目标页面上检测到点击操作生成点击点时，触发所述touchstart事件，并通过所述touchstart事件调用touches列表，以通过所述touches列表获取所述点击操作的起始位置的坐标；
当所述目标图片容器在所述目标页面上检测到所述点击点移动时，触发所述touchmove事件，并通过所述touchmove事件调用所述touches列表，以通过所述touches列表按照设定时间周期性的获取所述点击点当前移动的位置坐标；
当所述目标图片容器在所述目标页面上检测到所述点击点消失时，触发所述touchend事件，并通过所述touchend事件调用所述touches列表，以通过所述touches列表获取所述点击点的终止位置的坐标。
具体的，所述操作模块，包括：
获取单元，用于获取所述点击操作对应的点击点的个数；
第一操作单元，用于当所述点击点的个数为1且所述点击点存在移动操作时，获取所述点击点的起始位置的横坐标和终止位置的横坐标，计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并判断所述横向差值是否小于预设阈值，若是，则根据所述点击操作将所述目标图片在所述目标图片容器内移动，若否，则根据所述点击操作将在所述相册容器中位于所述目标图片容器之前或之后的图片容器显示在所述滚动容器中；
第二操作单元，用于当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理。
进一步的，所述第一操作单元，用于：
从所述touches列表中获取所述点击点的起始位置的坐标和终止位置的坐标；
计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并计算所述起始位置的纵坐标与所述终止位置的纵坐标的纵向差值；
按照预设比例值，将所述横向差值转换为横向移动值，并将所述纵向差值转换为纵向移动值；
按照所述横向移动值和所述纵向移动值、并按照所述起始位置至所述终止位置的方向将所述目标图片在所述目标图片容器内移动。
更进一步的，所述第一操作单元，还用于：
从所述touches列表中获取所述点击点的起始位置的横坐标X1和终止位置的横坐标X2；
若X2-X1＞0，则将在所述相册容器中位于所述目标图片容器之前的图片容器显示在所述滚动容器中；
若X2-X1＜0，则将在所述相册容器中位于所述目标图片容器之后的图片容器显示在所述滚动容器中。
进一步的，所述第二操作单元，用于：
从所述touches列表中获取第一点击点的起始位置的第一坐标以及第二点击点的起始位置的第二坐标；
当所述目标图片容器触发所述touchend事件时，从所述touches列表中获取所述第一点击点的终止位置的第三坐标以及所述第二点击点的终止位置的第四坐标；
计算所述第一坐标与所述第二坐标之间的第一距离，以及计算所述第三坐标与所述第四坐标之间的第二距离；
计算所述第二距离与所述第一距离的比值，得到缩放倍数；
以所述第一坐标与所述第二坐标的中心点为中心，按照所述缩放倍数将所述目标图片在所述目标图片容器内进行缩放处理。
实施例三
本实施例还提供一种计算机设备，如可以执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图4所示，本实施例的计算机设备40至少包括但不限于：可通过系统总线相互通信连接的存储器401、处理器402。需要指出的是，图4仅示出了具有组件401-402的计算机设备40，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
本实施例中，存储器401(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器401可以是计算机设备40的内部存储单元，例如该计算机设备40的硬盘或内存。在另一些实施例中，存储器401也可以是计算机设备40的外部存储设备，例如该计算机设备40上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器401还可以既包括计算机设备40的内部存储单元也包括其外部存储设备。在本实施例中，存储器401通常用于存储安装于计算机设备40的操作系统和各类应用软件。此外，存储器401还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器402在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器402通常用于控制计算机设备40的总体操作。
具体的，在本实施例中，处理器402用于执行存储器401中存储的在页面中显示图片的方法的程序，所述在页面中显示图片的方法的程序被执行时实现如下步骤：
获取用于显示在目标页面上的所有图片；
分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
上述方法步骤的具体实施例过程可参见第一实施例，本实施例在此不再重复赘述。
实施例四
本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，所述计算机程序被处理器执行时实现如下方法步骤：
获取用于显示在目标页面上的所有图片；
分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
上述方法步骤的具体实施例过程可参见第一实施例，本实施例在此不再重复赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种在页面中显示图片的方法，其特征在于，所述方法包括：
获取用于显示在目标页面上的所有图片；
分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
2.根据权利要求1所述的在页面中显示图片的方法，其特征在于，在所述创建用于显示在所述目标页面上的滚动容器之后，所述方法还包括：
获取用于显示所述目标页面的终端的屏幕宽度和屏幕高度；
将每个所述图片容器的宽度均设置为所述屏幕宽度，并将每个所述图片容器的高度均设置为所述屏幕高度；
将所有图片容器的宽度的总和设置为所述相册容器的宽度，并将所述屏幕高度设置为所述相册容器的高度；
将所述滚动容器的高度设置为所述屏幕高度，将所述滚动容器的宽度设置为所述屏幕宽度，并为所述滚动容器设置一个隐藏的横向滚动条以用于横向滚动所述相册容器。
3.根据权利要求1所述的在页面中显示图片的方法，其特征在于，在所述将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中之后，所述方法还包括：
当通过所述滚动容器将所述相册容器中目标图片容器所对应的目标图片显示在所述目标页面上时，通过所述目标图片容器实时获取用户在所述目标图片上触发的点击操作；
根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理。
4.根据权利要求3所述的在页面中显示图片的方法，其特征在于，所述根据所述点击操作，将所述目标图片在所述目标图片容器内移动，或者，将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，或者，将所述目标图片在所述目标图片容器内进行缩放处理，具体包括：
获取所述点击操作对应的点击点的个数；
当所述点击点的个数为1且所述点击点存在移动操作时，获取所述点击点的起始位置的横坐标和终止位置的横坐标，计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并判断所述横向差值是否小于预设阈值，若是，则根据所述点击操作将所述目标图片在所述目标图片容器内移动，若否，则根据所述点击操作将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中；
当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理。
5.根据权利要求4所述的在页面中显示图片的方法，其特征在于，当所述点击点的个数为1、所述点击点存在移动操作且所述横向差值小于所述预设阈值时，所述根据所述点击操作将所述目标图片在所述目标图片容器内移动，具体包括：
获取所述点击点的起始位置的坐标和终止位置的坐标；
计算所述起始位置的横坐标与所述终止位置的横坐标的横向差值，并计算所述起始位置的纵坐标与所述终止位置的纵坐标的纵向差值；
按照预设比例值，将所述横向差值转换为横向移动值，并将所述纵向差值转换为纵向移动值；
按照所述横向移动值和所述纵向移动值、并按照所述起始位置至所述终止位置的方向将所述目标图片在所述目标图片容器内移动。
6.根据权利要求4所述的在页面中显示图片的方法，其特征在于，当所述点击点的个数为1、所述点击点存在移动操作且所述横向差值大于所述预设阈值时，所述根据所述点击操作将在所述相册容器中与所述目标图片容器相邻的图片容器显示在所述滚动容器中，具体包括：
获取所述点击点的起始位置的横坐标X1和终止位置的横坐标X2；
若X2-X1＞0，则将在所述相册容器中位于所述目标图片容器之前的图片容器显示在所述滚动容器中；
若X2-X1＜0，则将在所述相册容器中位于所述目标图片容器之后的图片容器显示在所述滚动容器中。
7.根据权利要求4所述的在页面中显示图片的方法，其特征在于，所述当所述点击点的个数为2且所述点击点存在移动操作时，根据所述点击操作将所述目标图片在所述目标图片容器内进行缩放处理，具体包括：
获取第一点击点的起始位置的第一坐标以及第二点击点的起始位置的第二坐标；
获取所述第一点击点的终止位置的第三坐标以及所述第二点击点的终止位置的第四坐标；
计算所述第一坐标与所述第二坐标之间的第一距离，以及计算所述第三坐标与所述第四坐标之间的第二距离；
计算所述第二距离与所述第一距离的比值，得到缩放倍数；
以所述第一坐标与所述第二坐标的中心点为中心，按照所述缩放倍数将所述目标图片在所述目标图片容器内进行缩放处理。
8.一种在页面中显示图片的装置，其特征在于，所述装置包括：
获取模块，用于获取用于显示在目标页面上的所有图片；
创建模块，用于分别为每个所述图片创建对应的图片容器，并分别将每个所述图片显示在对应的所述图片容器中；
排列模块，用于创建相册容器，并将所有所述图片容器横向排列在所述相册容器中；
显示模块，用于创建用于显示在所述目标页面上的滚动容器，并将所述相册容器中各个所述图片容器按照横向滚动方式依次显示在所述滚动容器中。
9.一种计算机设备，所述计算机设备包括：存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述方法的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111548299.0A CN114185473A (zh) | 2021-12-17 | 2021-12-17 | 在页面中显示图片的方法、装置、设备及可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111548299.0A CN114185473A (zh) | 2021-12-17 | 2021-12-17 | 在页面中显示图片的方法、装置、设备及可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114185473A true CN114185473A (zh) | 2022-03-15 |
Family
ID=80544246
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111548299.0A Pending CN114185473A (zh) | 2021-12-17 | 2021-12-17 | 在页面中显示图片的方法、装置、设备及可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114185473A (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112162687A (zh) * | 2020-10-22 | 2021-01-01 | 腾讯科技（深圳）有限公司 | 图片生成方法和装置、存储介质及电子设备 |
| CN112328924A (zh) * | 2020-10-27 | 2021-02-05 | 青岛以萨数据技术有限公司 | web端实现图片查看器的方法、电子设备、介质及系统 |
| CN112394863A (zh) * | 2019-08-19 | 2021-02-23 | 上海哔哩哔哩科技有限公司 | 图片显示方法、装置、移动终端及存储介质 |
| CN112965645A (zh) * | 2021-03-15 | 2021-06-15 | 中国平安财产保险股份有限公司 | 页面拖拽方法、装置、计算机设备及存储介质 |
| CN113449222A (zh) * | 2021-06-17 | 2021-09-28 | 青岛海尔科技有限公司 | 图片展示方法、图片展示装置和电子设备 |
| CN113656026A (zh) * | 2021-06-11 | 2021-11-16 | 阿里巴巴新加坡控股有限公司 | 商品对象信息展示方法及装置 |
-
2021
- 2021-12-17 CN CN202111548299.0A patent/CN114185473A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112394863A (zh) * | 2019-08-19 | 2021-02-23 | 上海哔哩哔哩科技有限公司 | 图片显示方法、装置、移动终端及存储介质 |
| CN112162687A (zh) * | 2020-10-22 | 2021-01-01 | 腾讯科技（深圳）有限公司 | 图片生成方法和装置、存储介质及电子设备 |
| CN112328924A (zh) * | 2020-10-27 | 2021-02-05 | 青岛以萨数据技术有限公司 | web端实现图片查看器的方法、电子设备、介质及系统 |
| CN112965645A (zh) * | 2021-03-15 | 2021-06-15 | 中国平安财产保险股份有限公司 | 页面拖拽方法、装置、计算机设备及存储介质 |
| CN113656026A (zh) * | 2021-06-11 | 2021-11-16 | 阿里巴巴新加坡控股有限公司 | 商品对象信息展示方法及装置 |
| CN113449222A (zh) * | 2021-06-17 | 2021-09-28 | 青岛海尔科技有限公司 | 图片展示方法、图片展示装置和电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN101957730B (zh) | 信息处理设备和信息处理方法 | |
| US10146419B2 (en) | Method and system for section-based editing of a website page | |
| CN107223241B (zh) | 上下文缩放 | |
| US20130191785A1 (en) | Confident item selection using direct manipulation | |
| US20130061124A1 (en) | Managing forms in electronic documents | |
| KR20140094540A (ko) | 크로스 윈도우 애니메이션 | |
| WO2015094779A1 (en) | Touch-based reorganization of page element | |
| CA2564389C (en) | Multi-source, multi-destination data transfers | |
| US20140237357A1 (en) | Two-dimensional document navigation | |
| EP2874054B1 (en) | Application text adjusting method, device, and terminal | |
| CA2789403A1 (en) | Method and system for organizing information with a sharable user interface | |
| US11675483B2 (en) | Client device, control method, and storage medium for smoothly exchanging the display of images on a device | |
| CN113536173B (zh) | 一种页面处理方法、装置、电子设备及可读存储介质 | |
| CN106155654B (zh) | 屏蔽网页操作的方法、装置及电子设备 | |
| CN114357345A (zh) | 图片处理方法、装置、电子设备及计算机可读存储介质 | |
| CN104598467B (zh) | 一种网页图片的显示方法及装置 | |
| CN111222069A (zh) | 报表组件调整方法、装置及相关设备 | |
| CN114579912A (zh) | 页面布局方法、装置、设备及介质 | |
| CN111897607A (zh) | 应用界面加载与交互方法、设备及存储介质 | |
| CN107391148B (zh) | 视图元素保存方法、装置、电子设备及计算机存储介质 | |
| CN113204401A (zh) | 浏览器渲染方法，终端及存储介质 | |
| CN113722630B (zh) | 基于客户端渲染的资源数据在web页面中的呈现方法及设备 | |
| CN114185473A (zh) | 在页面中显示图片的方法、装置、设备及可读存储介质 | |
| CN110908550B (zh) | 光标悬停状态下的操作处理方法和装置 | |
| CN115917488A (zh) | 一种显示界面处理方法、装置及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |