登录 
欢迎来到陈冬冬(雪地里走)的学习天地 | 经验分享整理平台 | 陈冬冬
 服务器本次启动于:11天前 

简单的图片轮播效果实现(三)

2017-12-27 21:07:28 阅读:()

    接着前面两篇轮播图片实现的文章,发现想要实现各种各样的效果都是可以的,这不再来奉上一篇从中间向周围扩散的实现。期初的构想是较为简单的,从一个5x5或7x7的矩阵中,先找出正中心点,然后再根据一个点分别向上、左、下、右的顺序逐步扩散去实现突破切换,实际上这种实现就束缚了必须是一个正方形的图像才能比较准确的从正中间向周围扩散,那就这样吧,等后期有机会了我再调整为能够满足长方形的实现,现在不是不能满足,得需要做一些兼容,并且如果是长方形的话,就无法从正中心点扩散了,先就这么着,你得信任这点我是可以做到的。如下几个图分别是5x5、7x7的分析图,其中椭圆形的框为最中间的一个点,放形中为以中心的斜下放开水旋转(构成一个圆形区域)的先后顺序,也就是将一个二维的数组转换为以这种结构包裹的新数组即可实现,参考如下:

实现的Java代码为(示例的右键源文件中有同等的js的实现代码),其中代码中的init函数可以忽略,就是构造数据,并且添加了一些数据行数的判定,将一些不符合上述中的(奇数大小的正方形填充null的方式),同样转换的核心代码不超过20行,参考如下,有不同意见的可以自行测试验证:

Java代码.jpg

运行效果图为:由于上述的构想初衷是一个正方形大小的实现,故看到的效果实际上是将这个长方形的区域转换为了正方形大小后的切换效果,如下:

jdfw.gif

单独页面运行地址为:http://www.chendd.cn/demo/centerImageSwitch/index.html 



你可能感兴趣的:
      关键字:正方形(4)长方形(3)中心点(2)一个点(2)实际上(2)
      互动()
      评论()
      比起点赞,站长更喜欢登录后的评论
      • 0
      • 0
      • 0
      • 0
      • 0