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

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

2017-12-21 21:37:00 阅读:()

    为了这篇文章http://chendd.cn/information/viewInformation/myLog/215.a吹过可以实现更多的效果就有了本文,如果只看单独实例,请点击转至实例页面:http://www.chendd.cn/demo/betterImageSwitch/index.html,目前共实现了从上至下、从左至右、左上至右下5中效果,其实搞清楚这个实例是如何写的之后“任何效果”都可以实现,以后有机会再继续丰富。其中左上至右下还是稍微复杂的,复杂不在实现上而是在一些运算逻辑上,比如如果要实现一个左上至右下的效果,则需要将一个X * Y大小的矩阵转换为按规则排列的顺序,比如如下的矩阵数据,

1-1

1-2

1-3

1-4

1-5

2-1

2-2

2-3

2-4

2-5

3-1

3-2

3-3

3-4

3-5

4-1

4-2

4-3

4-4

4-5

5-1

5-2

5-3

5-4

5-5

按照这种逻辑应该输出的效果为:

运行结果.jpg

实现的具体过程太复杂了,实现后的代码并不复杂,关键代码不到20行,init函数中result部分是为了解决当行数大于列数程序运算逻辑的问题(这个转换写法如果你可以写的更好完全可以忽略),超出部分补充null数据,实际应用时再忽略这些null数据即可,参考如下(当然你的忽略下列程序中多线程的问题,重点在于main函数中转换数据):

左上角至右下角[1].jpg

这里的实际应用还是JavaScript代码,实现原理一样,将Java代码翻译成JS实现,参考如下:


//将数组对象转换为从左上角到又下角排序的新型数组,没考虑行小于列的情况,如需考虑请参看Java版本的实现

function array2array(arrays){

 

   if(arrays == null || arrays.length == 0){

      return arrays;

   }

   var lens = 30;//可改成动态获取

   var dataLens = 50;

   var allArray = new Array();

   for(var i=0 ; i < lens ; i++){

      var t = 0;

      for(var j=0 ; j <= i ; j++){

         t = j;

      }

      var itemArray1 = new Array();

      //第一部分从第一行到最末行开始寻找的数据

      for(var j=t ; j >= 0 ; j--){

         itemArray1.push(arrays[j][t-j]);

      }

      allArray.push(itemArray1);

   }

   //

   for(var j=1 ; j < dataLens ; j++){

      var itemArray2 = new Array();

      for(var i=0 ; i < lens ; i++){

         if(j + i >= dataLens){

            continue;

         }

         itemArray2.push(arrays[lens-1-i][j+i]);

      }

      allArray.push(itemArray2);

   }

   return allArray;

}


废话不多说了,洗洗睡了,运行效果(mac的背景图有点漏光了,用Windows的画图改出来的)参考为:

jdfw.gif



你可能感兴趣的:
      关键字:var(11)arrays(6)itemarray(6)array(5)for(5)
      互动()
      评论()
      比起点赞,站长更喜欢登录后的评论
      • 0
      • 0
      • 0
      • 0
      • 0