[发明专利]一种轮播图切换方法及装置

说明书

技术领域

本发明涉及计算机技术领域，更具体地，涉及一种轮播图切换方法及装置。

背景技术

轮播图是网页中常用的播放广告或首页重要信息的广告位，通常用图片或者大块文字表示，目前来讲，网页中轮播图的实现效果基本可分为以下几类：渐隐渐显类，横轴方向滑动类、图片替换类以及3D转轴式切换类。

市场上常见的这三类轮播图，其实现原理比较简单，主要使用方法都是对整个图片进行透明度的改变或者横向位移、3d旋转位移等进行改变来完成轮播图的切换。

上述几种轮播图切换的方式均是对整个图片进行的操作，无法对图片进行更加精细的控制，也无法实现多样化的轮播效果。

发明内容

本发明提供一种克服上述问题或者至少部分地解决上述问题的轮播图切换方法及装置。

根据本发明的第一个方面，提供一种轮播图切换方法，包括：

S1，将图片导入canvas画布中，并对canvas画布进行切分，得到图片的多个切片；

S2，按照设定的移动总时间，在canvas画布中，将每一个切片从初始位置同时移动到最终位置；

S3，在最终位置处对所有的切片进行拼合，重新形成整个图片，以完成轮播图的切换，其中，每一个切片的移动总时间均相等。

本发明的有益效果为：对轮播的图片进行切分实现粒子化，通过对每一个切片的移动来实现轮播图的切换，以及通过canvas技术对图片进行像素化处理，使得能够对每张图片的每个像素进行控制，可以完成粒子化和多样化的轮播效果。

在上述技术方案的基础上，本发明还可以作如下改进。

进一步的，所述图片数据存储于web浏览器的javaScript变量中，所述方法还包括：

在web浏览器中构造图片对象，并将图片对象的src源地址赋值为图片地址；

根据图片加载请求，web浏览器根据图片地址自动对图片进行加载，并将加载完成后的图片存储于javaScript变量中。

进一步的，所述步骤S1中对canvas画布进行切分，得到图片的多个切片包括：

设置切片横向划分个数和切片纵向划分个数；

根据canvas画布的总宽度和切片横向划分个数，计算单个切片的宽度，以及根据canvas画布的总高度和切片纵向划分个数，计算单个切片的高度；

根据单个切片的宽度和高度，对整个图片进行切分，得到图片的多个切片。

进一步的，所述方法还包括：

将切片后的每一个切片的像素数据以及切分时每一个切片在canvas画布中的位置信息存储于javaScript对象中，并擦除整个canvas画布，其中，每一个切片对应一个javaScript对象。

进一步的，所述步骤S2中按照设定的移动总时间，将每一个切片从初始位置同时移动到最终位置包括：

将每一个javaScript对象中的切片导入canvas画布中，根据每一个切片在canvas画布中的初始位置和最终位置，计算每一个切片的移动方向和移动距离；

根据设定的移动总时间以及每一个切片的移动距离，计算每一个切片的移动速度；

按照每一个切片的移动速度以及移动方向，将每一个切片从初始位置移动到最终位置。

进一步的，将javaScript对象中保存的每一个切片的位置信息作为相应切片在canvas画布中的最终位置。

根据本发明的第二方面，还提供一种轮播图切换装置，包括：

切分模块，用于将导入canvas画布的图片进行切分，得到图片的多个切片；

移动模块，用于按照设定的移动总时间，在canvas画布中，将每一个切片从初始位置同时移动到最终位置；

拼合模块，用于在最终位置处对所有的切片进行拼合，重新形成整个图片，以完成轮播图的切换，其中，每一个切片的移动总时间均相等。

进一步的，所述装置还包括设置模块和计算模块；

设置模块，用于设置切片横向划分个数和切片纵向划分个数；

第一计算模块，用于根据canvas画布的总宽度和切片横向划分个数，计算单个切片的宽度，以及根据canvas画布的总高度和切片纵向划分个数，计算单个切片的高度；

所述切分模块，具体用于：

根据单个切片的宽度和高度，对整个图片进行切分，得到图片的多个切片。

进一步的，所述装置还包括第二计算模块和第三计算模块；